CAKeyframeAnimation—关键帧动画

奋斗的七月

属性说明

• values : 一个NSArray对象。里面的元素称为”关键帧”(keyframe),动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧
• path : (画圆、椭圆、贝塞儿曲线)可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动,path只对CALayer的anchorPoint和position起作用,如果你设置了path，那么values将被忽略
• keyTimes : 可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的
• timingFunctions: 控制动画快进慢出、慢进快出等特性
• rotationMode(确定沿路径动画的对象是否旋转以匹配路径切线)
• tensionValues(定义曲线紧密度的NSNumber对象数组)
• continuityValues(NSNumber对象的数组，定义了时序曲线拐角的锐度)
• biasValues(一个NSNumber对象数组，用于定义曲线相对于控制点的位置)
• Rotation Mode Values(这些常量由rotationMode属性使用。)
• Value calculation modes(这些常量由calculateMode属性使用)

实例

点赞动画 ( 红心动画 )

- (void)initBtn{
    UIButton *btn = [[UIButton alloc]init];
    btn.frame = CGRectMake(50, 150, 30, 30);
//    btn.showsTouchWhenHighlighted = YES;//---点击闪烁
    [btn setImage:[UIImage imageNamed:@"priase_dafault"] forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"priase_select"] forState:UIControlStateSelected];
    [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

- (void)btnClick:(UIButton *)sender{
    sender.selected = !sender.selected;
    
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
    if (sender.selected) {
        animation.values = @[@1.5 ,@0.8, @1.0,@1.2,@1.0];
        animation.duration = 0.5;
    }else{
        animation.values = @[@0.8, @1.0];
        animation.duration = 0.4;
    }
    animation.calculationMode = kCAAnimationCubic;
    [sender.layer addAnimation:animation forKey:@"transform.scale"];
}

红心移动到屏幕右下角

- (void)initBtn{
    UIButton *btn = [[UIButton alloc]init];
    btn.frame = CGRectMake(50, 150, 30, 30);
//    btn.showsTouchWhenHighlighted = YES;//---点击闪烁
    [btn setImage:[UIImage imageNamed:@"priase_dafault"] forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"priase_select"] forState:UIControlStateSelected];
    [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

- (void)btnClick:(UIButton *)sender{
    sender.selected = !sender.selected;

    CAKeyframeAnimation *caAnimation = [CAKeyframeAnimation animation];
    caAnimation.keyPath = @"position";
    NSValue *V1 = [NSValue valueWithCGPoint:sender.center];
    NSValue *V2 = [NSValue valueWithCGRect:CGRectMake(self.view.frame.size.width-30, self.view.frame.size.height-30, 30, 30)];
    caAnimation.values = @[V1,V2];
    caAnimation.duration = 3;
    caAnimation.removedOnCompletion = NO;
    caAnimation.fillMode = kCAFillModeForwards;
    [sender.layer addAnimation:caAnimation forKey:nil];
    
}

红心转圈动画

- (void)initBtn{
    UIButton *btn = [[UIButton alloc]init];
    btn.frame = CGRectMake(50, 150, 30, 30);
//    btn.showsTouchWhenHighlighted = YES;//---点击闪烁
    [btn setImage:[UIImage imageNamed:@"priase_dafault"] forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"priase_select"] forState:UIControlStateSelected];
    [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

- (void)btnClick:(UIButton *)sender{
    sender.selected = !sender.selected;
    
    //设置path************************
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    //     设置动画属性
    anim.keyPath = @"position";
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
    anim.path = path.CGPath;
    anim.duration = 0.25;
    
    // 取消反弹
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.repeatCount = MAXFLOAT;
    [sender.layer addAnimation:anim forKey:nil];
}

红心抖动

#define angle2radian(x) ((x) /180.0* M_PI)

- (void)initBtn{
    UIButton *btn = [[UIButton alloc]init];
    btn.frame = CGRectMake(50, 150, 30, 30);
//    btn.showsTouchWhenHighlighted = YES;//---点击闪烁
    [btn setImage:[UIImage imageNamed:@"priase_dafault"] forState:UIControlStateNormal];
    [btn setImage:[UIImage imageNamed:@"priase_select"] forState:UIControlStateSelected];
    [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

- (void)btnClick:(UIButton *)sender{
    sender.selected = !sender.selected;
    
    CAKeyframeAnimation*anim = [CAKeyframeAnimation animation];
    anim.keyPath=@"transform.rotation";
    anim.values=@[@(angle2radian(-5)),@(angle2radian(5)),@(angle2radian(-5))];
    anim.repeatCount=MAXFLOAT;
    anim.duration=0.5;
    [sender.layer addAnimation:anim forKey:nil];
}

keyPath可以使用的key

- #define angle2Radian(angle) ((angle)/180.0*M_PI)

- transform.rotation.x 围绕x轴翻转 参数：角度 angle2Radian(4)

transform.rotation.y 围绕y轴翻转 参数：同上

transform.rotation.z 围绕z轴翻转 参数：同上

transform.rotation 默认围绕z轴

transform.scale.x x方向缩放 参数：缩放比例 1.5

transform.scale.y y方向缩放 参数：同上

transform.scale.z z方向缩放 参数：同上

transform.scale 所有方向缩放 参数：同上

transform.translation.x x方向移动 参数：x轴上的坐标 100

transform.translation.y x方向移动 参数：y轴上的坐标

transform.translation.z x方向移动 参数：z轴上的坐标

transform.translation 移动 参数：移动到的点 （100，100）

opacity 透明度 参数：透明度 0.5

backgroundColor 背景颜色 参数：颜色 (id)[[UIColor redColor] CGColor]

cornerRadius 圆角 参数：圆角半径 5

borderWidth 边框宽度 参数：边框宽度 5

bounds 大小 参数：CGRect

contents 内容 参数：CGImage

contentsRect 可视内容 参数：CGRect 值是0～1之间的小数

hidden 是否隐藏

position

shadowColor

shadowOffset

shadowOpacity

shadowRadius

------注意------

fillMode的作用就是决定当前对象过了非active时间段的行为. 比如动画开始之前,动画结束之后。如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用.

查文档看了下removedOnCompletion和fillMode这两个属性配合使用

各个fillMode的意义

• kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
• kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
• kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态
• kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.

rotationAnimation.removedOnCompletion = NO;
rotationAnimation.fillMode = kCAFillModeForwards;