• iOS动画-从UIView到Core Animation


    首先,介绍一下UIView相关的动画。

    1. UIView普通动画:
    [UIView beginAnimations: context:];
     [UIView commitAnimations];

    动画属性设置:

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

    举2个例子:

     1     [UIView beginAnimations:@"xxx" context:nil];
     2     [UIView setAnimationDuration:5];
     3     [UIView setAnimationRepeatCount:MAXFLOAT];
     4     [UIView setAnimationDelegate:self];
     5     [UIView setAnimationDelay:3];
     6     [UIView setAnimationWillStartSelector:@selector(animationWillStart)];
     7     [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
     8     [UIView setAnimationRepeatAutoreverses:YES];
     9     
    10     self.iView.frame = CGRectMake(200, 400, 100, 100);
    11     
    12     [UIView commitAnimations];
     1     [UIView beginAnimations:@"xxx" context:nil];
     2     [UIView setAnimationDuration:2];
     3     [UIView setAnimationRepeatCount:MAXFLOAT];
     4     [UIView setAnimationDelegate:self];
     5     //[UIView setAnimationDelay:3];
     6     [UIView setAnimationWillStartSelector:@selector(animationWillStart)];
     7     [UIView setAnimationCurve:UIViewAnimationCurveLinear];
     8     //[UIView setAnimationRepeatAutoreverses:YES];
     9     
    10     [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.iView cache:YES];
    11     
    12     [UIView commitAnimations];

          2.   UIView Block动画

    1 [UIView animateWithDuration:(NSTimeInterval)//动画时间
    2     animations:^{
    3         //执行的动画
    4     }];
    1 [UIView animateWithDuration:(NSTimeInterval)//动画时间
    2                      animations:^{
    3         //执行的动画
    4     } completion:^(BOOL finished) {
    5         //动画结束的回调
    6     }];
    1 [UIView animateWithDuration:(NSTimeInterval)//动画时间
    2                           delay:(NSTimeInterval)//动画延迟时间
    3                         options:(UIViewAnimationOptions)//动画过渡效果
    4                      animations:^{
    5         //执行动画
    6     } completion:^(BOOL finished) {
    7         //动画结束回调
    8     }]
    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动画
    ios7.0以后新增了Spring动画(IOS系统动画大部分采用Spring Animation, 适用所有可被添加动画效果的属性)

    [UIView animateWithDuration:(NSTimeInterval)//动画持续时间
                       delay:(NSTimeInterval)//动画延迟执行的时间
      usingSpringWithDamping:(CGFloat)//震动效果,范围0~1,数值越小震动效果越明显
       initialSpringVelocity:(CGFloat)//初始速度,数值越大初始速度越快
                     options:(UIViewAnimationOptions)//动画的过渡效果
                  animations:^{
                     //执行的动画
     }
                      completion:^(BOOL finished) {
                     //动画执行提交后的操作
     }];
    [UIView animateWithDuration:3 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:5 options:UIViewAnimationOptionRepeat animations:^{
            self.iView.frame = CGRectMake(200, 400, 100, 100);
            self.iView.transform = CGAffineTransformRotate(self.iView.transform, M_PI);
        } completion:^(BOOL finished) {
            
        }];

    Keyframes动画:

    IOS7.0后新增了关键帧动画,支持属性关键帧,不支持路径关键帧
     [UIView animateKeyframesWithDuration:(NSTimeInterval)//动画持续时间
                                delay:(NSTimeInterval)//动画延迟执行的时间
                              options:(UIViewKeyframeAnimationOptions)//动画的过渡效果
                           animations:^{
                         //执行的关键帧动画
     }
                           completion:^(BOOL finished) {
                         //动画执行提交后的操作
     }];

    Core Animation

    CABasicAnimation:

    //  常用属性:
        
         duration:动画的持续时间
         repeatCount:重复次数,无限循环可以设置HUGE_VALF或者MAXFLOAT
         repeatDuration:重复时间
         speed:动画速率,决定动画时间的倍率。当speed为2时,动画时间为设置的duration的1/2。
         timeOffset:动画时间偏移量。比如设置动画时长为3秒,当设置timeOffset为1.5时,当前动画会从中间位置开始,并在到达指定位置时,走完之前跳过的前半段动画。
         removedOnCompletion:默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode为kCAFillModeForwards
         fillMode:决定当前对象在非active时间段的行为。比如动画开始之前或者动画结束之后
              kCAFillModeRemoved:这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
              kCAFillModeForwards:当动画结束后,layer会一直保持着动画最后的状态
              kCAFillModeBackwards:在动画开始前,只需要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始。
              kCAFillModeBoth:这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态
         
         beginTime:可以用来设置动画延迟执行时间,若想延迟2s,就设置为CACurrentMediaTime()+2,CACurrentMediaTime()为图层的当前时间
         timingFunction:速度控制函数,控制动画运行的节奏
         
              kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉
              kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开
              kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地
              kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。
         
         delegate:动画代理
         autoreverses:动画完成后是否以动画形式回到初始值
         fromValue:keyPath相应属性的初始值
         toValue:keyPath相应属性的结束值
         byValue:keyPath相应属性的改变值
         
         `fromValue`,`toValue`和`byValue`属性可以用很多种方式来组合,但为了防止冲突,不能一次性同时指定这三个值。例如,如果指定了`fromValue`等于2,`toValue`等于4,`byValue`等于3,那么Core Animation就不知道结果到底是4(`toValue`)还是5(`fromValue + byValue`)了。他们的用法在`CABasicAnimation`头文件中已经描述的很清楚了,所以在这里就不重复了。总的说来,就是只需要指定`toValue`或者`byValue`,剩下的值都可以通过上下文自动计算出来。
     

    实例化方法:

    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];

    其中keyPath表示动画类型,常用的keyPath:

    举一个例子:

    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    basicAnimation.duration = 5;
    basicAnimation.removedOnCompletion = NO;
    basicAnimation.fillMode = kCAFillModeForwards;
     // basicAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 400)];
        
    [self.iView.layer addAnimation:basicAnimation forKey:@"rotation"];

    “position”也可以替换成上图其他的值,"fromvalue"/"toValue"/"byValue"要与动画类型'keypath'对应。

    CAKeyframeAnimation:关键帧动画

    关键帧动画和CABasicAnimation一样是CApropertyAnimation的子类,但是CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)或者添加一个增量数值(byValue),而CAKeyframeAnimation使用values数组可以设置多个关键帧,同时可以利用path可以进行位置或者锚点的动画操作。

    常用属性:

    values:关键帧数组对象,里面每一个元素即为一个关键帧,动画会在对应的时间段内,依次执行数组中每一个关键帧的动画。
    path:动画路径对象,可以指定一个路径,在执行动画时路径会沿着路径移动,Path在动画中只会影响视图的Position。
    keyTimes:设置关键帧对应的时间点,范围:0-1。如果没有设置该属性,则每一帧的时间平分。
    timingFunctions:每一帧对应的动画节奏。
    rotationMode:动画沿路径旋转方式。例如让一个视图按照一条三次贝塞尔曲线移动,如果rotationMode=kCAAnimationRotateAuto,那么这个视图会沿着曲线的切线移动,而不是直来直去的。如下图所示:

    举例:

    if (tag == 6) {
            //使用“values”
            keyFrameAni = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
            keyFrameAni.duration = 0.3;
            keyFrameAni.values = @[@(-(4) / 180.0*M_PI),@((4) / 180.0*M_PI),@(-(4) / 180.0*M_PI)];
            keyFrameAni.repeatCount=MAXFLOAT;
        }else if (tag == 7){
            //使用“path”路径
            keyFrameAni = [CAKeyframeAnimation animationWithKeyPath:@"position"];
            UIBezierPath *path = [UIBezierPath bezierPath];
            [path moveToPoint:_aniLayer.position];
            [path addCurveToPoint:CGPointMake(300, 500) controlPoint1:CGPointMake(100, 400) controlPoint2:CGPointMake(300, 450)];
            keyFrameAni.path = path.CGPath;
            keyFrameAni.duration = 1;
    1
        }
        [_aniLayer addAnimation:keyFrameAni forKey:@"keyFrameAnimation"];

    CASpringAnimation

    CASpringAnimation是iOS9才引入的动画类,效果类似于UIView的spring动画,不过比其增加了质量,劲度系数等属性的扩展,继承于CABaseAnimation,用法也很简单:

    CASpringAnimation *springAnimation = [CASpringAnimation animationWithKeyPath:@"position"];
        //质量,影响图层运动时的弹簧惯性,质量越大,弹簧拉伸和压缩的幅度越大
        springAnimation.mass = 1;
        //刚度系数(劲度系数/弹性系数),刚度系数越大,形变产生的力就越大,运动越快
        springAnimation.stiffness = 10;
        //阻尼系数,阻止弹簧伸缩的系数,阻尼系数越大,停止越快
        springAnimation.damping = 3;
        //初始速率,动画视图的初始速度大小 Defaults to zero
        //速率为正数时,速度方向与运动方向一致,速率为负数时,速度方向与运动方向相反
        springAnimation.initialVelocity = 10;
        //settlingDuration:估算时间 返回弹簧动画到停止时的估算时间,根据当前的动画参数估算
        springAnimation.duration = springAnimation.settlingDuration;
        springAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(100, 400, 100, 100)];
        [self.iView.layer addAnimation:springAnimation forKey:@"spring"];

    CATransition:转场动画

    CATransition是CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点
    UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果
    动画属性:(有的属性是具备方向的,详情看下图)
    type:动画过渡类型
    subtype:动画过渡方向
    startProgress:动画起点(在整体动画的百分比)
    endProgress:动画终点(在整体动画的百分比)
     
    -(void)transitionAnimation{
        self.index++;
        if (self.index>7) {
            self.index=1;
        }
        self.iImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@.jpg",[NSNumber numberWithInteger:self.index]]];
        CATransition *transition = [CATransition animation];
        transition.type = @"cube";
        //transition.subtype = @"fromRight";
        transition.duration = 2;
        [self.iImageView.layer addAnimation:transition forKey:nil];
    }

    这里是以"cube"和"pageCurl"的效果图,就是上面的代码,没有做成gif图,可以想象一下哈!

    CAAnimationGroup:动画组

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

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

    示例:

    CAAnimationGroup *group = [CAAnimationGroup animation];
        
        //    创建旋转动画对象
        CABasicAnimation *retate = [CABasicAnimation animation];
        //    layer的旋转属性
        retate.keyPath = @"transform.rotation";
        //    角度
        retate.toValue = @(M_PI);
        
        //    创建缩放动画对象
        CABasicAnimation *scale = [CABasicAnimation animation];
        //    缩放属性
        scale.keyPath = @"transform.scale";
        //    缩放比例
        scale.toValue = @(0.0);
        //    添加到动画组当中
        group.animations = @[retate,scale];
        //           执行动画时间
        group.duration = 2.0;
        //    执行完以后不要删除动画
        group.removedOnCompletion = NO;
        //          保持最新的状态
        group.fillMode = kCAFillModeForwards;
        
        [self.view.layer addAnimation:group forKey:nil];

    文章转载:https://www.jianshu.com/p/9fa025c42261

  • 相关阅读:
    HDU4731+找规律
    Unable to open c
    珠宝
    allegro添加多个过孔
    STM32硬件复位时间
    Android 系统的四层结构
    AIDL与stub
    devfs,proc,udev
    cdev[典]
    Linux设备管理之权限倾斜——mem、proc、devfs、sysfs、udev(下)
  • 原文地址:https://www.cnblogs.com/lfyDragon/p/8796518.html
Copyright © 2020-2023  润新知