猫猫学IOS（四十）UI之核心动画_抖动效果_CAKeyframeAnimation

猫猫分享，必须精品

原创文章，欢迎转载。转载请注明：翟乃玉的博客

地址：http://blog.csdn.net/u013357243?viewmode=contents

效果：

效果一：

效果二：

代码：

//
//  NYViewController.m
//  图片抖动
//
//  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"]];

        iconView.center = CGPointMake(100, 230);
        [self.view addSubview:iconView];
        _iconView = iconView;
        return _iconView;
    }
    return _iconView;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self iconView];

}

//开始抖动
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    [self position];
    [self rotation];

}

//关键帧动画移动
- (void)position {
    // 1.创建核心动画
    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];
    // 1.1告诉系统执行什么动画
    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 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.keyTimes = @[@(0.5) ,@(0.5), @(0.5)];

    keyAnima.timingFunction =  [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    // 1.2保存执行完之后的状态
    // 1.2.1执行完之后不删除动画
    keyAnima.removedOnCompletion = NO;
    // 1.2.2执行完之后保存最新的状态
    keyAnima.fillMode = kCAFillModeForwards;

    // 1.3设置动画时间
    keyAnima.duration = 2;

    // 2.观察动画什么时候开始执行, 以及什么时候执行完毕
    keyAnima.delegate = self;

    // 2.添加核心动画
    [self.iconView.layer addAnimation:keyAnima forKey:nil];
}

//动画抖动效果rotation
- (void)rotation {
    //1,创建核心动画
    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];

    //2,告诉系统执行什么动画。
    keyAnima.keyPath = @"transform.rotation";

    //              (-M_PI_4 /90.0 * 5)表示-5度 。
    keyAnima.values = @[@(-M_PI_4 /90.0 * 5),@(M_PI_4 /90.0 * 5),@(-M_PI_4 /90.0 * 5)];

    // 1.2.1执行完之后不删除动画
    keyAnima.removedOnCompletion = NO;
    // 1.2.2执行完之后保存最新的状态
    keyAnima.fillMode = kCAFillModeForwards;

    //动画执行时间
    keyAnima.duration = 0.2;

    //设置重复次数。
    keyAnima.repeatCount = MAXFLOAT;

    // 2.添加核心动画
    [self.iconView.layer addAnimation:keyAnima forKey:nil];
}

@end

CAKeyframeAnimation帧动画介绍

CApropertyAnimation的子类，跟CABasicAnimation的区别是：CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值

属性解析：

values：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧

path：可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略

keyTimes：可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的

CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation

用法步骤：

1.创建核心动画

    CAKeyframeAnimation *keyAnima = [CAKeyframeAnimation animation];

1.1告诉系统执行什么动画

 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保存执行完之后的状态

1.2.1执行完之后不删除动画

keyAnima.removedOnCompletion = NO;

1.2.2执行完之后保存最新的状态

  keyAnima.fillMode = kCAFillModeForwards;

1.3设置动画时间

 keyAnima.duration = 2;

2.观察动画什么时候开始执行, 以及什么时候执行完毕

 keyAnima.delegate = self;

2.添加核心动画到CALayer

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