iOS开发UI篇—核心动画(关键帧动画)

一、简单介绍

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

属性解析：

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

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

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

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

二、代码示例

第一种方式：

　　代码：

//
// YYViewController.m
// 10-核心动画（关键帧动画1）
//
// Created by apple on 14-6-21.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;

@end

@implementation YYViewController


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
　　//1.创建核心动画
22　　 CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
　　//平移
　　keyAnima.keyPath=@"position";
　　//1.1告诉系统要执行什么动画
　　NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
　　NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];
　　NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
　　NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];
30　　 NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
　　keyAnima.values=@[value1, value2, value3, value4, value5];
　　//1.2设置动画执行完毕后，不删除动画
　　keyAnima.removedOnCompletion=NO;
　　//1.3设置保存动画的最新状态
　　keyAnima.fillMode=kCAFillModeForwards;
　　//1.4设置动画执行的时间
　　keyAnima.duration=4.0;
　　//1.5设置动画的节奏
　　keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

　　//设置代理，开始—结束
　　keyAnima.delegate=self;
　　//2.添加核心动画
　　[self.customView.layer addAnimation:keyAnima forKey:nil];
}

-(void)animationDidStart:(CAAnimation *)anim
{
　　NSLog(@"开始动画");
}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
　　NSLog(@"结束动画");
}
@end

说明：这个项目在storyboard中拖入了一个view，并和控制器中的custom进行了关联。

效果和打印结果：

 　　

补充：设置动画的节奏

第二种方式（使用path）让layer在指定的路径上移动（画圆）：

代码：

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;

@end

@implementation YYViewController


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.创建核心动画
    CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
    //平移
    keyAnima.keyPath=@"position";
    //1.1告诉系统要执行什么动画
    //创建一条路径
    CGMutablePathRef path=CGPathCreateMutable();
    //设置一个圆的路径
    CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));
    keyAnima.path=path;
    
    //有create就一定要有release
    CGPathRelease(path);
    //1.2设置动画执行完毕后，不删除动画
    keyAnima.removedOnCompletion=NO;
    //1.3设置保存动画的最新状态
    keyAnima.fillMode=kCAFillModeForwards;
    //1.4设置动画执行的时间
    keyAnima.duration=5.0;
    //1.5设置动画的节奏
    keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    //设置代理，开始—结束
    keyAnima.delegate=self;
    //2.添加核心动画
    [self.customView.layer addAnimation:keyAnima forKey:nil];
}

-(void)animationDidStart:(CAAnimation *)anim
{
    NSLog(@"开始动画");
}

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    NSLog(@"结束动画");
}
@end

说明：可以通过path属性，让layer在指定的轨迹上运动。

停止动画：

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
- (IBAction)stopOnClick:(UIButton *)sender;

@end

@implementation YYViewController


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.创建核心动画
    CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
    //平移
    keyAnima.keyPath=@"position";
    //1.1告诉系统要执行什么动画
    //创建一条路径
    CGMutablePathRef path=CGPathCreateMutable();
    //设置一个圆的路径
    CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));
    keyAnima.path=path;
    
    //有create就一定要有release
    CGPathRelease(path);
    //1.2设置动画执行完毕后，不删除动画
    keyAnima.removedOnCompletion=NO;
    //1.3设置保存动画的最新状态
    keyAnima.fillMode=kCAFillModeForwards;
    //1.4设置动画执行的时间
    keyAnima.duration=5.0;
    //1.5设置动画的节奏
    keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    //2.添加核心动画
    [self.customView.layer addAnimation:keyAnima forKey:@"tom"];
}

- (IBAction)stopOnClick:(UIButton *)sender {
    //停止self.customView.layer上名称标示为wendingding的动画
    [self.customView.layer removeAnimationForKey:@"tom"];
}
@end

点击停止动画，程序内部会调用 

[self.customView.layer removeAnimationForKey:@"tom"];

停止self.customView.layer上名称标示为tom的动画。

 

三、图标抖动

代码示例：

//
//  YYViewController.m
//  12-图标抖动
//
//  Created by apple on 14-6-21.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"
#define angle2Radian(angle)  ((angle)/180.0*M_PI)

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *iconView;

@end


@implementation YYViewController

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //1.创建核心动画
    CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
    keyAnima.keyPath=@"transform.rotation";
    //设置动画时间
    keyAnima.duration=0.1;
    //设置图标抖动弧度
    //把度数转换为弧度  度数/180*M_PI
    keyAnima.values=@[@(-angle2Radian(4)), @(angle2Radian(4)), @(-angle2Radian(4))];
    //设置动画的重复次数(设置为最大值)
    keyAnima.repeatCount=MAXFLOAT;
    
    keyAnima.fillMode=kCAFillModeForwards;
    keyAnima.removedOnCompletion=NO;
    //2.添加动画
    [self.iconView.layer addAnimation:keyAnima forKey:nil];
}

@end

说明：图标向左向右偏转一个弧度（4），产生抖动的视觉效果。

程序界面：