iOS中CALayer動(dòng)畫的暫停與繼續(xù)

此篇文章主要講述了CALayer與動(dòng)畫相關(guān)的一些操作屬性赋荆。

  • CALayer的說(shuō)明

image.png

從中我們可以看出CALayer遵循了三個(gè)代理協(xié)議混狠,其中主要說(shuō)說(shuō)NSSecureCodingCAMediaTiming
NSSecureCoding繼承自NSCodingNSSecureCodingNSCoding是一樣的室抽,除了在解碼時(shí)要同時(shí)指定key和要解碼的對(duì)象的類,如果要求的類和從文件中解碼出的對(duì)象的類不匹配,NSCoder會(huì)拋出異常,告訴你數(shù)據(jù)已經(jīng)被篡改了猎醇。
CAMediaTiming中包含了很多屬性

    /* The begin time of the object, in relation to its parent object, if
     * applicable. Defaults to 0. */
    
    public var beginTime: CFTimeInterval { get set }

    
    /* The basic duration of the object. Defaults to 0. */
    
    public var duration: CFTimeInterval { get set }

    
    /* The rate of the layer. Used to scale parent time to local time, e.g.
     * if rate is 2, local time progresses twice as fast as parent time.
     * Defaults to 1. */
    
    public var speed: Float { get set }

    
    /* Additional offset in active local time. i.e. to convert from parent
     * time tp to active local time t: t = (tp - begin) * speed + offset.
     * One use of this is to "pause" a layer by setting `speed' to zero and
     * `offset' to a suitable value. Defaults to 0. */
    
    public var timeOffset: CFTimeInterval { get set }

    
    /* The repeat count of the object. May be fractional. Defaults to 0. */
    
    public var repeatCount: Float { get set }

    
    /* The repeat duration of the object. Defaults to 0. */
    
    public var repeatDuration: CFTimeInterval { get set }

    
    /* When true, the object plays backwards after playing forwards. Defaults
     * to NO. */
    
    public var autoreverses: Bool { get set }

    
    /* Defines how the timed object behaves outside its active duration.
     * Local time may be clamped to either end of the active duration, or
     * the element may be removed from the presentation. The legal values
     * are `backwards', `forwards', `both' and `removed'. Defaults to
     * `removed'. */
    
    public var fillMode: String { get set }

beginTime 繼承CAMediaTiming協(xié)議的對(duì)象的起始時(shí)間
duration 基本動(dòng)畫的持續(xù)時(shí)間
speed動(dòng)畫的運(yùn)行速度,當(dāng)為0時(shí)會(huì)停止動(dòng)畫努溃,speed越大說(shuō)明動(dòng)畫執(zhí)行速度越快
timeOffset 動(dòng)畫的時(shí)間偏移硫嘶,也就是上次動(dòng)畫的暫停/繼續(xù) 距離本次動(dòng)畫的繼續(xù)/暫停的時(shí)間差
repeatCount 重復(fù)次數(shù)
repeatDuration重復(fù)的時(shí)間
autoreverses是否會(huì)回到原來(lái)的位置
fillMode
CAFillModeRemoved 這個(gè)是默認(rèn)值,也就是說(shuō)當(dāng)動(dòng)畫開始前和動(dòng)畫結(jié)束后,動(dòng)畫對(duì)layer都沒有影響,動(dòng)畫結(jié)束后,layer會(huì)恢復(fù)到之前的狀態(tài)
kCAFillModeForwards 當(dāng)動(dòng)畫結(jié)束后,layer會(huì)一直保持著動(dòng)畫最后的狀態(tài)
kCAFillModeBackwards 這個(gè)和kCAFillModeForwards是相對(duì)的,就是在動(dòng)畫開始前,你只要將動(dòng)畫加入了一個(gè)layer,layer便立即進(jìn)入動(dòng)畫的初始狀態(tài)并等待動(dòng)畫開始.你可以這樣設(shè)定試代碼,將一個(gè)動(dòng)畫加入一個(gè)layer的時(shí)候延遲5秒執(zhí)行.然后就會(huì)發(fā)現(xiàn)在動(dòng)畫沒有開始的時(shí)候,只要?jiǎng)赢嫳患尤肓薼ayer,layer便處于動(dòng)畫初始狀態(tài)
kCAFillModeBoth 理解了上面兩個(gè),這個(gè)就很好理解了,這個(gè)其實(shí)就是上面兩個(gè)的合成.動(dòng)畫加入后開始之前,layer便處于動(dòng)畫初始狀態(tài),動(dòng)畫結(jié)束后layer保持動(dòng)畫最后的狀態(tài).

  • 下面進(jìn)行實(shí)例演習(xí)
    做一個(gè)不停旋轉(zhuǎn)的動(dòng)畫,通過(guò)點(diǎn)擊事件控制動(dòng)畫的暫臀嗨埃或播放
    ///頭像旋轉(zhuǎn),開始動(dòng)畫
    fileprivate func beginAnimation() {
        
        let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
        rotateAnimation.fromValue = 0
        rotateAnimation.toValue = (Double.pi * 2)
        rotateAnimation.duration = 20
        rotateAnimation.repeatCount = MAXFLOAT
        singerImageView.layer.add(rotateAnimation, forKey: "")
    }

寫一個(gè)CALayer的分類沦疾,控制動(dòng)畫的暫停與繼續(xù)

extension CALayer {
    ///暫停動(dòng)畫
    func pauseAnimation() {
        //取出當(dāng)前時(shí)間,轉(zhuǎn)成動(dòng)畫暫停的時(shí)間
        let pausedTime = self.convertTime(CACurrentMediaTime(), from: nil)
        //設(shè)置動(dòng)畫運(yùn)行速度為0
        self.speed = 0.0;
        //設(shè)置動(dòng)畫的時(shí)間偏移量,指定時(shí)間偏移量的目的是讓動(dòng)畫定格在該時(shí)間點(diǎn)的位置
        self.timeOffset = pausedTime
    }
    ///恢復(fù)動(dòng)畫
    func resumeAnimation() {
        //獲取暫停的時(shí)間差
        let pausedTime = self.timeOffset
        self.speed = 1.0
        self.timeOffset = 0.0
        self.beginTime = 0.0
        //用現(xiàn)在的時(shí)間減去時(shí)間差,就是之前暫停的時(shí)間,從之前暫停的時(shí)間開始動(dòng)畫
        let timeSincePause = self.convertTime(CACurrentMediaTime(), from: nil) - pausedTime
        self.beginTime = timeSincePause
    }
}

效果圖如下:

animation.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末第队,一起剝皮案震驚了整個(gè)濱河市哮塞,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌凳谦,老刑警劉巖忆畅,帶你破解...
    沈念sama閱讀 206,214評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異尸执,居然都是意外死亡家凯,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門如失,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)肆饶,“玉大人,你說(shuō)我怎么就攤上這事岖常⊙蹦鳎” “怎么了?”我有些...
    開封第一講書人閱讀 152,543評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵竭鞍,是天一觀的道長(zhǎng)板惑。 經(jīng)常有香客問(wèn)我,道長(zhǎng)偎快,這世上最難降的妖魔是什么冯乘? 我笑而不...
    開封第一講書人閱讀 55,221評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮晒夹,結(jié)果婚禮上裆馒,老公的妹妹穿的比我還像新娘姊氓。我一直安慰自己,他們只是感情好喷好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評(píng)論 5 371
  • 文/花漫 我一把揭開白布翔横。 她就那樣靜靜地躺著,像睡著了一般梗搅。 火紅的嫁衣襯著肌膚如雪禾唁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,007評(píng)論 1 284
  • 那天无切,我揣著相機(jī)與錄音荡短,去河邊找鬼。 笑死哆键,一個(gè)胖子當(dāng)著我的面吹牛掘托,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播籍嘹,決...
    沈念sama閱讀 38,313評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼闪盔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了噩峦?” 一聲冷哼從身側(cè)響起锭沟,我...
    開封第一講書人閱讀 36,956評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎识补,沒想到半個(gè)月后族淮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,441評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡凭涂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評(píng)論 2 323
  • 正文 我和宋清朗相戀三年祝辣,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片切油。...
    茶點(diǎn)故事閱讀 38,018評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蝙斜,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出澎胡,到底是詐尸還是另有隱情孕荠,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評(píng)論 4 322
  • 正文 年R本政府宣布攻谁,位于F島的核電站稚伍,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏戚宦。R本人自食惡果不足惜个曙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望受楼。 院中可真熱鬧垦搬,春花似錦呼寸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至糟趾,卻和暖如春慌植,著一層夾襖步出監(jiān)牢的瞬間甚牲,已是汗流浹背义郑。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留丈钙,地道東北人非驮。 一個(gè)月前我還...
    沈念sama閱讀 45,467評(píng)論 2 352
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像雏赦,于是被迫代替她去往敵國(guó)和親劫笙。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果星岗,實(shí)現(xiàn)這些動(dòng)畫的過(guò)程并不復(fù)雜填大,今天將帶大家一窺ios動(dòng)畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,465評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果俏橘,實(shí)現(xiàn)這些動(dòng)畫的過(guò)程并不復(fù)雜允华,今天將帶大家一窺iOS動(dòng)畫全貌。在這里你可以看...
    F麥子閱讀 5,094評(píng)論 5 13
  • 在iOS實(shí)際開發(fā)中常用的動(dòng)畫無(wú)非是以下四種:UIView動(dòng)畫寥掐,核心動(dòng)畫靴寂,幀動(dòng)畫,自定義轉(zhuǎn)場(chǎng)動(dòng)畫召耘。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,078評(píng)論 1 23
  • Core Animation Core Animation百炬,中文翻譯為核心動(dòng)畫,它是一組非常強(qiáng)大的動(dòng)畫處理API污它,...
    45b645c5912e閱讀 3,015評(píng)論 0 21
  • CALayer - 在iOS中剖踊,你能看得見摸得著的東西基本上都是UIView,比如一個(gè)按鈕衫贬、一個(gè)文本標(biāo)簽德澈、一個(gè)文本...
    Hevin_Chen閱讀 1,134評(píng)論 0 10