一、简介

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. uva11400 Lighting System Design

    题目大意: 有一个照明系统需要用到n种灯,每种灯的电压为V,电源费用K,每个灯泡费用为C,需要该灯的数量为L.注意到,电压相同的灯泡只需要共享一个对应的电源即可,还有电压低的灯泡可以被电压高的灯泡替代 ...

  2. 遍历问题 codevs

    1029 遍历问题 1029 遍历问题  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题目描述 Description 我们都很熟悉二叉树的前序.中序. ...

  3. 使用htmlparser爬虫技术爬取电影网页的全部下载链接

    昨天,我们利用webcollector爬虫技术爬取了网易云音乐17万多首歌曲,而且还包括付费的在内,如果时间允许的话,可以获取更多的音乐下来,当然,也有小伙伴留言说这样会降低国人的知识产权保护意识,诚 ...

  4. mysql错误之errorcode 1215问题

    1.此类问题出现时我们往往会迫不及待的去百度,但是问题偶尔也不是我们想的那样,比如我本次犯下的错误如下: 上图是我给表添加外键约束的时候的sql.下图是我建的表,问题出哪里了?原来是我的数据库根本没有 ...

  5. moment.js插件的简单上手使用

    开发过程中看长篇幅的技术文档是件多么影响多发效率的事情丫,哼哼,人家明明只是想用个简单的功能而已丫,下面文档很好的解决了这个问题,yeah~~~ 一.monent.js时间插件 1.Moment.js ...

  6. C# 数组之List<T>

    一.引言 List<T>是ArrayList的泛型等效类,底层数据结构也是数组. 相比Array而言,可以动态的拓展数组长度.增删数据 相比ArrayList而言,由于声明的时候就已经规定 ...

  7. ICPC-无限路之城(数学+思维)

    链接:https://ac.nowcoder.com/acm/contest/321/C 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他语言2621 ...

  8. Codecraft-17 and Codeforces Round #391 (Div. 1 + Div. 2, combined) A

    Bash wants to become a Pokemon master one day. Although he liked a lot of Pokemon, he has always bee ...

  9. Exception sending context destroyed event to listener instance of class

    五月 29, 2019 6:29:39 下午 org.apache.catalina.core.StandardContext listenerStop严重: Exception sending co ...

  10. App配置页面头部

    记录一下 App配置页面头部 例 上图红色框部分就是自己配置的头部 //我的客户 "/OACustomer/Index": { title: "我的客户", h ...