iOS animations学习(1)-简单的UIView动画

做IOS也一段时间，总觉得缺了一点必备技能。不能熟练的使用各种动画来使UI更有动感。所以近期特意下载了一份电子版的[iOS animations by Tutorials]，虽说是英文版的，两天也看了一大章了。总结一下，以备平常时多查看。

UIView的动画各种参数

UIView动画可以设置的动画属性有:

1、大小变化(frame)
2、拉伸变化(bounds)
3、中心位置(center)
4、旋转(transform)
5、透明度(alpha)
6、背景颜色(backgroundColor)
7、拉伸内容(contentStretch)

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

UIViewAnimationOptionLayoutSubviews            //进行动画时布局子控件
 UIViewAnimationOptionAllowUserInteraction      //进行动画时允许用户交互
 UIViewAnimationOptionBeginFromCurrentState     //从当前状态开始动画
 UIViewAnimationOptionRepeat                    //无限重复执行动画
 UIViewAnimationOptionAutoreverse               //执行动画回路
 UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
 UIViewAnimationOptionOverrideInheritedCurve    //忽略嵌套动画的曲线设置
 UIViewAnimationOptionAllowAnimatedContent      //转场：进行动画时重绘视图
 UIViewAnimationOptionShowHideTransitionViews   //转场：移除（添加和移除图层的）动画效果
 UIViewAnimationOptionOverrideInheritedOptions  //不继承父动画设置

 UIViewAnimationOptionCurveEaseInOut            //时间曲线，慢进慢出（默认值）
 UIViewAnimationOptionCurveEaseIn               //时间曲线，慢进
 UIViewAnimationOptionCurveEaseOut              //时间曲线，慢出
 UIViewAnimationOptionCurveLinear               //时间曲线，匀速

 UIViewAnimationOptionTransitionNone            //转场，不使用动画
 UIViewAnimationOptionTransitionFlipFromLeft    //转场，从左向右旋转翻页
 UIViewAnimationOptionTransitionFlipFromRight   //转场，从右向左旋转翻页
 UIViewAnimationOptionTransitionCurlUp          //转场，下往上卷曲翻页
 UIViewAnimationOptionTransitionCurlDown        //转场，从上往下卷曲翻页
 UIViewAnimationOptionTransitionCrossDissolve   //转场，交叉消失和出现
 UIViewAnimationOptionTransitionFlipFromTop     //转场，从上向下旋转翻页
 UIViewAnimationOptionTransitionFlipFromBottom  //转场，从下向上旋转翻页

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

UIViewAnimationOptionLayoutSubviews           //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction     //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState    //从当前状态开始动画
UIViewAnimationOptionRepeat                   //无限重复执行动画
UIViewAnimationOptionAutoreverse              //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置

UIViewKeyframeAnimationOptionCalculationModeLinear     //运算模式 :连续
UIViewKeyframeAnimationOptionCalculationModeDiscrete   //运算模式 :离散
UIViewKeyframeAnimationOptionCalculationModePaced      //运算模式 :均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic      //运算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式 :平滑均匀

简单动画

1 .

UIView.animate(withDuration: 1.0) {
        //设置heading的中心点到view的中心
       self.heading.center.x += self.view.bounds.width
 }

这个动画是最简单的，只有一个参数，设置动画时间。
2 .

UIView.animate(withDuration: 1.0, animations: {
        
    }, completion: { _ in
        
    })

3 .

UIView.animate(withDuration: 1.0, delay: 1.0, options: [], animations: {
        
    }, completion: { _ in
        
    })

duration 动画时长
deley 延迟
option 是UIViewAnimationOptions，可以多选，动画样式
completion完成动画后的操作

spring 弹簧动画

    //usingSpringWithDamping参数来设置一个阻尼的动画，从0.0-1.0, 参数值越小， 弹性值越大
    //initialSpringVelocity控制动画的初始速度。代表弹簧动能的大小，快慢
    UIView.animate(withDuration: 1.0, delay: 1.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 1.0, options: [], animations: {
        
    }, completion: { _ in
        
    })

Transitions 过渡动画

此动画主要用于添加和删除一个 view的动画

1 .

UIView.transition(with: animationContainerView, duration: TimeInterval, options: UIViewAnimationOptions, animations: {
    //添加view
        self.animationContainerView.addSubview(newView) 
   //删除view
        self.newView.removeFromSuperview() 
   //Hide view 隐藏view
        self.newView.isHidden = true  
   //添加图片
         imageView.image = toImage
    }, completion: { _ in
        
    })

2 . 两个同级的view之间的替换

UIView.transition(from: UIView, to: UIView, duration: TimeInterval, options: UIViewAnimationOptions, completion: {
        
    })

帧动画

1 .

主要支持多个，顺序的动画，

    UIView.animateKeyframes(withDuration: 1.0, delay: 1.0, options: [], animations: {
         //add keyframes
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25,
          animations: {
            self.planeImage.center.x += 80.0
            self.planeImage.center.y -= 10.0
          }
        )

        UIView.addKeyframe(withRelativeStartTime: 0.1, relativeDuration: 0.4) {
          self.planeImage.transform = CGAffineTransform(rotationAngle: -.pi / 8)
        }

        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
          self.planeImage.center.x += 100.0
          self.planeImage.center.y -= 50.0
          self.planeImage.alpha = 0.0
        }

        UIView.addKeyframe(withRelativeStartTime: 0.51, relativeDuration: 0.01) {
          self.planeImage.transform = .identity
          self.planeImage.center = CGPoint(x: 0.0, y: originalCenter.y)
        }

        UIView.addKeyframe(withRelativeStartTime: 0.55, relativeDuration: 0.45) {
          self.planeImage.alpha = 1.0
          self.planeImage.center = originalCenter
        }
    }, completion: { _ in
        
    })

其中withRelativeStartTime 和 relativeDuration都是百分比，在总时间的百分比间隔中执行的动画

---

平常用到的动画

1. label等控件的transform对象集合，需要使用CGAffineTransform对象定义

label.transform = CGAffineTransform()

//尺寸变化
  public /*not inherited*/ init(translationX tx: CGFloat, y ty: CGFloat)
//比例变化
public /*not inherited*/ init(scaleX sx: CGFloat, y sy: CGFloat)
//旋转变化
public /*not inherited*/ init(rotationAngle angle: CGFloat)

label.transform = .identity //每次变换前都要置位，不然你变换用的坐标系统不是屏幕坐标系统（即绝对坐标系统），而是上一次变换后的坐标系统 

1、CGAffineTransformIsIdentity //检测一个Transformation是不是恒等变换，也就是说不变
     bool CGAffineTransformIsIdentity ( CGAffineTransform t);//其结果返回一个BOOL值

2、CGAffineTransformEqualToTransform  //检测两个Transformation是否相等。
bool CGAffineTransformEqualToTransform (CGAffineTransform t1,CGAffineTransform t2);

CGAffineTransform详解

2. cubeTransition 类似于3D盒子的动画

func cubeTransition(label: UILabel, text: String, direction: AnimationDirection) {

    let auxLabel = UILabel(frame: label.frame)
    auxLabel.text = text
    auxLabel.font = label.font
    auxLabel.textAlignment = label.textAlignment
    auxLabel.textColor = label.textColor
    auxLabel.backgroundColor = label.backgroundColor

    let auxLabelOffset = CGFloat(direction.rawValue) *
      label.frame.size.height/2.0

    auxLabel.transform = CGAffineTransform(scaleX: 1.0, y: 0.1).concatenating(
      CGAffineTransform(translationX: 0.0, y: auxLabelOffset))

    label.superview!.addSubview(auxLabel)

    UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseOut,
      animations: {
        auxLabel.transform = .identity
        label.transform =
          CGAffineTransform(scaleX: 1.0, y: 0.1).concatenating(
          CGAffineTransform(translationX: 0.0, y: -auxLabelOffset))
      },
      completion: {_ in
        label.text = auxLabel.text
        label.transform = .identity

        auxLabel.removeFromSuperview()
      }
    )
  }

知行办公，专业移动办公平台https://zx.naton.cn/
【总监】十二春秋之，3483099@qq.com；
【Master】zelo，616701261@qq.com；
【运营】运维艄公，897221533@qq.com；****
【产品设计】流浪猫，364994559@qq.com；
【体验设计】兜兜，2435632247@qq.com；
【iOS】淘码小工，492395860@qq.com；iMcG33K，imcg33k@gmail.com；
【Android】人猿居士，1059604515@qq.com；思路的顿悟，1217022114@qq.com；
【java】首席工程师MR_W，feixue300@qq.com；
【测试】土镜问道，847071279@qq.com；
【数据】fox009521，42151960@qq.com；