给你的App添加动画效果

动画在iOS开发中有举足轻重的作用，通过动画你可以让你的用户了解他究竟干了什么，下面是一个简单的演示动画：

现在跟着我的步伐一起来学吧

给动画添加添加持续时间

首先创建一个新的swift Playground，给他命名为“FlyingSquares”，接着要导入“PlaygroundSupport”。

import UIKit
import PlaygroundSupport

下面我们要建立一个画布来让我们能够在上面画画：

// --- 创建一个大小都为为500的画布 ---
let liveViewFrame = CGRect(x: 0, y: 0, width: 500, height: 500)
let liveView = UIView(frame: liveViewFrame)
liveView.backgroundColor = .red // 注意为了方便看画布在哪里，我在这里把画布设为红色PlaygroundPage.current.liveView = liveView

当你明白画布在哪里之后就把背景色改成白色吧

liveView.backgroundColor = .white

接着我们在画布里创建一个正方形

let smallFrame = CGRect(x: 0, y: 0, width: 100, height: 100)
let square = UIView(frame: smallFrame)
square.backgroundColor = .redliveView.addSubview(square) // 把正方形添加到画布里

好嘞，前期工作完成了，现在我们来添加一个小动画让他变成橘黄色通过使用 UIView.animate(withDuration:) 来实现

UIView.animate(withDuration: 3.0) {square.backgroundColor = .orange
}

如果你现在运行一下代码你将会看到正方形是如何变色的

当然除了变色，你还可以使它动起来。例如：我们让它放大地跑到中间去：

UIView.animate(withDuration: 3.0) {square.backgroundColor = .orangesquare.frame = CGRect(x: 150, y: 150, width: 250, height: 250) // 通过新的位置来让正方形移到想要去的地方
}

通过添加一行新代码你可以看到

使用闭包来添加新动画

但是呢，如果你想要让它再从中心点到右上角要怎么搞呢？
如果你只是单词地再添加一个方法：

UIView.animate(withDuration: 3.0) {square.backgroundColor = .redsquare.frame = CGRect(x: 400, y: 0, width: 100, height: 100) // 让正方形去往右上角
}

运行的时候你就会发现它居然直接向右边行走了，根本没有到达中间点，这个时候要怎么办呢？别慌，我们还有闭包可以用，在一开始我们省略了 UIView.animate(withDuration: , animations: ) 里面的一个参数，利用第二个参数我们就可以添加下一个动画了

UIView.animate(withDuration: 3.0, animations: {square.backgroundColor = .orange   // 改变正方形的颜色square.frame = CGRect(x: 150, y: 150, width: 250, height: 250) // 让正方形移动到中间位置
}) { (_) in  // 使用闭包来完成下一个动画UIView.animate(withDuration: 3.0) {square.backgroundColor = .red   // 改变正方形的颜色square.frame = CGRect(x: 400, y: 0, width: 100, height: 100) // 让正方形从中间移动到右上角}
}

运行一下就会看到我们想要的效果啦

添加延迟或自定义选项

注意到animate除了有两个参数的还可以有四个参数的 UIView.animate(withDuration: , delay: , options: , animations: , completion: ) 通过此方法我们可以让动画持续播放。其中，delay参数表示延迟动画开始的秒数。 options参数是用于自定义动画的预定义选项数组。”

例如，我们让它延迟2秒并且一直重复，我们可以这么做：

UIView.animate(withDuration: 3.0, delay: 2.0, options: [.repeat], animations: {square.backgroundColor = .orangesquare.frame = CGRect(x: 400, y: 400, width: 100, height: 100)}, completion: nil)

运行的时候你就可以看到正方形在不断重复一个动作：

变换属性

swift提供了三个常用的图形变换方法，具体为：Scale（按比例扩大或缩小）、Rotate（旋转）、Translate（改变位置）

它们都申明在CGAffineTransform这个结构体里面，具体的用法如下：

UIView.animate(withDuration: 3.0) {square.backgroundColor = .orangelet scaleTransform = CGAffineTransform(scaleX: 2.0, y: 2.0) // 按比例放大2倍let rotateTransform = CGAffineTransform(rotationAngle: .pi) // 此处设定旋转角度，pi为180度，想要什么角度就进行简单的乘法或除法即可let translateTransform = CGAffineTransform(translationX: 200, y: 200) // 设定最终移动到哪一个位置let comboTransform = scaleTransform.concatenating(rotateTransform).concatenating(translateTransform) // 将所有效果都组合起来square.transform = comboTransform
}

运行的时候你将会看到：

使用identity来撤销刚刚实现的动画

在刚刚的示例里面我们改变了正方形的位置、颜色，还让它旋转到达中间，但是如果我们要在让它回去要怎么办呢？如果再写一遍相同的代码有些繁琐，CGAffineTransform提供了一个好用的属性identity来帮我们解决这个问题。

和一开始的方法一样，我们通过闭包来添加让正方形回到原位的动画：

UIView.animate(withDuration: 3.0, animations: {square.backgroundColor = .orangelet scaleTransform = CGAffineTransform(scaleX: 2.0, y: 2.0)let rotateTransform = CGAffineTransform(rotationAngle: .pi)let translateTransform = CGAffineTransform(translationX: 200, y: 200)let comboTransform = scaleTransform.concatenating(rotateTransform).concatenating(translateTransform)square.transform = comboTransform}) { (_) inUIView.animate(withDuration: 3.0) {square.transform = CGAffineTransform.identity // 注意identity只能撤销使用CGAffineTransform产生的效果，无法修改正方形的颜色}
}

运行一下你将会看到：

到此，简单的动画讲完啦。

深入学习动画效果

一篇文章是不能把所有的动画讲完的，如果你还想要知道更多的关于动画的知识，可以访问下面两个网址：

更多的animation，请访问：About Core Animation
更多有关CGAffineTransform的知识请访问：CGAffineTransform

后记

如果你喜欢我的文章欢迎来点赞、评论和收藏，如果你有任何不清楚的地方欢迎来和我探讨。?