iOS:核心动画之关键帧动画CAKeyframeAnimation

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

具体的关键帧实例如下:

实例一:设置改变的属性值为透明度opacity,触摸屏幕时,动画开始执行,动画执行过程中,动画的透明度逐渐变浅.结束时透明度恢复原状。

代码如下:

//声明属性

#import "ViewController.h"
@interface ViewController ()
@property (strong,nonatomic)CALayer *subLayer; //声明核心动画子层
@end

//创建核心动画子层

- (void)viewDidLoad {
    [super viewDidLoad];

    //创建子层
    self.subLayer = [CALayer layer];
    //设置子层大小
    self.subLayer.bounds = CGRectMake(0, 0, 100, 100);
    //设置子层的位置
    self.subLayer.position = CGPointMake(100, 100);
    //设置子层的背景颜色
    self.subLayer.backgroundColor = [[UIColor redColor]CGColor];
    //添加子层到根层
    [self.view.layer addSublayer:self.subLayer];
}

//处理触摸事件

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //创建关键帧动画
    CAKeyframeAnimation *keyframe = [[CAKeyframeAnimation alloc]init];
    //设置变化属性值为透明度
    keyframe.keyPath = @"opacity";

    //设置每一帧动画的透明度时刻值
    keyframe.values = @[@1.0,@0.5,@0.0,@0.5,@1.0];
        //设置动画持续事件
    keyframe.duration = 1.0f;
    //添加动画到子层
    [self.subLayer addAnimation:keyframe forKey:@"keyAnimation"]; //forkey:的参数可以自己设置,就是一个标示符,区别开其他的动画
}

演示结果:

开始时:                              中间某一时刻:                   结束时:

实例二:设置改变的属性值为位置position,当在屏幕上连续触摸5个点时,动画开始按照这个5个点的连接直线运行。等到结束时,动画就停在最终的位置上,不在恢复原状。

代码如下:

//声明属性

#import "ViewController.h"
#define MAX_CLICKED_NUM 4    //触摸的最大次数
@interface ViewController ()
@property (strong,nonatomic)NSMutableArray *points;  //用于存放触摸屏幕的次数
@property (strong,nonatomic)CALayer *subLayer;//声明核心动画子层
@end

//创建核心动画子层

- (void)viewDidLoad {
    [super viewDidLoad];

    //初始化
    self.points = [NSMutableArray array];

    //创建子层
    self.subLayer = [CALayer layer];
    self.subLayer.bounds = CGRectMake(0, 0, 100, 100);
    self.subLayer.position = CGPointMake(100, 100);
    self.subLayer.backgroundColor = [[UIColor redColor]CGColor];

    //添加子层到根层
    [self.view.layer addSublayer:self.subLayer];

}

//触摸事件的处理(如果触摸次数不够5次,就存储起来,达到5次时,创建帧动画,并开始动画)

//触摸事件的处理
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //获取当前触摸点
    CGPoint location = [[touches anyObject]locationInView:self.view];

    //判断当前的点的个数
    if (self.points.count < MAX_CLICKED_NUM)
    {
        //添加当前点
        [self.points addObject:[NSValue valueWithCGPoint:location]];
    }
    else
    {

        //创建关键帧动画
        CAKeyframeAnimation *keyanimation = [[CAKeyframeAnimation alloc]init];

        //设置该变量为位置position
        keyanimation.keyPath = @"position";

        //设置每一帧动画的位置值
        keyanimation.values = self.points;

        //设置动画持续时间
        keyanimation.duration = 3.0f;

        //设置动画不在恢复原状
        keyanimation.removedOnCompletion = NO;
        keyanimation.fillMode = kCAFillModeForwards;

        //设置代理
        keyanimation.delegate = self;

        //添加动画到层
        [self.subLayer addAnimation:keyanimation forKey:@"keyanimation"];
    }

}

//实现动画的协议方法

#pragma mark -动画代理方法
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    //关闭隐式动画
    [CATransaction begin];
    [CATransaction setDisableActions:YES];

    //停留在最后的位置
    self.subLayer.position = [[self.points lastObject]CGPointValue];

    //提交动画事物
    [CATransaction commit];

    //删除上一次动画结束后保存的所有的数据
    [self.points removeAllObjects];
}

演示结果:点击5次后,运动过程不好捕捉,就不截图了

起点:                                                         终点:

   

实例三:设置改变的属性值为位置position,在屏幕上绘制一条线,绘制结束后,动画就沿着这条线开始动画。等到结束时,动画就停在最终的位置上,不在恢复原状。

代码如下:

//声明属性

#import "ViewController.h"

@interface ViewController ()
@property (strong,nonatomic)CALayer *subLayer;     //声明核心动画子层用作动画层
@property (assign,nonatomic)CGMutablePathRef path; //声明可变的绘图路径
@property (strong,nonatomic)CALayer *DrawLayer;    //声明核心动画子层用来绘图层
@end

//创建两个核心动画子层,一个用来绘制运行线路,另一个用来当作动画层

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];

    //创建绘图子层
    self.DrawLayer = [CALayer layer];
    self.DrawLayer.bounds = self.view.bounds;
    self.DrawLayer.position = CGPointMake(0, 0);
    self.DrawLayer.anchorPoint = CGPointMake(0, 0);
    self.DrawLayer.backgroundColor = [[UIColor whiteColor]CGColor];

    //设置绘图子层的代理,它会调用协议中的绘图方法
    self.DrawLayer.delegate = self;

    //添加绘图子层
    [self.view.layer addSublayer:self.DrawLayer];

    //创建动画子层
    self.subLayer = [CALayer layer];
    self.subLayer.bounds = CGRectMake(0, 0, 100, 100);
    self.subLayer.position = CGPointMake(100, 100);
    self.subLayer.backgroundColor = [[UIColor redColor]CGColor];

    //添加动画子层
    [self.view.layer addSublayer:self.subLayer];
}

//处理触摸点击事件,设置绘制线路径的起点

//触摸点击事件的处理
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //获取当前触摸点
    CGPoint location = [[touches anyObject]locationInView:self.view];

    //创建路经
    self.path = CGPathCreateMutable();

    //将当前点加到路径中去
    CGPathMoveToPoint(self.path, NULL, location.x, location.y);

}

//处理触摸移动事件,绘制一条路径线到终点,此时绘图子层调用setNeedDisplay方法绘图

//触摸移动事件的处理
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    //获取当前触摸点
    CGPoint location = [[touches anyObject]locationInView:self.view];

    //将当前点加到路径中去
    CGPathAddLineToPoint(self.path, NULL, location.x, location.y);

    //让绘图子层绘图
    [self.DrawLayer setNeedsDisplay];
}

//处理触摸结束事件,绘制线路径结束后,创建帧动画,设置相关属性并执行动画

//触摸结束事件的处理
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{

    //创建帧动画
    CAKeyframeAnimation *keyAnimation = [[CAKeyframeAnimation alloc]init];

    //设置改变属性值为位置position
    keyAnimation.keyPath = @"position";

    //设置动画路径为绘制的路径
    keyAnimation.path = self.path;

    //设置动画持续时间
    keyAnimation.duration = 3.0f;

    //设置动画结束时保持不变,不在恢复原状
    keyAnimation.removedOnCompletion = NO;
    keyAnimation.fillMode = kCAFillModeForwards;

    //设置帧动画代理
    keyAnimation.delegate = self;

    //添加帧动画到动画子层
    [self.subLayer addAnimation:keyAnimation forKey:@"keyAnimation"];
}

//实现帧动画协议方法,动画结束后,释放绘制路径

#pragma mark -动画代理方法
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    //释放路径
    CGPathRelease(self.path);
}

//重写绘图子层的绘图方法-(void)drawLayer:(CALayer*)layer inContext:(CGContextRef)ctx,绘图子层代理会调用它绘图

#pragma mark -UILayer画图方法
-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
    //添加路径
    CGContextAddPath(ctx, self.path);

    //设置颜色
    CGContextSetStrokeColorWithColor(ctx, [[UIColor blueColor]CGColor]);

    //绘路径
    CGContextDrawPath(ctx, kCGPathStroke);
}

运行结果如下:只给出起始位置和结束位置截图,动画过程不好捕捉,就不给出截图了

开始时位置:                                                  绘制路径后,动画沿路径运行结束位置:

      

时间: 10-15

iOS:核心动画之关键帧动画CAKeyframeAnimation的相关文章

核心动画基础动画(CABasicAnimation)关键帧动画

1.在iOS中核心动画分为几类: 基础动画(CABasicAnimation) 关键帧动画(CAKeyframeAnimation) 动画组(CAAnimationGroup) 转场动画(CATransition) 2.CAAnimation:核心动画的基础类,不能直接使用,负责动画运行时间,速度的控制,本身实现了CAMediaTiming协议 3.CAPropertyAnimation:属性动画也是基类(通过属性进行动画设置,注意是动画属性),不能直接使用. CABasicAnimation:

ios核心动画之关键帧动画

1 #import "NJViewController.h" 2 3 @interface NJViewController () 4 5 @property (weak, nonatomic) IBOutlet UIView *customView; 6 - (IBAction)btnClick:(id)sender; 7 @end 8 9 @implementation NJViewController 10 11 - (void)touchesBegan:(NSSet *)tou

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

iOS开发UI篇—核心动画(关键帧动画) 一.简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值 属性解析: values:就是上述的NSArray对象.里面的元素称为”关键帧”(keyframe).动画对象会在指定的时间(duration)内,依次显示values数组

iOS核心动画

iOS开发系列--让你的应用“动”起来 --iOS核心动画 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看到动画操作在iOS中是如何简单和高效,很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单: CALayer CALayer简介 CAL

iOS核心动画以及UIView动画的介绍

我们看到很多App带有绚丽狂拽的特效,别出心裁的控件设计,很大程度上提高了用户体验,在增加了实用性的同时,也赋予了app无限的生命力.这些华丽的效果很多都是基于iOS的核心动画原理实现的,本文介绍一些iOS开发中最基本的动画效果实现,掌握了基本属性,才可以绘制出更华丽的效果. 一.概念扩充  1.核心动画: Core Animation,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍. Core Animation可以用在Mac OS X和iOS平台.在iO

IOS 动画专题 --iOS核心动画

iOS开发系列--让你的应用“动”起来 --iOS核心动画 概览 通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看到动画操作在iOS中是如何简单和高效,很多原来想做但是苦于没有思路的动画在iOS中将变得越发简单: CALayer CALayer简介 CALayer常用属性 CALayer绘图 Core Animation 基础动画 关键帧动画 动画组 转场动画 逐帧动画 UIView动画封装目 录 基础动画 关

iOS开发——动画编程OC篇&amp;(三)关键帧动画

一.简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的 区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而 CAKeyframeAnimation会使用一个NSArray保存这些数值 属性解析: values:就是上述的NSArray对象.里面的元素称为”关键帧”(keyframe).动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧 path:可以设置一

&quot;MindManager&quot;学习iOS系列之&quot;CAAnimation-核心动画&quot;详解,让你的应用“动”起来。

"MindManager"学习iOS系列之"CAAnimation-核心动画"详解,思维导图内展示了CAAnimation-核心动画的大多数基本功能和知识,每个part都有代码讲解,展示出CAAnimation-核心动画的清晰轮廓,编者提供了"JPG"."SWF"."PDF"."Word"."Mmap"格式的源文件供给使用.注意:JPG格式仅为图片总览,SWF格式使用

iOS核心动画Core Animation(一)

核心动画Core Animation(一) 一.简述 Core Animation是直接作用在CALayer上的(并非UIView上)非常强大的跨Mac OS X和iOS平台的动画处理API,Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程. 二.核心动画常识 列举处核心动画的一些常识知识. 核心动画的本质:在后台移动图层中的内容,  执行完毕后图层本身的位置并没有发生变化. 如果是Xcode6之前的版本,要导入<QuartzCore/QuartzCore.h>框架,