IOSUI-core animation (Key Frame Animation CAKeyframeAnimation ),

IOSUI-core animation (Key Frame Animation CAKeyframeAnimation ),

IOS development UI-core animation (Key Frame Animation)

1. Brief Introduction

CAKeyframeAnimationIt is a subclass of CApropertyAnimation. The difference with CABasicAnimation is that CABasicAnimation can only be changed from one value (fromValue) to another value (toValue), and CAKeyframeAnimation will use an NSArray to save these values.

Property parsing:

Values: The above NSArray object. The elements are called "key frames" (keyframe ). The animation object will display each key frame in the values array in sequence within the specified time (duration)

Path: you can set a CGPathRef \ CGMutablePathRef to move the layer along with the path. Path only applies to the anchorPoint and position of CALayer. If you set path, values will be ignored.

KeyTimes: You can specify the corresponding time point for the corresponding key frame. The value range is 0 to 1.0. Each time value in keyTimes corresponds to each frame in values. when keyTimes is not set, the time of each key frame is equally divided.

Note: CABasicAnimation can be viewed as a CAKeyframeAnimation with a maximum of two key frames.

Ii. Sample Code

Method 1:

Code:

9 # import "YYViewController. h "10 11 @ interface YYViewController () 12 @ property (weak, nonatomic) IBOutlet UIView * customView; 13 14 @ end15 16 @ implementation YYViewController17 18 19-(void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event20 {21 // 1. create a core animation 22 CAKeyframeAnimation * keyAnima = [CAKeyframeAnimation animation]; 23 // Pan 24 keyAnima. keyPath = @ "position"; 25 // 1.1 tell the system what animation to execute 26 NSValue * value1 = [NSValue valueWithCGPoint: CGPointMake (100,100)]; 27 NSValue * value2 = [NSValue valueWithCGPoint: CGPointMake (200,100)]; 28 NSValue * value3 = [NSValue failed: CGPointMake (200,200)]; 29 NSValue * value4 = [NSValue failed: CGPointMake (100,200)]; 30 NSValue * value5 = [NSValue valueWithCGPoint: CGPointMake (100,100)]; 31 keyAnima. values = @ [value1, value2, value3, value4, value5]; 32 // After the animation is executed, the animation 33 keyAnima is not deleted. removedOnCompletion = NO; 34 // 1.3 sets the latest animation status 35 keyAnima. fillMode = kCAFillModeForwards; 36 // 1.4 set the animation execution time to 37 keyAnima. duration = 4.0; 38 // 1.5 set the animation rhythm 39 keyAnima. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; 40 41 // set proxy, start-end 42 keyAnima. delegate = self; 43 // 2. add core animation 44 [self. customView. layer addAnimation: keyAnima forKey: nil]; 45} 46 47-(void) animationDidStart :( CAAnimation *) anim48 {49 NSLog (@ "Start Animation "); 50} 51 52-(void) animationDidStop :( CAAnimation *) anim finished :( BOOL) flag53 {54 NSLog (@ "end Animation"); 55} 56 @ end

Note: A view is dragged into the storyboard and associated with custom in the controller.

Results and printed results:

Supplement: Set the animation rhythm

The second method (using path) allows the layer to move (circle) on the specified path ):

Code:

# Import "YYViewController. h "@ interface YYViewController () @ property (weak, nonatomic) IBOutlet UIView * customView; @ end @ implementation YYViewController-(void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event {// 1. create an animation object CAKeyframeAnimation * anim = [CAKeyframeAnimation animation]; anim. duration = 2; UIBezierPath * path = [UIBezierPath bezierPath]; [path moveToPoint: CGPointMake (50, 50)]; [path addLineToPoint: CGPointMake (300, 50)]; [path addLineToPoint: CGPointMake (300,400)]; anim. keyPath = @ "position"; anim. path = path. CGPath; // set the proxy, start-end keyAnima. delegate = self; [self. imageV. layer addAnimation: anim forKey: nil];}-(void) animationDidStart :( CAAnimation *) anim42 {NSLog (@ "Start Animation");}-(void) animationDidStop :( CAAnimation *) anim finished :( BOOL) flag47 {NSLog (@ "end Animation") ;}@ end

Note: You can use the path attribute to allow the layer to move on the specified trajectory.

Stop Animation:

40-(IBAction) stopOnClick :( UIButton *) sender {41 // stop self. customView. animation 42 [self. customView. layer removeAnimationForKey: @ "wendingding"]; 43}

Click "Stop Animation". Will the program call it internally? [Self. customView. layer removeAnimationForKey: @ "wendingding"];

Stop the animation marked as wendingding on self. customView. layer.

3. Icon Jitter

Sample Code:

9 # import "YYViewController. h "10 # define angle2Radian (angle)/180.0 * M_PI) 11 12 @ interface YYViewController () 13 @ property (weak, nonatomic) IBOutlet UIImageView * iconView; 14 15 @ end16 17 18 @ implementation YYViewController19 20-(void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event21 {22 // 1. create a core animation 23 CAKeyframeAnimation * keyAnima = [CAKeyframeAnimation animation]; 24 keyAnima. keyPath = @ "transform. rotation "; 25 // set the animation time 26 keyAnima. duration = 0.1; 27 // set the icon jitter radian 28 // convert degrees to radians/180 * M_PI29 keyAnima. values = @ [@ (-angle2Radian (4), @ (angle2Radian (4), @ (-angle2Radian (4)]; 30 // set the number of animation repetitions (set to the maximum value) 31 keyAnima. repeatCount = MAXFLOAT; 32 33 keyAnima. fillMode = kCAFillModeForwards; 34 keyAnima. removedOnCompletion = NO; 35 // 2. add animation 36 [self. iconView. layer addAnimation: keyAnima forKey: nil]; 37} 38 39 @ end

Note: The icon is bent to the left to the right in a radian (4), resulting in a jitter visual effect.

Program interface: