前言

上片文章 《Animation 1: iOS 中的动画简介》中，我们大致了解动画的分层和核心动画类之间的关系。这篇文章我们将介绍对一个动画需求，我们如何分析以及实现动画。同时也分析一些动画相关的属性。

一、在动画分析之前，我们先了解 iOS 视图坐标

1、iOS 的视图坐标的原点(0,0) 是在手机可见屏幕的左上角。
2、水平从左到右为 X 轴，并数值递增，即 (x:0 -> ∞）。
3、垂直从上到下为 Y 轴，并数值递增，即（y:0 ->∞）。

如下图所示：

iOS坐标.png

二、分析动画

1、先看动画效果，如下图：

动画效果.gif

2、分析上方动画

1）动画的情况

从屏幕可见视图的左上角飞出一个由小到大的蝴蝶，最后停止在视图的右下角。

2）知道了动画的情况，我们最终实现这个动画，就要分析它，那么如何分析呢？我们推荐是解剖分析法，分析过程如下：

2.1）动画开始是看不到的。

分解：动画看不到，如何动画看不到有：动画开始处于隐藏状态或者在可见视图外 ，还有动画尺寸为0。

2.2）动画一开始就在做不停的动。

这个是有 UIImageView 的 animationImages 属性设置图像源，然后，调用 UIImageView 实例方法 startAnimating() 实现的。（本片不谈，后续...）

2.3）动画的位置发生变化

动画从(0,0) 开始到结束位置，图像的 X 、Y 轴的坐标值都在随时间线性变化。

2.4）动画的大小变化

动画从开始到结束，动画视图大小也随时间成线性变化。

2.5）动画结束，动画自身动画不停止

从动画效果可以看出，这个动画也可分为视图动画和本身动画。

总结：经过上方动画剖析，我们明确动画的整个结构。该动画主要是视图动画属性随时间线性变化而来。

三、动画实现

1）我们在 ViewController 中实现该动画，我们就要了解一下 ViewController 视图加载的流程。如下图所示：

image.png

2）实现动画代码

//
//  ViewController.swift
//  Demo_1
//
//  Created by 周双建 on 2019/10/9.
//  Copyright © 2019 周双建. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

   var elvesImageView:UIImageView?
   override func viewDidLoad() {
       super.viewDidLoad()
       // 设置背景
       let backImageView = UIImageView.init(frame: self.view.frame)
       backImageView.image = UIImage.init(named: "backImage.png")
       self.view.addSubview(backImageView)

       // 准备数据
       var imageArray:Array<UIImage> = []
       for i in 0..<7 {
           let imageName = String.init(format: "img_%d.png", i)
           let image = UIImage.init(named: imageName)
           imageArray.append(image!)
       }

       // 精灵对象
       elvesImageView = UIImageView.init(frame: CGRect.zero)
       elvesImageView!.animationImages = imageArray
       self.view.addSubview(elvesImageView!)
   }

   override func viewWillAppear(_ animated: Bool) {
       // 启动动画
       self.elvesImageView!.startAnimating()
       // UIView 的显示动画
       UIView.animate(withDuration: 10) {
           self.elvesImageView!.frame = CGRect.init(x: 250, y: 650, width: 121, height: 74)
       }
   }
}

四、动画视图属性分析

1、视图的 frame 、 bounds 、center 的区别

frame 、bounds 、center 都是用来视图的位置信息的。区别如下：

1）frame

frame 包含 x 、 y 、 width 、 height 四个属性，也可以对这四个属性进行操作。其中 x 、y 坐标是相对与视图的父视图的原点(0,0) 而言的。

2）bounds

bounds 包含 x 、 y 、 width 、 height 四个属性，但是只能对 width 、height 可以操作。而 x 、y 是相对与视图自身而言的。

3）center

center 包含 x 、y 两个属性，并可以操作。其中 x 、y 是先对父视图的原点（0，0）而言，即是视图的中心位置。

2、CGRect 、 CGPoint 的介绍

视图的 frame 、bounds 的类型是 CGRect; center 是 CGPoint 。

1）CGRect

public struct CGRect {

    public var origin: CGPoint

    public var size: CGSize

    public init()

    public init(origin: CGPoint, size: CGSize)
}

从上方代码，我们可以看到 CGRect 包含 origin 、size 两个属性。origin 类形是 CGPoint ; size 的类型是 CGSize。下面我们介绍 CGSize ，而 CGPoint 会单独介绍。

1.1） CGSize

public struct CGSize {

    public var width: CGFloat

    public var height: CGFloat

    public init()

    public init(width: CGFloat, height: CGFloat)
}

从上方代码，我们看到 CGSize 包含 width 、height 两个属性。则 CGRect 就含有 width 、height 两个属性。

2）CGPoint

public struct CGPoint {

    
    public var x: CGFloat

    public var y: CGFloat

    public init()

    public init(x: CGFloat, y: CGFloat)
}

从上面代码可知，CGPoint 含有 x 、y 两个属性，则 frame 、bounds 、center 都包含 x 、y 两个属性。

总结：

通过 1) 、2) 分析可知，可以通过 frame 的 x 、y 来改变视图的位置进行移动。还可以通过 frame 或 bounds 的 witdh 、 height 属性来实现视图的拉伸、收缩效果。

2、视图的 alpha 透明度属性

1）取值范围

该属性的取值是浮点类型，从 0 ~ 1 之间取值。

2）淡入淡出动画效果

当 alpha = 0 时，视图处于隐藏状态，当 alpha = 1 时，视图处于显示状态。则可以通过修改 alpha 的取值来实现视图淡入淡出效果。

3、视图的 Layer 属性

1） UIView 和 Layer 的区别？

1.1）UIView 是视图显示容器，负责内容的显示和事件响应，同时每个视图都包含一个Layer 图层。
1.2）Layer 存在与每个视图中，它主要是承载视图的内容。

2）通过 Layer 层，可做动画

2.1）圆角渐变
2.2）边框渐变
2.3）阴影
2.4）3D 高级动画 (transform3D)

4、视图的 transform 属性

利用视图的 transform 属性可以做许多动画，如下：
1）视图平移
2）视图缩放
3）视图旋转