iOS动画（二）----UIView动画之源码实现

工欲善其事，必先利其器。上篇简略介绍了UIViewAnimate的基本方法和特效枚举：
iOS动画（一）----UIView动画之api认识
本章介绍一些动画的简单实现。
一、从几个维度介绍UIView基本动画

- (UIImageView *)animateIV {
    if (!_animateIV) {
          _animateIV = [[UIImageView alloc] initWithFrame:CGRectMake(50, NavBarHeight+50, 100, 100)];
          _animateIV.image = [UIImage imageNamed:@"image_0"];
     }
     return _animateIV;
}

<一>、基于坐标尺寸变化的动画，主要有三个点：
1、 bounds：修改这个属性会结合center属性重新计算frame，建议通过这个属性修改尺寸。
2、frame：修改这个属性通常会导致视图形变的同时也发生移动，然后会重新设置center跟bounds属性。
3、center: 设置后视图会移动到一个新位置，修改后会结合bounds重新计算frame。

坐标尺寸.gif

/** 只改尺寸变化  */
- (void)boundsAnimation {
    /*
     *参数:动画时长
     *回调一:动画结束后,视图到达状态
     *回调二:动画执行完毕
     */
    [UIView animateWithDuration:0.3f animations:^{
        self.animateIV.bounds = CGRectMake(0, 0, 50, 50);
    } completion:^(BOOL finished) {
        self.animateIV.bounds = CGRectMake(0, 0, 100, 100);
    }];
}
/** 位置尺寸均变化  */
- (void)frameAnimation {
    [UIView animateWithDuration:0.3f animations:^{
        self.animateIV.frame = CGRectMake(200, NavBarHeight, 50, 50);
    } completion:^(BOOL finished) {
        self.animateIV.frame = CGRectMake(50, NavBarHeight+50, 100, 100);
    }];
}

/** 中心点变化 */
- (void)centerAnimation {
    [UIView animateWithDuration:0.3f animations:^{
        self.animateIV.center = CGPointMake(150, NavBarHeight+50+ 100);
    }];
}

<二>、基于视图显示的动画，主要有两个点：
1、backgroundColor: 修改这个属性会产生颜色渐变过渡的效果，本质上是系统不断修改了tintColor来实现的。
2、alpha：修改这个属性会产生淡入淡出的效果。

视图显示.gif

/** 背景色变化 */
- (void)backgroundAnimation {
    [UIView animateWithDuration:1.0f  animations:^{
        self.animateIV.backgroundColor = [UIColor purpleColor];
    } completion:^(BOOL finished) {
        self.animateIV.backgroundColor = [UIColor redColor];
    }];
}

/** 透明度变化 */
- (void)alphaAnimation {
    [UIView animateWithDuration:0.3f animations:^{
        self.animateIV.alpha = 0.3f;
    } completion:^(BOOL finished) {
        self.animateIV.alpha = 1.0f;
    }];
}

<三>、形态变换动画，即线性代数上的矩阵变化(后期核心动画再作说明)，一个点:
transform：修改这个属性可以实现旋转、形变、移动、翻转等动画效果，其通过矩阵运算的方式来实现，因此更加强大

形态变换.gif

/** 向上平移 */
- (void)transformMoveUpAnimate {
    [UIView animateWithDuration:0.5 animations:^{
        // 使用Make,它是相对于最原始的位置做的形变,开发中，不用这个，只能移动一次，
        // 看见有Make,就只能移动一次，
        // self.animateIV.transform = CGAffineTransformMakeTranslation(0, -20);
        // 相对于上一次做形变，开发中经常使用下面的
        self.animateIV.transform = CGAffineTransformTranslate(self.animateIV.transform, 0, -20);
    }];
}
/** 向下平移 */
- (void)transformMoveDownAnimate {
    [UIView animateWithDuration:0.5 animations:^{
        //使用Make,它是相对于最原始的位置做的形变.
        //self.animateIV.transform = CGAffineTransformMakeTranslation(0, 20);
        //相对于上一次做形变.
        self.animateIV.transform = CGAffineTransformTranslate(self.animateIV.transform, 0, 20);
    }];
}
/** 旋转 */
- (void)transformSlideAnimate {
    [UIView animateWithDuration:0.5 animations:^{
        //旋转的度数, 是一个弧度
        //使用Make,它是相对于最原始的位置做的形变.
        //self.animateIV.transform = CGAffineTransformMakeRotation(M_PI_4);
        self.animateIV.transform = CGAffineTransformRotate(self.animateIV.transform, M_PI_4);
    }];
}
/** 缩放 */
- (void)transformScaleAnimate {
    [UIView animateWithDuration:0.5 animations:^{
        //使用Make,它是相对于最原始的位置做的形变.
        //self.animateIV.transform = CGAffineTransformMakeScale(0.8, 0.8);
        self.animateIV.transform = CGAffineTransformScale(self.animateIV.transform, 0.8, 0.8);
    }];
}

二、UIView的关键帧动画
即给需要动画效果的属性，准备一组与时间相关的值，这些值都是在动画序列中比较关键的帧中提取出来的，而其他时间帧中的值，可以用这些关键值，采用特定的插值方法计算得到，从而达到比较流畅的动画效果。

关键帧.gif

- (void)clickAciton:(UIButton *)sender {
    UIView *startView = [[UIView alloc] initWithFrame:CGRectMake(0, NavBarHeight, 60, 60)];
    //startView.center = CGPointMake(30, NavBarHeight+30);
    startView.backgroundColor = randomColor;
    startView.layer.cornerRadius = 30;
    startView.layer.borderWidth = 5;
    startView.layer.borderColor = randomColor.CGColor;
    [self.view addSubview:startView];

   /**创建一个关键帧动画
     *参数1:动画时长8秒
     *参数2:动画延时0面
     *动画效果:线性 + 重复
     */
    [UIView animateKeyframesWithDuration:8 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear | UIViewAnimationOptionRepeat animations:^{
        //设计竖直方向6个位置
        CGFloat averageHeight = (Main_Screen_Height-NavBarHeight-TabBarSafeHeight-30-30)/5.0;
        for (NSInteger i=0; i<6; i++) {
            /*插入关键帧动画信息
             *参数1:表示关键帧动画开始的时刻在整个动画中的百分比
             *参数2:表示这个关键帧动画占用整个动画时长的百分比
             */
            [UIView addKeyframeWithRelativeStartTime:i/6.0 relativeDuration:1/6.0 animations:^{
                startView.center = CGPointMake(i%2==0 ? 30 : Main_Screen_Width-30 , averageHeight*i + NavBarHeight+30);
            }];
        }
    } completion:^(BOOL finished) {
    }];
}

三、UIViewAnimationOptions其中的几种动画效果

转场及阻尼.gif

/*** 转场动画 **/
 #pragma mark - Methods
- (void)makeTransitionType:(UIViewAnimationOptions)animationTransitionType {
  if ([[self.baseView subviews] containsObject:self.bottomView]) {
      [UIView transitionFromView:self.bottomView toView:self.topView duration:1.0f options:animationTransitionType completion:^(BOOL finished){
          [self.bottomView removeFromSuperview];
      }];
      [self.baseView addSubview:self.topView];
  } else {
      [UIView transitionFromView:self.topView toView:self.bottomView duration:1.0f options:animationTransitionType completion:^(BOOL finished){
          [self.topView removeFromSuperview];
      }];
      [self.baseView addSubview:self.bottomView];
  }
}
#pragma mark - LazyLoad 懒加载
- (UIView *)baseView {
    if (!_baseView) {
         _baseView = [[UIView alloc] initWithFrame:CGRectMake(20, NavBarHeight+20, 100, 150)];
         _baseView.backgroundColor = [UIColor whiteColor];
    }
    return _baseView;
}
- (UIView *)topView {
    if (!_topView) {
        _topView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 150)];
        _topView.backgroundColor = [UIColor purpleColor];
    }
    return _topView;
 }
- (UIView *)bottomView {
    if (!_bottomView) {
         _bottomView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 150)];
        _bottomView.backgroundColor = [UIColor yellowColor];
    }
    return _bottomView;
}
/*** 阻尼动画 **/
- (void)dampingAnimation {
    //随即一个高度, 50~300
    CGFloat h = arc4random() % 251 + 50;
    //带有弹跳效果的动画
    //Damping:阻尼,取值0~1
    //Velocity:速度 像素/秒
    [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.7 initialSpringVelocity:30 options:UIViewAnimationOptionCurveLinear animations:^{
    
        CGRect frame = self.animateIV.frame;
        frame.size.height = h;
        self.animateIV.frame = frame;
    } completion:nil];
}