CAKeyframeAnimation values CAKeyframeAnimation Path iOS CAKeyframeAnimation Path iOS CAKeyframeAnimation Path QiShare team

Recent project requirements involve some animation effects. For basic animations, you can use the CABasicAnimation implementation that QiShare shared earlier, while path-related animations (such as the line animation in Figure 1) can be implemented using CAKeyframeAnimation.

Figure 1 Broken line animation effect

CAKeyframeAnimation and CABasicAnimation are subclasses of CAPropertyAnimation. CABasicAnimation controls the fromValue and toValue of the animation, while CAKeyframeAnimation controls the entire animation process. Therefore, we can think of CABasicAnimation as a CAKeyframeAnimation that focuses only on the starting and ending points.

In contrast to CABasicAnimation, CAKeyframeAnimation controls the animation process by controlling the animation’s “keyframes” and “pacing” (the time at which the keyframes are executed).

CAKeyframeAnimation uses the “values” or “path” attribute to control the key frames of the animation

Values: An optional NSArray object that holds multiple values, each of which is a keyframe. During animation, key frames are displayed in sequence. Path: an optional CGPathRef object that specifies the path of the animation that allows CALayer’s anchorPoint and position to change. Each point in the path is a keyframe, except for “moveTo”. If you want to animate uniformly along a path, you need to set the calculationMode property to a paced paced. When path is non-nil, the values attribute is overwritten.

CAKeyframeAnimation uses the “keyTimes” property to control the animation pace

KeyTimes: An optional NSArray object that stores multiple keyTimes. Each keyTime is an NSNumber corresponding to a floating point number in the range [0, 1]. Each keyTime corresponds to a key frame in values and controls the time when a key frame occurs. PS: keyTimes applies to path when values are overridden by path. (Path has a higher priority)

3. Use CAKeyframeAnimation to animate the line shown in Figure 1

To assist in the analysis of the animation process, we add tracks to the animation (only the animation itself is analyzed, not tracks), as shown in Figure 2.

Figure 2 Broken line animation with track

1) Initialize the CAKeyframeAnimation object just as we did with CABasicAnimation
Self. Animation = [CAKeyframeAnimation animation]; self.animation.keyPath = @"position"; self.animation.delegate = self; The self. The animation. Duration = 5.0; The self. The animation. The repeatCount = 1.0; self.animation.removedOnCompletion = NO; self.animation.fillMode = kCAFillModeForwards; self.animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];Copy the code
2) Use the “Values” and “keyTimes” properties to set the key frame and pace of the animation
/ / set the animation key frames array self. The animation. Values = @ [[NSValue valueWithCGPoint: self. ImageView. Center], / / can't omit starting point (1, 1) [NSValue valueWithCGPoint:(CGPoint){self.squareSide * 2, [NSValue valueWithCGPoint:(CGPoint){self.squareSide * 2, [NSValue valueWithCGPoint:(CGPoint){self.squareSide * 5, [NSValue valueWithCGPoint:(CGPoint){self.squareSide * 5, self.squareSide * 7}]; / / set the animation the pace of the self. The animation. KeyTimes = @ [@. 0, @. 1, @. 5, @. 8, @ 1.0]; // self.animation.calculationMode = kCAAnimationPaced; // Can replace keyTimes above to achieve uniform speed effectCopy the code

PS: The keyTimes in the above code are set according to the value of values to achieve uniform animation. If keyTimes is not set, duration is divided equally among the four animations.

3) Add and remove animations to layer as you would with CABasicAnimation
if (start) { [self.imageView.layer addAnimation:_animation forKey:@"animation"]; } else {[self.imageView.layer removeAnimationForKey:@"animation"]; // Remove animation}Copy the code

As mentioned above, the path property can also set animation keyframes and override values if Path is not nil. So, step 2) can be replaced with “path” and “keyTimes”.

CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, NULL, self.imageView.center.x, self.imageView.center.y); CGPathAddLineToPoint(path, NULL, self.squareSide * 2, self.squareSide * 1); // Move right 1 space CGPathAddLineToPoint(path, NULL, self.squareSide * 2, self.squareSide * 5); // Drop 4 squares CGPathAddLineToPoint(path, NULL, self.squareSide * 5, self.squareSide * 5); // Move right 3 squares CGPathAddLineToPoint(path, NULL, self.squareSide * 5, self.squareSide * 7); / / down 2 case self. Animation. KeyTimes = @ [@. 0, @. 1, @. 5, @. 8, @ 1.0]; // self.animation.calculationMode = kCAAnimationPaced; Self.animation. Path = path; self.animation. CGPathRelease(path);Copy the code

Use CAKeyframeAnimation to animate curves

The values and Path properties of CAKeyframeAnimation are very powerful. In particular, path can be used to create custom animation paths, such as the ellipse animation shown in Figure 3.

Figure 3 animation effect of ellipse

The code for making the above ellipse path using path is as follows:

CGRect drawRect = (CGRect){self.squareSide, self.squareSide, self.squareSide * 8, self.squareSide * 6}; CGMutablePathRef path = CGPathCreateMutable(); CGPathAddEllipseInRect(path, NULL, drawRect); The self. The animation. KeyTimes = @ [@. 0, @. 25, @ 0.5, @ 0.75, @ 1.0]; // self.animation.calculationMode = kCAAnimationPaced; self.animation.path = path;Copy the code

The sample source code is available from GitHub’s QiShare open source library.

QiShare(Simple book) QiShare(digging gold) QiShare(Zhihu) QiShare(GitHub) QiShare(CocoaChina) QiShare(StackOverflow) QiShare(wechat public account)

Write high quality Objective-C code for iOS (7)