摘要

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

這裡面要梳理的邏輯就是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

        }

    }