Swift使用transform 實現重復平移動畫效果

Posted on by

摘要

要實現一組重復的動畫，本質上就是找到動畫開始點、結束點。在動畫結束的時候，觸發開始點，持續這樣的動作。

這裡面要梳理的邏輯就是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 重復平移動畫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：