iOS 动画

作者: iOS白水 | 来源:发表于2018-02-22 21:13 被阅读0次

    一、基础知识


    image.png image.png

    二、UIView动画实现方式

    //动画持续时间
    [UIView setAnimationDuration:(NSTimeInterval)];
    //动画的代理对象
    [UIView setAnimationDelegate:(nullable id)];
    //设置动画将开始时代理对象执行的SEL
    [UIView setAnimationWillStartSelector:(nullable SEL)];
    //设置动画延迟执行的时间
    [UIView setAnimationDelay:(NSTimeInterval)];
    //设置动画的重复次数
    [UIView setAnimationRepeatCount:(float)];
    //设置动画的曲线
    /*
    UIViewAnimationCurve的枚举值:
    UIViewAnimationCurveEaseInOut, // 慢进慢出(默认值)
    UIViewAnimationCurveEaseIn, // 慢进
    UIViewAnimationCurveEaseOut, // 慢出
    UIViewAnimationCurveLinear // 匀速
    /
    [UIView setAnimationCurve:(UIViewAnimationCurve)];
    //设置是否从当前状态开始播放动画
    /
    假设上一个动画正在播放,且尚未播放完毕,我们将要进行一个新的动画:
    当为YES时:动画将从上一个动画所在的状态开始播放
    当为NO时:动画将从上一个动画所指定的最终状态开始播放(此时上一个动画马上结束)/
    [UIView setAnimationBeginsFromCurrentState:YES];
    //设置动画是否继续执行相反的动画
    [UIView setAnimationRepeatAutoreverses:(BOOL)];
    //是否禁用动画效果(对象属性依然会被改变,只是没有动画效果)
    [UIView setAnimationsEnabled:(BOOL)];
    //设置视图的过渡效果
    /
    第一个参数:UIViewAnimationTransition的枚举值如下
    UIViewAnimationTransitionNone, //不使用动画
    UIViewAnimationTransitionFlipFromLeft, //从左向右旋转翻页
    UIViewAnimationTransitionFlipFromRight, //从右向左旋转翻页
    UIViewAnimationTransitionCurlUp, //从下往上卷曲翻页
    UIViewAnimationTransitionCurlDown, //从上往下卷曲翻页
    第二个参数:需要过渡效果的View
    第三个参数:是否使用视图缓存,YES:视图在开始和结束时渲染一次;NO:视图在每一帧都渲染*/
    [UIView setAnimationTransition:(UIViewAnimationTransition) forView:(nonnull UIView *) cache:(BOOL)];

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

    三、CAAnimation
    CAAnimation——所有动画对象的父类
    是所有动画对象的父类,负责控制动画的持续时间和速度,是个抽象类,不能直接使用,应该使用它具体的子类
    属性说明:(带*号代表来自CAMediaTiming协议的属性)

    *duration:动画的持续时间
    *repeatCount:重复次数,无限循环可以设置HUGE_VALF或者MAXFLOAT
    *repeatDuration:重复时间
    removedOnCompletion:默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode为kCAFillModeForwards
    *fillMode:决定当前对象在非active时间段的行为。比如动画开始之前或者动画结束之后
    *beginTime:可以用来设置动画延迟执行时间,若想延迟2s,就设置为CACurrentMediaTime()+2,CACurrentMediaTime()为图层的当前时间
    timingFunction:速度控制函数,控制动画运行的节奏
    delegate:动画代理
    CAAnimation——动画填充模式
    fillMode属性值(要想fillMode有效,最好设置removedOnCompletion = NO)
    kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
    kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
    kCAFillModeBackwards 在动画开始前,只需要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始。
    kCAFillModeBoth 这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态
    CAAnimation——速度控制函数
    速度控制函数(CAMediaTimingFunction)

    kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉
    kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开
    kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地
    kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。
    设置动画的执行节奏
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];

    四、高级CAAnimation
    CAAnimation——动画代理方法
    CAAnimation在分类中定义了代理方法,是给NSObject添加的分类,所以任何对象,成为CAAnimation的代理都可以

    @interface NSObject (CAAnimationDelegate)

    /* Called when the animation begins its active duration. */
    动画开始的时候调用

    • (void)animationDidStart:(CAAnimation *)anim;
      动画停止的时候调用
    • (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

    @end
    CALayer上动画的暂停和恢复

    pragma mark 暂停CALayer的动画

    -(void)pauseLayer:(CALayer*)layer
    {
    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];

    让CALayer的时间停止走动
    layer.speed = 0.0;
    让CALayer的时间停留在pausedTime这个时刻
    layer.timeOffset = pausedTime;
    

    }
    CALayer上动画的恢复

    pragma mark 恢复CALayer的动画

    -(void)resumeLayer:(CALayer*)layer
    {
    CFTimeInterval pausedTime = layer.timeOffset;
    1. 让CALayer的时间继续行走
    layer.speed = 1.0;
    2. 取消上次记录的停留时刻
    layer.timeOffset = 0.0;
    3. 取消上次设置的时间
    layer.beginTime = 0.0;
    4. 计算暂停的时间(这里也可以用CACurrentMediaTime()-pausedTime)
    CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    5. 设置相对于父坐标系的开始时间(往后退timeSincePause)
    layer.beginTime = timeSincePause;
    }
    CAPropertyAnimation
    是CAAnimation的子类,也是个抽象类,要想创建动画对象,应该使用它的两个子类:
    CABasicAnimation
    CAKeyframeAnimation

    属性说明:
    keyPath:通过指定CALayer的一个属性名称为keyPath(NSString类型),并且对CALayer的这个属性的值进行修改,达到相应的动画效果。比如,指定@“position”为keyPath,就修改CALayer的position属性的值,以达到平移的动画效果

    CABasicAnimation——基本动画
    基本动画,是CAPropertyAnimation的子类

    属性说明:
    keyPath:要改变的属性名称(传字符串)

    fromValue:keyPath相应属性的初始值

    toValue:keyPath相应属性的结束值

    动画过程说明:
    随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值从fromValue渐渐地变为toValue

    keyPath内容是CALayer的可动画Animatable属性

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

    //创建动画
    CABasicAnimation *anim = [CABasicAnimation animation];;
    //    设置动画对象
    keyPath决定了执行怎样的动画,调用layer的哪个属性来执行动画
          position:平移
    anim.keyPath = @"position";
    //    包装成对象
    anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];;
    anim.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 300)];
    anim.duration = 2.0;
    
    //    让图层保持动画执行完毕后的状态
    //    执行完毕以后不要删除动画
    anim.removedOnCompletion = NO;
    //    保持最新的状态
    anim.fillMode = kCAFillModeForwards;
    
    //    添加动画
    [self.layer addAnimation:anim forKey:nil];
    

    尽量不要设置removedOnCompletion = false ,因为配合CAAnimationDelegate会带来循环运用的问题,如果需要动画停留在最后的状态,可以直接设置View的center属性在动画结束的位置Point

    之所以会出现 循环引用 因为由于CAAnimation的delegate使用的strong类型:看一下简要的说明图:

    2240549-2364615aa8ce9bfd.png

    CAAnimationDelegate.png

    解决有时视图会闪动一下的问题,我们可以将layer的属性值设置为我们的动画最后要达到的值,然后再给我们的视图添加layer动画。

    position需要设备两个属性:

    1 // MARK: - 结束后不要闪回去
    2 anim.removedOnCompletion = NO;
    3 anim.fillMode = kCAFillModeForwards;
    设置之后,不会再闪回去,但其实控件的位置并未改变,还在原来的位置,只是“显示层”挪到了新位置。

    可以通过动画的代理方法来实现:

    // MARK: - 通过代理方法,修正按钮的位置!
    // 这个代理写在了NSObject的分类中,不需要尊守任何协议
    anim.delegate = self;
    
    • (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
      {
      NSLog(@"animationDidStop...");
      NSLog(@"frame-end-%@",NSStringFromCGRect(self.redView.frame));

      // 在核心动画结束后,将控件的真实位置挪过来!
      // self.redView.center = CGPointMake(100, 200);
      // [self.redView.layer removeAllAnimations];
      }

    五、CABasicAnimation
    1.动画属性


    1485148932685541.png image.png

    六、CAKeyframeAnimation——关键帧动画
    关键帧动画,也是CAPropertyAnimation的子类,与CABasicAnimation的区别是:
    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,各个关键帧的时间是平分的

    CABasicAnimation可看做是只有2个关键帧的CAKeyframeAnimation

    六、转场动画——CATransition

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

    [图片上传失败...(image-aabdf0-1519398635660)]

        CATransition *anim = [CATransition animation];
        转场类型
        anim.type = @"cube";
        动画执行时间
        anim.duration = 0.5;
        动画执行方向
        anim.subtype = kCATransitionFromLeft;
        添加到View的layer
        [self.redView.layer addAnimation:anim forKey];
    

    七、CAAnimationGroup——动画组

    动画组,是CAAnimation的子类,可以保存一组动画对象,将CAAnimationGroup对象加入层后,组中所有动画对象可以同时并发运行

    属性说明:
    animations:用来保存一组动画对象的NSArray
    默认情况下,一组动画对象是同时运行的,也可以通过设置动画对象的beginTime属性来更改动画的开始时间

    //AnimateGroup
    -(void)doAnimate_Group
    {
        
        CABasicAnimation * animate1=[CABasicAnimation  animation];
        animate1.keyPath =@"position.y";
    //    animate1.duration=3;
    //    animate1.repeatCount=1;
        animate1.fromValue=@100;
        animate1.toValue=@300;
    
    
        
        CABasicAnimation * animate2=[CABasicAnimation  animation];
        animate2.keyPath =@"transform.scale";
    //    animate2.duration=2;
    //    animate2.repeatCount=2;
        animate2.fromValue=@1;
        animate2.toValue=@2;
        
        
        CABasicAnimation * animate3=[CABasicAnimation  animation];
        animate3.keyPath =@"transform.rotation";
    //    animate3.duration=3;
    //    animate3.repeatCount=3;
        animate3.fromValue=0;
        animate3.toValue=@M_PI;
        
        CAAnimationGroup  *animateGroup =[CAAnimationGroup animation];
        animateGroup.animations=@[animate1,animate2,animate3];
        animateGroup.duration=2;
        animateGroup.repeatCount=1;
        
        animateGroup.removedOnCompletion = NO;
        animateGroup.fillMode = kCAFillModeForwards;
        
         [self.redView.layer addAnimation:animateGroup forKey:@"animation"];
        
    }
    

    八、UIView实现转场
    使用UIView动画函数实现转场动画——单视图

    //参数说明:
    duration:动画的持续时间
    view:需要进行转场动画的视图
    options:转场动画的类型
    animations:将改变视图属性的代码放在这个block中
    completion:动画结束后,会自动调用这个block

    • (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion;
      使用UIView动画函数实现转场动画——双视图

    参数说明:
    duration:动画的持续时间
    options:转场动画的类型
    animations:将改变视图属性的代码放在这个block中
    completion:动画结束后,会自动调用这个block

    • (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion;

    参考:
    https://www.jianshu.com/p/9fa025c42261
    http://www.cocoachina.com/ios/20170124/18617.html

    相关文章

      网友评论

        本文标题:iOS 动画

        本文链接:https://www.haomeiwen.com/subject/unuatftx.html