Cat learning IOS (40) UI core animation _ jitter effect _ CAKeyframeAnimation, iosui

Cat learning IOS (40) UI core animation _ jitter effect _ CAKeyframeAnimation, iosui

CAT/CAT sharing, must be excellent

For Original Articles, please reprint them. Reprinted Please note: Yan Nai-yu's blog
Http://blog.csdn.net/u013357243? Viewmode = contents

Effect:

Effect 1:

Result 2:

Code:

/// NYViewController. m // image jitter /// Created by apple on 15-5-8. // Copyright (c) 2015 znycat. all rights reserved. // # import "NYViewController. h "@ interface NYViewController () @ property (nonatomic, weak) UIImageView * iconView; @ end @ implementation NYViewController-(UIImageView *) iconView {if (_ iconView = nil) {UIImageView * iconView = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @ "cat"]; icon View. center = CGPointMake (100,230); [self. view addSubview: iconView]; _ iconView = iconView; return _ iconView;}-(void) viewDidLoad {[super viewDidLoad]; [self iconView];} // start jitter-(void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event {[self position]; [self rotation];} // Key Frame Animation movement-(void) position {// 1. create the core animation CAKeyframeAnimation * keyAnima = [CAKeyframeAnimation animation];/ /1.1 tell the system what animation is executed keyAnima. keyPath = @ "position"; // NSValue * v1 = [NSValue valueWithCGPoint: CGPointMake (0,100)]; NSValue * v1 = [NSValue valueWithCGPoint: CGPointMake (100,100)]; NSValue * v2 = [NSValue valueWithCGPoint: CGPointMake (250,100)]; NSValue * v3 = [NSValue failed: CGPointMake (250,300)]; NSValue * v4 = [NSValue valueWithCGPoint: CGPointMake (100,300)]; NSValue * v5 = [NSValue valueWit HCGPoint: CGPointMake (100,100)]; keyAnima. values = @ [v1, v2, v3, v4, v5]; // keyAnima. keyTimes = @ [@ (0.5), @ (0.5), @ (0.5)]; keyAnima. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; // 1.2 Save the status after execution. // 1.2.1 Do not delete the animation keyAnima after execution. removedOnCompletion = NO; // 1.2.2 Save the latest status keyAnima after execution. fillMode = kCAFillModeForwards; // 1.3 sets the animation time keyAnima. duration = 2 ;// 2. observe when and when the animation is executed. delegate = self; // 2. add core animation [self. iconView. layer addAnimation: keyAnima forKey: nil];} // animation jitter effect rotation-(void) rotation {// 1. Create the core animation CAKeyframeAnimation * keyAnima = [CAKeyframeAnimation animation]; // 2. Tell the system what animation to execute. KeyAnima. keyPath = @ "transform. rotation"; // (-M_PI_4/90.0*5) indicates-5 degrees. KeyAnima. values = @ [@ (-M_PI_4/90.0*5), @ (M_PI_4/90.0*5), @ (-M_PI_4/90.0*5)]; // 1.2.1 Do not delete the animation keyAnima after execution. removedOnCompletion = NO; // 1.2.2 Save the latest status keyAnima after execution. fillMode = kCAFillModeForwards; // animation execution time keyAnima. duration = 0.2; // set the number of repetitions. KeyAnima. repeatCount = MAXFLOAT; // 2. Add the core animation [self. iconView. layer addAnimation: keyAnima forKey: nil];} @ end

Introduction to CAKeyframeAnimation Frame Animation

The sub-class of CApropertyAnimation is different from CABasicAnimation: CABasicAnimation can only be changed from one value (fromValue) to another value (toValue), and CAKeyframeAnimation uses 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.
CABasicAnimation can be viewed as a CAKeyframeAnimation with a maximum of two key frames.

Procedure:

1. Create a core Animation

    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];

1.1 tell the system what animation to execute

 keyAnima.keyPath = @"position";    NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];    NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(250, 100)];    NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(250, 300)];    NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(100, 300)];    NSValue *v5 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];    keyAnima.values = @[v1, v2, v3, v4, v5];    keyAnima.timingFunction =  [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

1.2 Save the status after execution
1.2.1 Do not delete the animation after execution

keyAnima.removedOnCompletion = NO;

1.2.2 Save the latest status after execution

  keyAnima.fillMode = kCAFillModeForwards;

1.3 set the animation time

 keyAnima.duration = 2;

2. Observe when and when the animation is executed.

 keyAnima.delegate = self;

2. Add the core animation to CALayer

[self.iconView.layer addAnimation:keyAnima forKey:nil];