swift使用transform 实现重复平移动画效果-kb88凯时官网登录

来自:网络
时间:2023-07-25
阅读:

摘要

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

这里面要梳理的逻辑就是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
        }
    }
返回顶部
顶部
网站地图