iOSCoreAnimation动画系列教程（一）：CABasicAnimation【包会】

本文的最新版本已经发布在简书[编程小翁]上，强烈建议到上查看简书，[点击这里跳转]。

在iOS中，图形可分为以下几个层次：

越上层，封装程度越高，动画实现越简洁越简单，但是自由度越低；反之亦然。本文着重介绍Core Animation层的基本动画实现方案。

在iOS中，展示动画可以类比于显示生活中的“拍电影”。拍电影有三大要素：演员+剧本+开拍，概念类比如下：

演员--->CALayer，规定电影的主角是谁
剧本--->CAAnimation，规定电影该怎么演，怎么走，怎么变换
开拍--->AddAnimation，开始执行

一、概念介绍

1.1CALayer是什么呢？

CALayer是个与UIView很类似的概念，同样有layer,sublayer...，同样有backgroundColor、frame等相似的属性，我们可以将UIView看做一种特殊的CALayer，只不过UIView可以响应事件而已。一般来说，layer可以有两种用途，二者不互相冲突：一是对view相关属性的设置，包括圆角、阴影、边框等参数，更详细的参数请点击这里；二是实现对view的动画操控。因此对一个view进行core animation动画，本质上是对该view的.layer进行动画操纵。

1.2CAAnimation是什么呢？

CAAnimation可分为四种：

1.CABasicAnimation
通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation
2.CAKeyframeAnimation
Keyframe顾名思义就是关键点的frame，你可以通过设定CALayer的始点、中间关键点、终点的frame，时间，动画会沿你设定的轨迹进行移动
3.CAAnimationGroup
Group也就是组合的意思，就是把对这个Layer的所有动画都组合起来。PS：一个layer设定了很多动画，他们都会同时执行，如何按顺序执行我到时候再讲。
4.CATransition
这个就是苹果帮开发者封装好的一些动画

二、动手干活

实践出真知，看个例子就知道：

比如我们想实现一个类似心跳的缩放动画可以这么做，分为演员初始化、设定剧本、电影开拍三个步骤：

- (void)initScaleLayer

{

//演员初始化

CALayer *scaleLayer = [[CALayer alloc] init];

scaleLayer.backgroundColor = [UIColor blueColor].CGColor;

scaleLayer.frame = CGRectMake(60, 20 + kYOffset, 50, 50);

scaleLayer.cornerRadius = 10;

[self.view.layer addSublayer:scaleLayer];

[scaleLayer release];

//设定剧本

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];

scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];

scaleAnimation.autoreverses = YES;

scaleAnimation.fillMode = kCAFillModeForwards;

scaleAnimation.repeatCount = MAXFLOAT;

scaleAnimation.duration = 0.8;

//开演

[scaleLayer addAnimation:scaleAnimation forKey:@"scaleAnimation"];

}

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view from its nib.

[self initScaleLayer];

}

效果请参考附图中的蓝色方块。其他效果可以依葫芦画瓢轻松实现。想要实现不同的效果，最关键的地方在于CABasicAnimation对象的初始化方式中keyPath的设定。在iOS中有以下几种不同的keyPath，代表着不同的效果：

此外，我们还可以利用GroupAnimation实现多种动画的组合，在GroupAnimation中的各个动画类型是同时进行的。

- (void)initGroupLayer

{

//演员初始化

CALayer *groupLayer = [[CALayer alloc] init];

groupLayer.frame = CGRectMake(60, 340+100 + kYOffset, 50, 50);

groupLayer.cornerRadius = 10;

groupLayer.backgroundColor = [[UIColor purpleColor] CGColor];

[self.view.layer addSublayer:groupLayer];

[groupLayer release];

//设定剧本

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];

scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];

scaleAnimation.autoreverses = YES;

scaleAnimation.repeatCount = MAXFLOAT;

scaleAnimation.duration = 0.8;

CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];

moveAnimation.fromValue = [NSValue valueWithCGPoint:groupLayer.position];

moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(320 - 80,

groupLayer.position.y)];

moveAnimation.autoreverses = YES;

moveAnimation.repeatCount = MAXFLOAT;

moveAnimation.duration = 2;

CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];

rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];

rotateAnimation.toValue = [NSNumber numberWithFloat:6.0 * M_PI];

rotateAnimation.autoreverses = YES;

rotateAnimation.repeatCount = MAXFLOAT;

rotateAnimation.duration = 2;

CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];

groupAnnimation.duration = 2;

groupAnnimation.autoreverses = YES;

groupAnnimation.animations = @[moveAnimation, scaleAnimation, rotateAnimation];

groupAnnimation.repeatCount = MAXFLOAT;

//开演

[groupLayer addAnimation:groupAnnimation forKey:@"groupAnnimation"];

}

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view from its nib.

[self initGroupLayer];

}

完整的demo工程点CAAnimationDemo.zip下载

=======================================================

by 编程小翁@博客园

from: http://www.cnblogs.com/wengzilin/p/4250957.html

iOSCoreAnimation动画系列教程（一）：CABasicAnimation【包会】相关推荐

【原】iOSCoreAnimation动画系列教程（二）：CAKeyFrameAnimation【包会】
在上一篇专题文章[原]iOSCoreAnimation动画系列教程(一):CABasicAnimation[包会]中我们学习了iOS核心动画CoreAnimation中CABasicAnimation ...
iOSCoreAnimation动画系列教程
在iOS中,图形可分为以下几个层次: 越上层,封装程度越高,动画实现越简洁越简单,但是自由度越低:反之亦然.本文着重介绍Core Animation层的基本动画实现方案. 在iOS中,展示动画可以类比 ...
python基础系列教程——python所有包库的下载
下载地址:https://pypi.python.org/pypi?%3Aaction=browse 支持搜索 Index by date: multidict pymatgen moderngl j ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(二)让物体动起来②
第二种方法,CompositionTarget动画,官方描述为:CompositionTarget对象可以根据每个帧回调来创建自定义动画.其实直接点,CompositionTarget创建的动画是基于 ...
DIY固件系列教程——实现开机LOGO三屏动画的完全替换【转】
本文转载自:http://blog.csdn.net/sdgaojian/article/details/9192433 本教程需要用到如下工具: 1,7Z压缩工具 2,AddCrc32效验工具 3, ...
【建站系列教程】2.2、fiddler手机抓包教程
[建站系列教程]2.2.fiddler手机抓包教程 (全网最良心.实用教程) fiddler手机抓包原理步骤摘要详细步骤 1. 安装fiddler.修改配置 2. 电脑和手机连上同一个wifi 3 ...
【建站系列教程】2.1、fiddler电脑抓包教程
[建站系列教程]2.1.fiddler电脑抓包教程 (全网最良心.实用教程) 简介工作原理主界面使用前配置最常使用功能 1 监控请求 2 模拟请求(重点) 3 Fiddler中保存会话 4 F ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：目录
本系列教程的示例代码下载(感谢银光中国提供资源分流): 第一部分源码:WPFGameTutorial_PartI(1-20节) 第二部分源码:WPFGameTutorial_PartII(21-2 ...
C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial)：(四)实现2D人物动画①
通过前面的学习,我们掌握了如何动态创建物体移动动画,那么接下来我将介绍WPF中如何将物体换成2D游戏角色,并通过使用前面所讲的DispatcherTimer计时器来实现2D人物角色的各种动作动画. 动 ...

iOSCoreAnimation动画系列教程（一）：CABasicAnimation【包会】

iOSCoreAnimation动画系列教程（一）：CABasicAnimation【包会】相关推荐

最新文章

热门文章