iOS开发－动画总结

一、简介

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(0, SCREEN_HEIGHT/2-50, 50, 50);
    [UIView animateWithDuration:1.0f animations:^{
        _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
    } completion:^(BOOL finished) {
        _demoView.frame = CGRectMake(SCREEN_WIDTH/2-25, SCREEN_HEIGHT/2-50, 50, 50);
    }];

第二种：UIView [begin commit]模式

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

第三种：使用Core Animation中的类

CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
    anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
    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(0, SCREEN_HEIGHT/2-75)];
    anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
    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/2-100, SCREEN_HEIGHT/2-100, 200, 200)];
    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(0, SCREEN_HEIGHT/2-50)];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)];
    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*4];

    //组动画
    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

时间： 2024-08-10 07:04:57

iOS开发－动画总结的相关文章

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

所有常用动画总结 先来装下B,看不懂没关系,其实我也看不懂-?? iOS provides several different frameworks for adding graphics and animations to your apps. UIKit is an Objective-C API that provides basic 2D drawing, image handling, and ways to animate user interface objects. Core G

iOS开发——动画编程的几种方法

动画编程的几种方法 IOS中的动画总结来说有五种:UIView<block>,CAAnimation<CABasicAnimation,CATransition,CAKeyframeAnimation>,NSTimer 这里我就总结了一下这五种方法,其实iOS开发中动画的编程都会在这里面变化,所以只要弄懂了这些动画编程就不难了. 一:UIView动画 一般方式 [UIView beginAnimations:@"ddd" context:nil];//设置动画[

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

"不得不说,单单是文章的标题,可能不足以说明本文的内容.因此,在继续讲述约束动画之前,我先放上本文要实现的动画效果." 编辑:Bison投稿:Sindri的小巢 约束动画并不是非常复杂的技巧,在你熟练使用约束之后,你总能创建些独具匠心的动画.在上一篇autolayout动画初体验中,我们根据监听列表视图的滚动偏移来不断改变约束值,从而制作出动画的效果.但上个动画的实现更像是我们制作了一帧帧连续的界面从而达成动画的效果 —— 这未免太过繁杂.而在本文我们将抛弃这种繁杂的方式,通过调用UI

iOS开发——动画OC篇&amp;知识点总结

图层与动画知识点总结 1.Core Animation 非娱乐类的软件都会用到的动画,操作简单. 2.Quartz 2D绘图 是一个2D绘图引擎. (1) 绘图Context是一个绘图的目标对象,定义了绘图的基本属性,如颜色.绘图范围.线宽及样式等. (2)通过UIView会创建Context,可以用类似如下的语句来得到当前的Context. CGContextRef currentContext = UIGraphicsGetCurrentContext(); (3)如果在对其进行修改前想要保

iOS开发——动画篇Swift篇&amp;动画效果的实现

Swift - 动画效果的实现 在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimations.这三个方法都是类方法. 一,使用animateWithDuration来实现动画 (1)此方法共有5个参数: duration:动画从开始到结束的持续时间,单位是秒 delay:动画开始前等待的时间 options:动画执行的选项.里面可以设置动画的效果.可以使用UIViewAnimationOpt

iOS开发——动画编程OC篇&amp;总结

动画总结 iOS 动画Animation详解, UIView动画(UIView属性动画,UIViewTransition动画,UIView Block动画),CALayer动画(CABasicAnima, CAKeyframeAnimation, CATransition, CAAnimationGroup) 1 iOS 动画Animation详解, UIView动画(UIView属性动画,UIViewTransition动画,UIView Block动画),CALayer动画(CABasicA

iOS开发——动画编程OC篇&amp;（六）UIView动画

UIView动画 一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持 执行动画所需要的工作由UIView类自动完成,但仍要在希望执行动画时通知视图,为此需要将改变属性的代码放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之间 常见方法解析: + (void)setAnimationDelegate:(id)d

iOS开发——动画编程OC篇&amp;（一）基本动画

基本动画 一.简单介绍 Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就可以实现非常强大的功能. Core Animation是跨平台的,可以用在Mac OS X和iOS平台. Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程.不阻塞主线程,可以理解为在执行动画的时候还能点击(按钮). 要注意的是,Core Animation是直接作用在CALayer上的,

iOS开发——动画编程OC篇&amp;（四）转场动画

转场 动画 一.转场动画简单介绍 CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果.iOS比Mac OS X的转场动画效果少一点 UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果 属性解析: type:动画过渡类型 subtype:动画过渡方向 startProgress:动画起点(在整体动画的百分比) endProgress:动画终点(在整体动画的百分比) 二.转场动画代码示例 1.界面搭建

iOS开发——动画编程Swift篇&amp;（三）CATransition动画

CATransition动画 1 // MARK: - CATransition动画 2 3 // /* 动画样式 */ 4 // let kCATransitionFade: NSString! //翻页 5 // let kCATransitionMoveIn: NSString! //弹出 6 // let kCATransitionPush: NSString! //推出 7 // let kCATransitionReveal: NSString! //移出 8 // 9 // /*