Gradient easing and optical illusions in iOSbranches

By Jacob Jennings

There’s this optical illusion called the Mach Bands effect. Basically, it exaggerates our perception of the hard lines at the ends of linear gradients. Eased gradients tend to look better.

Introducing HTGradientEasing: easily add smooth easing to CAGradientLayers. It is a combination of the exhaustive collection of easing functions provided by the AHEasing project and a color mixer, UIColor+CrossFade.

Demo project in action

HotelTonight

A category on CAGradientLayer is provided with the interface:

- (void)setEasedGradientColors:(NSArray *)colors
                     locations:(NSArray *)locations
                easingFunction:(AHEasingFunction)easingFunction
     keyframesBetweenLocations:(NSUInteger)keyframesBetweenLocations;

Colors must be UIColors, and locations NSNumbers in [0,1]. A great variety of easing functions may be passed (quintic/sine/quadratic ease in/out/inout etc)

Example:

[gradientLayer setEasedGradientColors:@[[UIColor redColor], [UIColor blueColor]]
                            locations:@[@0, @1]
                       easingFunction:QuadraticEaseInOut
            keyframesBetweenLocations:6];

Use it? Love/hate it?

Tweet the author @jakejennings. Also, check out HotelTonight’s iOS open source projects:

Written by Jacob Jennings

Read more posts by Jacob, and follow Jacob on Twitter.

Interested in building something great?

Join us in building the worlds most loved hotel app.
View our open engineering positions.