iOS 基础动画

iOS的动画效果一直都很棒很，给人的感觉就是很炫酷很流畅，起到增强用户体验的作用。在APP开发中实现动画效果有很多种方式，对于简单的应用场景，我们可以使用UIKit提供的动画来实现。

UIView动画

UIView动画实质上是对CoreAnimation的封装，iOS4.0以后，增加了Block动画块，提供更简洁的方式来实现动画。

共有六个常见的Block动画方法：

  • 1、最简单的Block动画，包含时间和动画[UIView animateWithDuration:<#(NSTimeInterval)#> animations:<#^(void)animations#>];

  • 2、带有动画完成回调的Block动画 [UIView animateWithDuration:<#(NSTimeInterval)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

  • 3、可设置延迟时间和过渡效果的Block动画 ``[UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

  • 4、Spring动画，iOS7.0后新增Spring动画（iOS系统动画大部分采用SpringAnimation，适用于所有可被添加动画效果的属性）[UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> usingSpringWithDamping:<#(CGFloat)#> initialSpringVelocity:<#(CGFloat)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

  • 5、Keyframes动画，iOS7.0后新增关键帧动画，支持属性关键帧，不支持路径关键帧 [UIView animateKeyframesWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> options:<#(UIViewKeyframeAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

  • 6、转场动画

    • 从旧视图转到新视图的动画效果，在该动画过程中，fromView会从父视图中移除，并讲toView添加到父视图中，注意转场动画的作用对象是父视图（过渡效果体现在父视图上）[UIView transitionFromView:<#(nonnull UIView *)#> toView:<#(nonnull UIView *)#> duration:<#(NSTimeInterval)#> options:<#(UIViewAnimationOptions)#> completion:<#^(BOOL finished)completion#>]

  • 单个视图的过渡效果 [UIView transitionWithView:<#(nonnull UIView *)#> duration:<#(NSTimeInterval)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

UIView动画可以设置的动画属性有
  • 1、大小变化（frame）
  • 2、拉伸变化（bounds）
  • 3、中心位置变化（center）
  • 4、旋转（transform）
  • 5、透明度（aipha）
  • 6、背景色（backgroundColor）

transform属性作用:给我们的控件做一些形变,(平移,缩放,旋转)
移动

// 平移
//每次移动都是相对于上次位置
 _redView.transform = CGAffineTransformTranslate(_redView.transform, 100, 0);
//每次移动都是相对于最开始的位置
 _redView.transform = CGAffineTransformMakeTranslation(200, 0);

缩放

// sx:宽度缩放的比例 sy:高度缩放的比例
//每次缩放都是相对于最初的大小
_redView.transform = CGAffineTransformMakeScale(0.5, 0.5);
//每次缩放都是相对于上次的大小
_redView.transform = CGAffineTransformScale(_redView.transform, 0.5, 0.5);

旋转

// 每次旋转都是相对于最初的角度
_redView.transform = CGAffineTransformMakeRotation(M_PI_4);
//每次旋转都是相对于现在的角度
_redView.transform = CGAffineTransformRotate(_redView.transform, M_PI_4);

实战说明

1、最简洁的Block动画：包含时间和动画

代码

[UIView animateWithDuration:3 animations:^{
        //执行动画
        _MyView.transform = CGAffineTransformScale(_MyView.transform, 0.5, 0.5);//缩放
        _MyView.transform = CGAffineTransformRotate(_MyView.transform, M_PI_4);//旋转
        _MyView.transform = CGAffineTransformTranslate(_MyView.transform, 200, 100);//平移
    }];

效果图

animation1.gif
2、可设置延迟时间和过渡效果的Block动画

代码

[UIView animateWithDuration:3 delay:1 options:UIViewAnimationOptionTransitionCurlDown animations:^{
        //执行动画
        _MyView.transform = CGAffineTransformScale(_MyView.transform, 0.5, 0.5);//缩放
        _MyView.transform = CGAffineTransformRotate(_MyView.transform, M_PI_4);//旋转
        _MyView.transform = CGAffineTransformTranslate(_MyView.transform, 200, 100);//平移
        
    } completion:^(BOOL finished) {
        NSLog(@"动画完成的回调");
    }];

UIViewAnimationOptions的枚举值如下，可组合使用

UIViewAnimationOptionLayoutSubviews//进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction//进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState//从当前状态开始动画
UIViewAnimationOptionRepeat//无限重复执行动画
UIViewAnimationOptionAutoreverse//执行动画回路
UIViewAnimationOptionOverrideInheritedDuration//忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedCurve//忽略嵌套动画的曲线设置
UIViewAnimationOptionAllowAnimatedContent//转场：进行动画时重绘视图
UIViewAnimationOptionShowHideTransitionViews//转场：移除（添加和移除图层的）动画效果
UIViewAnimationOptionOverrideInheritedOptions//不继承父动画设置
UIViewAnimationOptionCurveEaseInOut//时间曲线，慢进慢出（默认值）
UIViewAnimationOptionCurveEaseIn//时间曲线，慢进
UIViewAnimationOptionCurveEaseOut//时间曲线，慢出
UIViewAnimationOptionCurveLinear//时间曲线，匀速
UIViewAnimationOptionTransitionNone//转场，不使用动画
UIViewAnimationOptionTransitionFlipFromLeft//转场，从左向右旋转翻页
UIViewAnimationOptionTransitionFlipFromRight//转场，从右向左旋转翻页
UIViewAnimationOptionTransitionCurlUp//转场，下往上卷曲翻页
UIViewAnimationOptionTransitionCurlDown//转场，从上往下卷曲翻页
UIViewAnimationOptionTransitionCrossDissolve//转场，交叉消失和出现
UIViewAnimationOptionTransitionFlipFromTop//转场，从上向下旋转翻页
UIViewAnimationOptionTransitionFlipFromBottom//转场，从下向上旋转翻页

3、Spring动画

usingSpringWithDamping:震动效果，范围0~1，数值越小震动效果越明显
initialSpringVelocity:初始速度，数值越大初始速度越快

 [UIView animateWithDuration:3 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:100 options:UIViewAnimationOptionRepeat animations:^{
        //执行动画
        _MyView.transform = CGAffineTransformScale(_MyView.transform, 0.5, 0.5);//缩放
        _MyView.transform = CGAffineTransformRotate(_MyView.transform, M_PI_4);//旋转
        _MyView.transform = CGAffineTransformTranslate(_MyView.transform, 200, 100);//平移

    } completion:^(BOOL finished) {
        
    }];

效果图

animation2.gif
4、Keyframes动画

iOS7.0后新增关键帧动画，支持属性关键帧，不支持路径关键帧
options:动画的过渡效果

[UIView animateKeyframesWithDuration:0.5 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubicPaced animations:^{
        _MyView.backgroundColor = [UIColor blueColor];
    } completion:nil];
    
    [UIView animateKeyframesWithDuration:1 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubicPaced animations:^{
        _MyView.backgroundColor = [UIColor grayColor];
    } completion:nil];
    
    [UIView animateKeyframesWithDuration:1.5 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubicPaced animations:^{
        _MyView.backgroundColor = [UIColor greenColor];
    } completion:nil];
    
    [UIView animateKeyframesWithDuration:2 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubicPaced animations:^{
        _MyView.backgroundColor = [UIColor redColor];
    } completion:nil];

UIViewKeyframeAnimationOptions的枚举值如下，可组合使用：

UIViewAnimationOptionLayoutSubviews//进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction//进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState//从当前状态开始动画
UIViewAnimationOptionRepeat//无限重复执行动画
UIViewAnimationOptionAutoreverse//执行动画回路
UIViewAnimationOptionOverrideInheritedDuration//忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedOptions//不继承父动画设置
UIViewKeyframeAnimationOptionCalculationModeLinear//运算模式:连续
UIViewKeyframeAnimationOptionCalculationModeDiscrete//运算模式:离散
UIViewKeyframeAnimationOptionCalculationModePaced//运算模式:均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic//运算模式:平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced//运算模式:平滑均匀

效果图

animation3.gif
5、转场动画
单个视图的过渡效果

代码

[UIView transitionWithView:_MyView duration:1 options:UIViewAnimationOptionOverrideInheritedCurve animations:^{
        _MyView.backgroundColor = [UIColor greenColor];
    } completion:nil];

效果图

animation4.gif
从旧视图转到新视图的动画效果
[UIView transitionFromView:_MyView toView:_view duration:1 options:UIViewAnimationOptionTransitionFlipFromTop completion:nil];

CAAnimation核心动画

在iOS的不同图形层次中都可以写动画代码。越上层，封装程度越高，动画实现越简洁越简单，但是自由度越低；反之亦然。
如果想要做出更炫的动画，就必须要了解CAAnimation核心动画了。

Core Animation结构
1053533-6eae72f7fd9bd271.png
屏幕快照 2017-04-20 下午9.56.37.png

基础动画（CABasicAnimation）

基础动画（CABasicAnimation），通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation

开始之前我们需要先了解一个概念：CALayer

CALayer是个与UIView很类似的概念，同样有backgroundColor、frame等相似的属性，我们可以将UIView看做一种特殊的CALayer。但实际上UIView是对CALayer封装，在CALayer的基础上再添加交互功能。UIView的显示必须依赖于CALayer。
我们同样可以跟新建view一样新建一个layer，然后添加到某个已有的layer上，同样可以对layer调整大小、位置、透明度等。
一般来说，layer可以有两种用途：一是对view相关属性的设置，包括圆角、阴影、边框等参数，更详细的参数请点击这里；二是实现对view的动画操控。因此对一个view进行动画，本质上是对该view的.layer进行动画操纵。

注意点1:KeyPath中key值的设置

实例化方法

 //围绕y轴旋转
CABasicAnimation *transformAnima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

使用方法animationWithKeyPath:对CABasicAnimation进行实例化，并指定Layer的属性作为关键路径进行注册。
keyPath决定了基础动画的类型，该值不能随便取，一旦取错就达不到想要的效果。要改变位置就取position，要改变透明度就取opacity，要等比例缩放就取transform.scale...
一些常用的animationWithKeyPath值的总结

3D62A8E2-94E2-4FC3-AE05-A71296F4B324.png
注意点2:fillMode属性的理解

该属性定义了你的动画在开始和结束时的动作。默认值是 kCAFillModeRemoved
fillMode的作用就是决定当前对象过了非active时间段的行为. 非active时间段是指动画开始之前以及动画结束之后。如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用.

kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
kCAFillModeBackwards这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态。因为有可能出现fromValue不是目前layer的初始状态的情况，如果fromValue就是layer当前的状态，则这个参数就没太大意义。
kCAFillModeBoth理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.

注意点3

[self.view.layer addAnimation:positionAnima forKey:@"AnimationMoveY"];我们可以根据这个Key找到这个layer

注意点4:一些常用的属性
7E7672C6-9B0E-4743-9533-C3B506329F1D.png
我们做一个心跳的效果

代码

//初始化CALayer
    CALayer *layer = [[CALayer alloc]init];
    layer.backgroundColor = [UIColor redColor].CGColor;
    layer.frame = CGRectMake(100, 100, 100, 100);
    layer.cornerRadius = 10;
    [self.view.layer addSublayer:layer];
    //配置CABasicAnimation
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    basicAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    basicAnimation.toValue = [NSNumber numberWithFloat:1.5];
    //当动画执行到toValue指定的状态时是从toValue的状态逆回去，还是直接跳到fromValue的状态再执行一遍
    basicAnimation.autoreverses = YES;
    basicAnimation.removedOnCompletion = NO;
    basicAnimation.duration = 0.5;
    basicAnimation.repeatCount = MAXFLOAT;
    //把动画内容添加到layer上
    [layer addAnimation:basicAnimation forKey:@"basicAnimation"];
basicAnimation.gif

关键帧动画（CAKeyFrameAnimation）

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没有设置的时候,各个关键帧的时间是平分的

value方式代码

 //创建动画对象
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    //设置value
    NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
    NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];
    NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
    NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];
    NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 300)];
    NSValue *value6=[NSValue valueWithCGPoint:CGPointMake(200, 400)];
    
    
    animation.values=@[value1,value2,value3,value4,value5,value6];
    
    //重复次数 默认为1
    animation.repeatCount=MAXFLOAT;
    //设置是否原路返回默认为不
    animation.autoreverses = YES;
    //设置移动速度，越小越快
    animation.duration = 4.0f;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    
    //给这个view加上动画效果
    [_keyFrameView.layer addAnimation:animation forKey:nil];
KeyFrameValue.gif

path方法代码

CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(100, 100)];
    [path addLineToPoint:CGPointMake(150, 150)];
    [path addLineToPoint:CGPointMake(100, 200)];
    [path addLineToPoint:CGPointMake(50, 150)];

    anima.path = path.CGPath;
    anima.duration = 2.0f;
    anima.repeatCount= MAXFLOAT;
    anima.autoreverses = NO;
    anima.removedOnCompletion = NO;
    anima.fillMode = kCAFillModeForwards;
    
    
    [_keyFrameView.layer addAnimation:anima forKey:@"pathAnimation"];
KeyFramePath.gif

动画组动画（CAAnimationGroup）

动画组(CAAnimationGroup)是核心动画中又一个比较重要的知识点。动画组顾名思义就是一组动画，它可以将多个动画对象保存起来，然后再将其添加到layer上，让组中所有的动画对象同时并发执行。

 /****************** 创建平移动画 ******************/
    CABasicAnimation *basicAnim = [CABasicAnimation animation];
    // 设置动画属性
    basicAnim.keyPath = @"position.y";
    basicAnim.toValue = @350;
    
    /****************** 创建缩放动画 ******************/
    CABasicAnimation *scaleAnim = [CABasicAnimation animation];
    // 设置动画属性
    scaleAnim.keyPath = @"transform.scale";
    scaleAnim.toValue = @0.5;
    
   ;
    
    /****************** 创建动画组 ******************/
    CAAnimationGroup *groupAnim = [CAAnimationGroup animation];
    // 将动画对象都添加到CAAnimationGroup对象中
    groupAnim.animations = @[basicAnim, scaleAnim];
    
    /****************** 通过动画组对象统一设置动画属性和状态 ******************/
    // 设置动画的执行时长
    groupAnim.duration = 0.5;
    // 动画完成时保持在最新的状态
    groupAnim.removedOnCompletion = NO;
    groupAnim.fillMode = kCAFillModeForwards;
    
    
    groupAnim.duration = 2.0f;
    groupAnim.repeatCount= MAXFLOAT;
    groupAnim.autoreverses = YES;
    groupAnim.removedOnCompletion = NO;
    groupAnim.fillMode = kCAFillModeForwards;

    /****************** 将动画组对象添加到redView的layer上 ******************/
    [_animationGroupView.layer addAnimation:groupAnim forKey:nil];
animationGroup.gif

转场动画（CATranstion）

CATransition是CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点
UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果
动画属性:
type：动画过渡类型
subtype：动画过渡方向
startProgress：动画起点(在整体动画的百分比)
endProgress：动画终点(在整体动画的百分比)

转场动画过渡效果
屏幕快照 2016-05-25 20.41.32.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,527评论 5赞 470
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,314评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,535评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,006评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,961评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,220评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,664评论 3赞 392
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,351评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,481评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,397评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,443评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,123评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,713评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,801评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,010评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,494评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,075评论 2赞 341

推荐阅读更多精彩内容