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

Swift-使用transform实现重复平移动画,第1张

概述摘要 要实现一组重复动画,本质上就是找到动画开始点、结束点。在动画结束的时候,触发开始点,持续这样的动作。 这里面要梳理的逻辑就是1.触发开始点和2.监听动画结束点。这两个逻辑是实现重复动画的基础。

摘要

要实现一组重复的动画,本质上就是找到动画开始点、结束点。在动画结束的时候,触发开始点,持续这样的动作。

这里面要梳理的逻辑就是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 实现重复平移动画全部内容,希望文章能够帮你解决Swift-使用transform 实现重复平移动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/998899.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存