摘要

要實(shí)現(xiàn)一組重復(fù)的動(dòng)畫(huà)，本質(zhì)上就是找到動(dòng)畫(huà)開(kāi)始點(diǎn)、結(jié)束點(diǎn)。在動(dòng)畫(huà)結(jié)束的時(shí)候，觸發(fā)開(kāi)始點(diǎn)，持續(xù)這樣的動(dòng)作。

這里面要梳理的邏輯就是1.觸發(fā)開(kāi)始點(diǎn)和2.監(jiān)聽(tīng)動(dòng)畫(huà)結(jié)束點(diǎn)。這兩個(gè)邏輯是實(shí)現(xiàn)重復(fù)動(dòng)畫(huà)的基礎(chǔ)。

應(yīng)用場(chǎng)景

將 imageView 等 UI 控件，設(shè)置成平移的動(dòng)畫(huà)，并且一直動(dòng)畫(huà)中。

transform 可以實(shí)現(xiàn)控件的平移，但是無(wú)法連續(xù)動(dòng)畫(huà)。

API 及語(yǔ)言

核心邏輯/代碼

transform 可以將控件平移，為了達(dá)到連續(xù)動(dòng)畫(huà)，可使用遞歸方式實(shí)現(xiàn)。

動(dòng)畫(huà)實(shí)現(xiàn)

設(shè)置動(dòng)畫(huà)并開(kāi)始
使用 UIView.animate(withDuration: , animations: , completion: ) 函數(shù)設(shè)置動(dòng)畫(huà)。

這個(gè)方法有開(kāi)始動(dòng)畫(huà)事件，也有監(jiān)聽(tīng)動(dòng)畫(huà)完成事件(completion 方法）

實(shí)現(xiàn)連續(xù)動(dòng)畫(huà)

在completion 中遞歸調(diào)用開(kāi)始動(dòng)畫(huà)函數(shù)，達(dá)到連續(xù)動(dòng)畫(huà)的效果。

停止動(dòng)畫(huà)

設(shè)置一個(gè)全局的標(biāo)示，來(lái)記錄動(dòng)畫(huà)的狀態(tài)，也可以通過(guò)更改這個(gè)狀態(tài)來(lái)判斷是否需要開(kāi)始動(dòng)畫(huà)，比如設(shè)置 UI 控件的isHidden屬性，實(shí)現(xiàn)停止動(dòng)畫(huà)

細(xì)節(jié)

在開(kāi)始動(dòng)畫(huà)的時(shí)候，就進(jìn)行判斷，如果isHidden為 true，則直接停止動(dòng)畫(huà)?？梢跃珳?zhǔn)控制動(dòng)畫(huà)的次數(shù)。

在開(kāi)始動(dòng)畫(huà)函數(shù)中設(shè)置閉包，可以在閉包中設(shè)置停止動(dòng)畫(huà)的代碼等。

示例代碼

重復(fù) 3 次平移動(dòng)畫(huà)，在每次動(dòng)畫(huà)開(kāi)始前都判斷self.guideImageView.isHidden, 在動(dòng)畫(huà)過(guò)程中，如果要停止動(dòng)畫(huà)，只需設(shè)置 self.guideImageView.isHidden = false, 就停止動(dòng)畫(huà)。

func guideAnimations() {
        // 動(dòng)畫(huà)執(zhí)行 3 次
        var count = 3
        // 開(kāi)始動(dòng)畫(huà)
        startAnimation {[weak self] in
            guard let self = self else { return }
            count -= 1
            if count == 0 { self.guideImageView.isHidden = true }
        }
    }
    
    // 設(shè)置并開(kāi)始動(dòng)畫(huà)
    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
            // 動(dòng)畫(huà)結(jié)束時(shí)，將控件復(fù)原
            guard let self = self else { return }
            self.guideImageView.transform = self.guideImageView.transform.translatedBy(x: 50, y: 0)
            // 先返回閉包，然后再執(zhí)行動(dòng)畫(huà)函數(shù)
            complete()
            self.startAnimation(complete)
        }
    }
    
    // 停止動(dòng)畫(huà)
    func stopAnimation() {
        if self.guideImageView.isHidden == false {
            self.guideImageView.isHidden = true
        }
    }

到此這篇關(guān)于Swift使用transform 實(shí)現(xiàn)重復(fù)平移動(dòng)畫(huà)效果的文章就介紹到這了,更多相關(guān)transform 重復(fù)平移動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論