Graphics Reference
In-Depth Information
(
__bridge
id
)[
UIColor
blueColor
].
CGColor
]
;
//add timing function
CAMediaTimingFunction
*fn = [
CAMediaTimingFunction
functionWithName
:
kCAMediaTimingFunctionEaseIn
];
animation.
timingFunctions
=
@[
fn, fn, fn
]
;
//apply animation to layer
[
self
.colorLayer
addAnimation
:animation
forKey
:
nil
];
}
@end
In Chapter 8, we updated our clock project to include animation. That looks good, but it
would be even better with the right easing function. When a real-life analog clock's hand
moves, it usually starts slowly then suddenly snaps into position before easing to a stop at
the last moment. None of the standard easing functions is
quite
right for the effect we want
though. How can we create a new one?
In addition to the
+functionWithName:
constructor,
CAMediaTimingFunction
also has an
alternative constructor method,
+functionWithControlPoints::::
, that has four floating-
point arguments. (Note the bizarre method syntax, which doesn't include separate names
for each argument. This is perfectly legal in objective-C, but contravenes Apple's own
guidelines for method naming, and seems like a curious design choice.)
Using this method, we can construct a custom easing function that is ideally suited to our
clock animation. To understand how to use this method, though, we must learn a bit more
about how
CAMediaTimingFunction
works.
The Cubic Bézier Curve
The basic principle of
CAMediaTimingFunction
function is that it transforms an input time
into a proportional change between a start and end value. We can represent these as a
simple graph, with time (
t
) on the x axis and change (
delta
) on the y axis. The graph for
linear easing is therefore a simple diagonal from the origin (see Figure 10.1).
