一、简介

IOS 动画主要是指Core Animation框架。官方使用文档地址为:Core Animation Guide
Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架。Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作。你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果。Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加速图形渲染的速度。这种自动化的图形加速技术让动画拥有更高的帧率并且显示效果更加平滑,不会加重CPU的负担而影响程序的运行速度。

二、Core Animation类图以及常用字段

Core Animation类的继承关系图 

常用属性 
duration : 动画的持续时间 
beginTime : 动画的开始时间 
repeatCount : 动画的重复次数 
autoreverses : 执行的动画按照原动画返回执行 
timingFunction : 控制动画的显示节奏系统提供五种值选择,分别是:

  • kCAMediaTimingFunctionLinear 线性动画
  • kCAMediaTimingFunctionEaseIn 先慢后快(慢进快出)
  • kCAMediaTimingFunctionEaseOut 先块后慢(快进慢出)
  • kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢
  • kCAMediaTimingFunctionDefault 默认,也属于中间比较快

delegate : 动画代理。能够检测动画的执行和结束。

@interface NSObject (CAAnimationDelegate)
- (void)animationDidStart:(CAAnimation *)anim;
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
@end

path:关键帧动画中的执行路径 
type : 过渡动画的动画类型,系统提供了四种过渡动画。 
- kCATransitionFade 渐变效果 
- kCATransitionMoveIn 进入覆盖效果 
- kCATransitionPush 推出效果 
- kCATransitionReveal 揭露离开效果 
subtype : 过渡动画的动画方向 
- kCATransitionFromRight 从右侧进入 
- kCATransitionFromLeft 从左侧进入 
- kCATransitionFromTop 从顶部进入 
- kCATransitionFromBottom 从底部进入

三、IOS动画的调用方式

第一种:UIView 代码块调用

   _demoView.frame = CGRectMake(, SCREEN_HEIGHT/-, , );
[UIView animateWithDuration:1.0f animations:^{
_demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/-, , );
} completion:^(BOOL finished) {
_demoView.frame = CGRectMake(SCREEN_WIDTH/-, SCREEN_HEIGHT/-, , );
}];

第二种:UIView [begin commit]模式

_demoView.frame = CGRectMake(, SCREEN_HEIGHT/-, , );
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0f];
_demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/-, , );
[UIView commitAnimations];

第三种:使用Core Animation中的类

CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(, SCREEN_HEIGHT/-)];
anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/-)];
anima.duration = 1.0f;
[_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

四、IOS动画的使用

4.1:基础动画(CABaseAnimation)

重要属性 
fromValue : keyPath对应的初始值 
toValue : keyPath对应的结束值

基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操作。比如:位移、透明度、缩放、旋转、背景色等等。 
效果演示: 

位移动画代码演示:

 //使用CABasicAnimation创建基础动画
CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(, SCREEN_HEIGHT/-)];
anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/-)];
anima.duration = 1.0f;
//anima.fillMode = kCAFillModeForwards;
//anima.removedOnCompletion = NO;
[_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

注意点 
如果fillMode=kCAFillModeForwards和removedOnComletion=NO,那么在动画执行完毕后,图层会保持显示动画执行后的状态。但在实质上,图层的属性值还是动画执行前的初始值,并没有真正被改变。

4.2:关键帧动画(CAKeyframeAnimation)

CAKeyframeAnimation和CABaseAnimation都属于CAPropertyAnimatin的子类。CABaseAnimation只能从一个数值(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没有设置的时候,各个关键帧的时间是平分的。

效果演示: 
 
圆形路径动画代码演示:

 CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH/-, SCREEN_HEIGHT/-, , )];
anima.path = path.CGPath;
anima.duration = 2.0f;
[_demoView.layer addAnimation:anima forKey:@"pathAnimation"];

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

4.3:组动画(CAAnimationGroup)

CAAnimation的子类,可以保存一组动画对象,将CAAnimationGroup对象加入层后,组中所有动画对象可以同时并发运行。 
重要属性 
animations : 用来保存一组动画对象的NSArray 
效果演示: 

组动画代码演示:

 CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(, SCREEN_HEIGHT/-)];
NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/, SCREEN_HEIGHT/-)];
NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/, SCREEN_HEIGHT/+)];
NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*/, SCREEN_HEIGHT/+)];
NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*/, SCREEN_HEIGHT/-)];
NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/-)];
anima1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil]; //缩放动画
CABasicAnimation *anima2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
anima2.fromValue = [NSNumber numberWithFloat:0.8f];
anima2.toValue = [NSNumber numberWithFloat:2.0f]; //旋转动画
CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
anima3.toValue = [NSNumber numberWithFloat:M_PI*]; //组动画
CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
groupAnimation.animations = [NSArray arrayWithObjects:anima1,anima2,anima3, nil];
groupAnimation.duration = 4.0f; [_demoView.layer addAnimation:groupAnimation forKey:@"groupAnimation"];

4.4:过渡动画(CATransition)

CAAnimation的子类,用于做过渡动画或者转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。 
重要属性 
type:动画过渡类型

Apple 官方的SDK其实只提供了四种过渡效果。  
- kCATransitionFade 渐变效果 
- kCATransitionMoveIn 进入覆盖效果 
- kCATransitionPush 推出效果 
- kCATransitionReveal 揭露离开效果 
私有API提供了其他很多非常炫的过渡动画,比如@”cube”、@”suckEffect”、@”oglFlip”、 @”rippleEffect”、@”pageCurl”、@”pageUnCurl”、@”cameraIrisHollowOpen”、@”cameraIrisHollowClose”等。 
注意点 
私有api,不建议开发者们使用。因为苹果公司不提供维护,并且有可能造成你的app审核不通过。

subtype:动画过渡方向

  • kCATransitionFromRight 从右侧进入
  • kCATransitionFromLeft 从左侧进入
  • kCATransitionFromTop 从顶部进入
  • kCATransitionFromBottom 从底部进入

startProgress:动画起点(在整体动画的百分比) 
endProgress:动画终点(在整体动画的百分比)

效果演示: 

4.5:综合案例

4.5.1 : 仿Path菜单效果

效果演示: 

动画解析: 
1、点击红色按钮,红色按钮旋转。(旋转动画) 
2、黑色小按钮依次弹出,并且带有旋转效果。(位移动画、旋转动画、组动画) 
3、点击黑色小按钮,其他按钮消失,被点击的黑色按钮变大变淡消失。(缩放动画、alpha动画、组动画) 
博主的话:代码过多,这里不做演示。文章最后提供代码下载地址。

4.5.2: 仿钉钉菜单效果

效果演示: 
 
看上去挺炫的,其实实现很简单,就是位移动画+缩放动画。

4.5.3: 点赞烟花效果动画

效果演示: 

这里其实只有按钮变大效果使用的缩放动画。烟花效果 使用的是一种比较特殊的动画–粒子动画。 
一个粒子系统一般有两部分组成: 
1、CAEmitterCell:可以看作是单个粒子的原型(例如,一个单一的粉扑在一团烟雾)。当散发出一个粒子,UIKit根据这个发射粒子和定义的基础上创建一个随机粒子。此原型包括一些属性来控制粒子的图片,颜色,方向,运动,缩放比例和生命周期。 
2、CAEmitterLayer:主要控制发射源的位置、尺寸、发射模式、发射源的形状等等。 
以上两个类的属性还是比较多的,这里就不细讲了。大家可以google一下,详细的了解吧。

五、总结

任何复杂的动画其实都是由一个个简单的动画组装而成的,只要我们善于分解和组装,我们就能实现出满意的效果。动画其实也不是那么难。

六、下载地址

github下载地址:https://github.com/yixiangboy/IOSAnimationDemo

iOS开发-动画总结的更多相关文章

  1. iOS 开发--动画

    在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是非常重要的.我们总是追求更为酷炫的实现,如果足够仔细 ...

  2. iOS开发--动画篇之layout动画深入

    "不得不说,单单是文章的标题,可能不足以说明本文的内容.因此,在继续讲述约束动画之前,我先放上本文要实现的动画效果." 编辑:Bison投稿:Sindri的小巢 约束动画并不是非常 ...

  3. iOS开发——动画OC篇&知识点总结

    图层与动画知识点总结 1.Core Animation 非娱乐类的软件都会用到的动画,操作简单. 2.Quartz 2D绘图 是一个2D绘图引擎. (1) 绘图Context是一个绘图的目标对象,定义 ...

  4. iOS开发——动画篇Swift篇&动画效果的实现

    Swift - 动画效果的实现   在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimation ...

  5. iOS开发--动画(Animation)总结

    UIView的,翻转.旋转,偏移,翻页,缩放,取反的动画效果   翻转的动画 //开始动画 [UIView beginAnimations:@"doflip" context:ni ...

  6. iOS开发——动画总结OC篇&所有常用动画总结

    所有常用动画总结 先来装下B,看不懂没关系,其实我也看不懂-

  7. iOS开发——动画编程Swift篇&(五)CAKeyframeAnimation

    CAKeyframeAnimation //CAKeyframeAnimation-关键针动画 @IBAction func cakFly() { let animation = CAKeyframe ...

  8. iOS开发——动画编程Swift篇&(四)CABasicAnimation动画

    CABasicAnimation动画 //CABasicAnimation-不透明度 @IBAction func cabOpacity() { let animation = CABasicAnim ...

  9. iOS开发——动画编程Swift篇&(三)CATransition动画

    CATransition动画 // MARK: - CATransition动画 // /* 动画样式 */ // let kCATransitionFade: NSString! //翻页 // l ...

  10. iOS开发——动画编程Swift篇&(二)UIView转场动画

    UIView转场动画 // MARK: - UIView动画-过度动画 var redView:UIView? var blueView:UIView? // enum UIViewAnimation ...

随机推荐

  1. Python学习笔记(快捷键)

    增加多行缩进: Ctrl + ]  (右中括号) 减少多行缩进:Ctrl + [  (左中括号) 添加多行注释:Alt + 3 取消多行注释:Alt + 4 在Python Shell里重复上一条命令 ...

  2. jar包冲突问题

    这两天在启动一个新项目的时候,项目一直启动不了,报StackOverFlow; java.util.concurrent.ExecutionException: java.lang.StackOver ...

  3. Ant Design中的Form组件

    1. 使用Form.create()包裹过的组件可以获取到this.props.form属性 Form.create()(Comp) 2. getFieldDecorator() // 在表单中的使用 ...

  4. JavaScript进阶 - 第3章 一起组团(数组)

    第3章 一起组团(数组) 3-1 一起组团(什么是数组) 我们知道变量用来存储数据,一个变量只能存储一个内容.假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果 ...

  5. BZOJ 1123 && Luogu P3469 [POI2008]BLO-Blockade 割点+乘法原理

    想了半天式子...最后在邓大师的帮助下想出此题....QWQ我还是太菜了 对于一个非割点,ans+=2*(n-1); 对于一个割点,ans+= #include<cstdio> #incl ...

  6. BZOJ-3555:企鹅QQ(字符串哈希)

    PenguinQQ是中国最大.最具影响力的SNS(Social Networking Services)网站,以实名制为基础,为用户提供日志.群.即时通讯.相册.集市等丰富强大的互联网功能体验,满足用 ...

  7. 040 Combination Sum II 组合总和 II

    给定候选号码数组 (C) 和目标总和数 (T),找出 C 中候选号码总和为 T 的所有唯一组合.C 中的每个数字只能在组合中使用一次.注意:    所有数字(包括目标)都是正整数.    解决方案集不 ...

  8. Windows2

    windows如何打开dvd, iso镜像文件 .iso后缀的文件是一个压缩文件, 使用Winrar等压缩工具即可打开 windows7如何下载Visual Studio 2010(2010是流行的开 ...

  9. IO流----File,递归,字节流,字符流

    要把数据持久化存储,就需要把内存中的数据存储到内存以外的其他持久化设备(硬盘.光盘.U盘等)上. 当需要把内存中的数据存储到持久化设备上这个动作称为输出(写)Output操作. 当把持久设备上的数据读 ...

  10. SQL SERVER 2014 缺少Business Intelligence 解决办法

    SQL SERVER 2014安装完所有的数据库工具后,缺少开发工具 Business Intelligence   之解决办法. https://msdn.microsoft.com/en-us/l ...