Core Animation_0 - UIView Animat

一、
对于iOS的动画，我们都并不陌生，最简单的莫过于UIView的Animation:

})```, 在block内写上变化的代码。

我想这个方法应该是我们第一个使用的动画方法。

相类似的方法还有：

1）、```animate(withDuration duration: TimeInterval, animations: @escaping () -> Swift.Void, completion: ((Bool) -> Swift.Void)? = nil)```
参数都很简单，不做解释，最后一个参数是回调，就是动画完成后需要处理的事情。

2）、```animate(withDuration duration: TimeInterval, delay: TimeInterval, options: UIViewAnimationOptions = [], animations: @escaping () -> Swift.Void, completion: ((Bool) -> Swift.Void)? = nil)```
在该方法当中有个参数需要注意，就是options参数，该参数接受一个数组，数组的值是```UIViewAnimationOptions```类型，具体会有什么样的效果可以自行实践。

3）、```animate(withDuration duration: TimeInterval, delay: TimeInterval, usingSpringWithDamping dampingRatio: CGFloat, initialSpringVelocity velocity: CGFloat, options: UIViewAnimationOptions = [], animations: @escaping () -> Swift.Void, completion: ((Bool) -> Swift.Void)? = nil)```
该方法的参数与前面的方法多了两参数：usingSpringWithDamping、initialSpringVelocity，其中usingSpringWithDamping是用来的控制弹跳的次数，值越接近0弹跳的次数越多越厉害，值越接近1弹跳的次数越少。initialSpringVelocity是用来控制动画的速度的，值越大速度越快。



二、对于UIView来说，并不是所有的属性都可以执行动画，到底有哪几个属性是可动画的？如下：

bounds```

frame```

center```

backgroundColor```

alpha```

transform```
前面5个属性都是比较容易理解的，最后一个是仿射变换，就是用来做UI的旋转、缩放动画的，后面还会讲到。

三、前面有提到过Animation Options这个参数，```
UIViewAnimationOptions```这个结构体的值有好几个

1、首先我们来看一看这个```
repeat```，如果添加了这个参数，我们的动画将会重复。

self.redView.center.x -= view.bounds.width```

UIView.animate(withDuration: 0.5, delay: 03, options: .repeat, animations: {
            self.redView.center.x += self.view.bounds.width
        }, completion: nil)```


![0.gif](https://img.haomeiwen.com/i1458399/eb93521405783a67.gif?imageMogr2/auto-orient/strip)
从这段代码中我们可以看到，我们定义的这个redView从左边屏幕外移动到屏幕中间，当动画结束的时候，又从从左边屏幕外移动到屏幕中间，这样一直循环着。不过有没有发现这个动画很僵硬，对没错，是很僵硬。接下来给```
.repeat```添加一个组合```
.autoreverse```

然后我们再来看看效果

UIView.animate(withDuration: 0.5, delay: 03, options: [.repeat, .autoreverse], animations: {
self.redView.center.x += self.view.bounds.width
}, completion: nil)是不是好多了。
.autoreverse```的作用是让动画反向，也就是说当redView动画进入到终点位置的时候，还会再执行一个反向动画，这样之后再回到终点位置。

1.gif

.autoreverse```只会与```
.repeat```组合，或者单独使用。



四、动画缓冲
之前那动画都是突然启动和突然停止的，而在现实中是慢慢启动和停止的。接下来我们这样实现它。

1、首先来看看，所可能需要用到的选项：
1）、.linear：这个选项使动画没有加速或减速。
2）、.curveEaseIn：使动画在开始的时候提速，结束的时候不减速。
3）、.curveEaseOut：使动画在开始的时候不加速，结束的时候减速。
4）、.curveEaseInOut：使动画在开始的时候加速，结束的时候减速。

加上.curveEaseInOut，效果会不一样。

UIView.animate(withDuration: 0.5, delay: 03, options: [.repeat, .autoreverse, .curveEaseInOut], animations: {
self.redView.center.x += self.view.bounds.width
}, completion: nil)```

更多详细的讲解，关注我的微信公众号：01狂魔。

1458399-40213b8d9665ddd3.jpg