美文网首页iOS OC 学习手册
Swift-使用transform 实现重复平移动画

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

作者: 我为双鱼狂 | 来源:发表于2021-07-20 21:14 被阅读0次

    摘要

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

    这里面要梳理的逻辑就是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 实现重复平移动画

        本文链接:https://www.haomeiwen.com/subject/aswrmltx.html