Swift使用transform实现重复平移动画效果

Swift使⽤transform实现重复平移动画效果
摘要
要实现⼀组重复的动画，本质上就是找到动画开始点、结束点。

在动画结束的时候，触发开始点，持续这样的动作。

这⾥⾯要梳理的逻辑就是1.触发开始点和2.监听动画结束点。

这两个逻辑是实现重复动画的基础。

应⽤场景
将 imageView 等 UI 控件，设置成平移的动画，并且⼀直动画中。

transform 可以实现控件的平移，但是⽆法连续动画。

API 及语⾔
核⼼逻辑/代码
transform 可以将控件平移，为了达到连续动画，可使⽤递归⽅式实现。

动画实现
设置动画并开始
使⽤ UIView.animate(withDuration: , animations: , completion: ) 函数设置动画。

这个⽅法有开始动画事件，也有监听动画完成事件(completion ⽅法）
实现连续动画
在completion 中递归调⽤开始动画函数，达到连续动画的效果。

停⽌动画
设置⼀个全局的标⽰，来记录动画的状态，也可以通过更改这个状态来判断是否需要开始动画，⽐如设置 UI 控件的isHidden 属性，实现停⽌动画
细节
在开始动画的时候，就进⾏判断，如果isHidden为 true，则直接停⽌动画。

可以精准控制动画的次数。

在开始动画函数中设置闭包，可以在闭包中设置停⽌动画的代码等。

⽰例代码
重复 3 次平移动画，在每次动画开始前都判断self.guideImageView.isHidden, 在动画过程中，如果要停⽌动画，只需设置self.guideImageView.isHidden = false, 就停⽌动画。

func guideAnimations() {
// 动画执⾏ 3 次
var count = 3
// 开始动画
startAnimation {[weak self] in
guard let self = self else { return }
count -= 1
if count == 0 { self.guideImageView.isHidden = true }
}
}
// 设置并开始动画
func startAnimation(_ complete: @escaping ()->()) {
if self.guideImageView.isHidden { return }
UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut) {
self.guideImageView.transform = self.guideImageView.transform.translatedBy(x: -50, y: 0)
} completion: { [weak self](finish) in
// 动画结束时，将控件复原
guard let self = self else { return }
self.guideImageView.transform = self.guideImageView.transform.translatedBy(x: 50, y: 0)
// 先返回闭包，然后再执⾏动画函数
complete()
self.startAnimation(complete)
}
}
// 停⽌动画
func stopAnimation() {
if self.guideImageView.isHidden == false {
self.guideImageView.isHidden = true
}
}
到此这篇关于Swift使⽤transform 实现重复平移动画效果的⽂章就介绍到这了,更多相关transform 重复平移动画内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。