iOS 动画

一.Transform 动画

Transform 动画分以下两种：

• view.transform：是 View二维的平移、旋转、缩放等，通常使用前缀 CGAffineTransform 的类。
• view.layer.transform：是在 3D 模式下面的变化，通常使用前缀为 CATransform3D 的类。

Transform 是一个变换，通过transform属性可以修改UIView对象的平移、旋转角度和缩放比例，一般要配合UIView动画一起使用，实现动画的效果

 //    Transform动画，需要配合UIView动画使用
    [UIView animateWithDuration:1 animations:^{
        //    平移
        //    相对于上一次做形变， 使用Make,它是相对于最原始的位置做的形变.
        //    _transformView.transform = CGAffineTransformTranslate(_transformView.transform, 0, -100);
        //        _transformView.transform = CGAffineTransformMakeTranslation(0, -100);
        
        //        旋转  2 * M_PI 一圈
        //       _transformView.transform = CGAffineTransformMakeRotation(M_PI);
        
        //        缩放
        _transformView.transform = CGAffineTransformMakeScale(0.5, 0.5);
        
        //        自定义矩阵变换，需要掌握矩阵变换的知识才知道怎么用（下面所示是一个M_PI_4度的旋转）
        //        _transformView.transform = CGAffineTransformMake(cos(M_PI_4), sin(M_PI_4) , -sin(M_PI_4),  cos(M_PI_4), 0, 0);
        
        //        组合动画，带有旋转的组合后效果可能跟想象不一样
        //        _transformView.transform = CGAffineTransformConcat(CGAffineTransformConcat(CGAffineTransformMakeTranslation(0, -100),CGAffineTransformMakeRotation(M_PI)), CGAffineTransformMakeScale(0.5, 0.5));
        
        //                3D 模式下面的变化
        //        _transformView.layer.transform = CATransform3DMakeScale(2, 2, 2);
        
        
    } completion:^(BOOL finished) {
        //        回到原来位置
        _transformView.transform = CGAffineTransformIdentity;
    }];

二：iOS核心动画

基本动画 CABasicAnimation

//    一些常用的animationWithKeyPath值
    /*
     position  中心点改变   position.x  沿X轴平移    position.y  沿Y轴平移  [NSValue valueWithCGPoint:CGPointMake(100, 100)];
     transform.scale 整体缩放  transform.scale.x 宽缩放   transform.scale  高缩放  @(0.5);
     transform.rotation.x  沿X轴旋转   transform.rotation.z 沿Y轴旋转  transform.rotation.z 沿Z轴旋转  @(M_PI_2);
     cornerRadius  圆角  @(20);
     backgroundColor   背景颜色变化   (id)[UIColor blueColor].CGColor;
     bounds  大小改变，中心点不变  [NSValue valueWithCGRect:CGRectMake(0, 0, 100, 200)];
     contents  内容改变 比喻图片  (id)[UIImage imageNamed:@"12121212"].CGImage;
     opacity   透明度   @(0.5);
     */
    CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    //动画时间
    moveAnimation.duration = 1.8;
    //动画起始值
    //    moveAnimation.fromValue = @(1.0);
    //动画终止值
    moveAnimation.toValue = @(0.5);
    //    控制动画的显示节奏, 系统提供五种值选择，分别是：
    /*
     1.kCAMediaTimingFunctionDefault( 默认，中间快)
     2.kCAMediaTimingFunctionLinear (线性动画)
     3.kCAMediaTimingFunctionEaseIn (先慢后快 慢进快出）
     4.kCAMediaTimingFunctionEaseOut (先块后慢快进慢出）
     5.kCAMediaTimingFunctionEaseInEaseOut (先慢后快再慢)
     */
    moveAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    //    动画的重复次数 （MAXFLOAT 表示无限循环）
    moveAnimation.repeatCount = MAXFLOAT;
    //    动画的总时长
    //    moveAnimation.repeatDuration = 3;
    //    如果想动画完成后不回到原来的位置，可以设置removedOnCompletion为NO，autoreverses为YES
    //    完成后是否删除动画（默认YES，如果不设置成NO，切出这个界面在回来，动画不会继续）
    moveAnimation.removedOnCompletion = NO;
    //    执行的动画按照原动画返回执行
    //    moveAnimation.autoreverses = YES;
    //    动画的运行场景
    moveAnimation.fillMode = kCAFillModeForwards;
    
    //添加动画，后面有可以拿到这个动画的标识
    [_transformView.layer addAnimation:moveAnimation forKey:nil];

关键帧动画 CAKeyframeAnimation

• 和CABasicAnimation基本动画一样，也是CAPropertyAnimation的子类
• 与CABasicAnimation区别：
  • CABasicAnimation：只能从一个数值（fromValue）变到另一个数值（toValue）
  • CAKeyframeAnimation：会使用一个数组(values) 保存一组关键帧, 也可以给定一个路径(path)制作动画。

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    //    关键帧
    //    NSArray *rotationVelues = @[@(M_PI_2), @(-M_PI_2), @(M_PI_2)];
    //    animation.values = rotationVelues;
    //创建曲线路径
    UIBezierPath *bezierPath = [[UIBezierPath alloc] init];
    [bezierPath moveToPoint:CGPointMake(100, 450)];
    [bezierPath addCurveToPoint:CGPointMake(200, 500) controlPoint1:CGPointMake(350, 200) controlPoint2:CGPointMake(300, 600)];
    //    中心点沿着这条曲线做动画
    animation.path = bezierPath.CGPath;
    //    对应时间（开始到第一个时间点之间是没有动画的）
    animation.keyTimes = @[@0 ,@0.8 ,@1];
    //    旋转的方向
    //    animation.rotationMode = kCAAnimationRotateAutoReverse;
    //    剩下的属性和CABasicAnimation基本一样
    animation.duration = 3.0f;
    animation.repeatCount = 1;
    [_transformView.layer addAnimation:animation forKey:nil];

动画组 CAAnimationGroup

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

//    创建一个缩放的基本动画
    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation1.fromValue = @(1);
    animation1.toValue = @(0.5);
    
    //    创建一个旋转的基本动画
    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    animation2.toValue = @(M_PI_2);
    //    2秒后在开始动画
    animation2.beginTime = 2;
    //    如果不在这个地方设置时间，直接用animationGroup的时间，动画会完成（animationGroup.duration - animation2.beginTime）/animationGroup.duration
    animation2.duration = 2;
    //    动画组
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    //    将基本动画添加进去
    animationGroup.animations = @[animation1,animation2];
    //    剩下的属性和CABasicAnimation基本一样
    animationGroup.duration = 4;
    animationGroup.autoreverses = YES;
    [_transformImageView.layer addAnimation:animationGroup forKey:nil];

转场动画 CATransition

CATransition *caTransition = [CATransition animation];
    caTransition.duration = 1.0;
//    动画切换风格
    /*
     系统自带：
     kCATransitionFade        渐入渐出
     kCATransitionMoveIn      覆盖
     kCATransitionPush        推挤
     kCATransitionReveal      揭开
     自定义效果：
     cube,                    立方体
     suckEffect,              吮吸
     oglFlip,                 翻转
     rippleEffect,            波纹
     pageCurl,                翻页
     pageUnCurl,              反翻页
     cameraIrisHollowOpen,    开镜头
     cameraIrisHollowClose,   关镜头
     */
    caTransition.type = kCATransitionFade;
//    动画切换方向
    /*
     kCATransitionFromRight   右侧
     kCATransitionFromLeft    左侧
     kCATransitionFromTop     顶部
     kCATransitionFromBottom  底部
     */
    caTransition.subtype = kCATransitionFromLeft;
    [_transformImageView.layer addAnimation:caTransition forKey:nil];

模态跳转动画

• 自带动画

    LoginSliderViewController *lvc = [[LoginSliderViewController alloc] init];
    lvc.modalPresentationStyle = 0;
    /*
     系统支持的四种动画：
     UIModalTransitionStyleCoverVertical=0, //默认方式，竖向上推
     UIModalTransitionStyleFlipHorizontal, //水平反转
     UIModalTransitionStyleCrossDissolve,//隐出隐现
     UIModalTransitionStylePartialCurl,//部分翻页效果
     */
    [lvc setModalTransitionStyle:UIModalTransitionStylePartialCurl];
    [self presentViewController:lvc animated:YES completion:nil];

• 配合CATransition使用

    LoginSliderViewController *lvc = [[LoginSliderViewController alloc] init];
    //    转场动画——CATransition
    CATransition *caTransition = [CATransition animation];
    caTransition.duration = 1.0;
    //    动画切换风格
    caTransition.type = @"oglFlip";
    caTransition.subtype = kCATransitionFromRight;
    //    添加动作
    [self.view.window.layer addAnimation:caTransition forKey:nil];
    lvc.modalPresentationStyle = 0;
    [self presentViewController:lvc animated:YES completion:nil];

导航栏跳转动画

    LoginSliderViewController *lvc = [[LoginSliderViewController alloc] init];
    //    转场动画——CATransition
    CATransition *caTransition = [CATransition animation];
    caTransition.duration = 1.0;
    //    动画切换风格
    caTransition.type = @"cube";
    caTransition.subtype = kCATransitionFromRight;
    //    添加动作（下面两种都可以）
    //    [self.view.window.layer addAnimation:caTransition forKey:nil];
    [self.navigationController.view.layer addAnimation:caTransition forKey:nil];
    [self.navigationController pushViewController:lvc animated:NO];

三：UIView动画

• 普通动画

    /*
     Duration ： 动画时长
     delay：开始时间
     options： 动画效果
     {
     UIViewAnimationOptionCurveEaseInOut   //先加速后减速，默认
     UIViewAnimationOptionCurveEaseIn      //由慢到快
     UIViewAnimationOptionCurveEaseOut     //由快到慢
     UIViewAnimationOptionCurveLinear      //匀速
     }
     animations：动画
     completion：动画结束回调
     */
    [UIView animateWithDuration:10 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        NSLog(@"动画开始");
        _transformView.frame = CGRectMake(50, 500, 50, 50);

    } completion:^(BOOL finished) {
        NSLog(@"动画结束");
    }];

• 过渡动画

  /*
    UIViewAnimationOptionTransitionNone //没有效果，默认
    UIViewAnimationOptionTransitionFlipFromLeft //从左翻转效果
    UIViewAnimationOptionTransitionFlipFromRight //从右翻转效果
    UIViewAnimationOptionTransitionCurlUp //从上往下翻页
    UIViewAnimationOptionTransitionCurlDown //从下往上翻页
    UIViewAnimationOptionTransitionCrossDissolve //旧视图溶解过渡到下一个视图
    UIViewAnimationOptionTransitionFlipFromTop //从上翻转效果
    UIViewAnimationOptionTransitionFlipFromBottom //从上翻转效果
    */
   [UIView transitionWithView:_transformImageView duration:10 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
       NSLog(@"动画开始");
       _transformImageView.image = [UIImage imageNamed:@"02"];
   } completion:^(BOOL finished) {
       NSLog(@"动画结束");
   }];

• 弹簧效果

    /*
    Duration ： 动画时长
    delay：开始时间
    usingSpringWithDamping ：范围为0.0f到1.0f，数值越小「弹簧」的振动效果越明显
    initialSpringVelocity： 表示初始的速度，数值越大一开始移动越快
    options：动画效果
    */
   _transformView2.frame = CGRectMake(190, 200, 50, 50);
   [UIView animateWithDuration:2 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:20 options:UIViewAnimationOptionCurveEaseIn animations:^{
       _transformView2.frame = CGRectMake(190, 100, 50, 50);
   } completion:^(BOOL finished) {
   }];

• 关键帧动画

    /*
     UIViewKeyframeAnimationOptionCalculationModeLinear      // 连续运算模式，线性
     UIViewKeyframeAnimationOptionCalculationModeDiscrete    // 离散运算模式，只显示关键帧
     UIViewKeyframeAnimationOptionCalculationModePaced       // 均匀执行运算模式，线性
     UIViewKeyframeAnimationOptionCalculationModeCubic       // 平滑运算模式
     UIViewKeyframeAnimationOptionCalculationModeCubicPaced  // 平滑均匀运算模式
     */
    [UIView animateKeyframesWithDuration:10 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
        __block CGPoint center = _transformView.center;
        /*
         StartTime ： 开始时间（StartTime * Duration 秒）
         relativeDuration ： 动画时长（relativeDuration * Duration 秒）
         */
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.3 animations: ^{
            _transformView.center = (CGPoint){ center.x, center.y + 80 };
        }];
        [UIView addKeyframeWithRelativeStartTime:0.3 relativeDuration:0.7 animations: ^{
            _transformView.center = (CGPoint){ center.x, center.y + 185 };
        }];
        
        //        这样就可以实现组合动画
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1 animations: ^{
            _transformView.transform = CGAffineTransformMakeRotation(M_PI);
        }];
        
    } completion:^(BOOL finished) {
        
    }];