FillMode詳解

首頁圖片.jpg

最近在學核心動畫的時候遇到了遇到了fillMode的屬性,除了kCAFillModeForwards比較理解意外,其他三個參數一臉蒙蔽,感覺沒什么區別,看官方文檔也沒看出個所以然,去網上查了一些資料如下:

kCAFillModeBackwards 這個和kCAFillModeForwards是相對的,就是在動畫開始前,你只要將動畫加入了一個layer,layer便立即進入動畫的初始狀態并等待動畫開始.你可以這樣設定測試代碼,將一個動畫加入一個layer的時候延遲5秒執行.然后就會發現在動畫沒有開始的時候,只要動畫被加入了layer,layer便處于動畫初始狀態

而網上所有的哥們都是照抄這句話,根本不理解啊有木有!后來通過查資料明白了其中的真理,刪除線中的話很容易把人帶到坑里面--!看到刪除線中的話我一直在延遲把layer加到動畫中,然后我就掉坑里面去了,后來想通了,應該是讓動畫延遲5秒執行(開始),這樣就能看出效果了。

在說fillMode之前首先要說說removedOnCompletion屬性

removedOnCompletion:默認為YES,代表動畫執行完畢后就從圖層上移除,圖形會恢復到動畫執行前的狀態。如果想讓圖層保持顯示動畫執行后的狀態,那就設置為NO,不過還要設置fillMode為kCAFillModeForwards

接下來說說fillMode屬性

fillMode:決定當前對象在非active時間段的行為.比如動畫開始之前,動畫結束之后

kCAFillModeRemoved 這個是默認值,也就是說當動畫開始前和動畫結束后,動畫對layer都沒有影響,動畫結束后,layer會恢復到之前的狀態(可以理解為動畫執行完成后移除)

kCAFillModeForwards 當動畫結束后,layer會一直保持著動畫最后的狀態

kCAFillModeBackwards 當在動畫開始前,你只要把layer加入到一個動畫中,layer便立即進入動畫的初始狀態并等待動畫開始.你可以這樣設定測試代碼,延遲3秒讓動畫開始,只要動畫被加入了layer,layer便處于動畫初始狀態

當點擊屏幕的時候讓動畫3秒后執行

核心代碼

//kCAFillModeForwards
CABasicAnimation * basicAnimation = [[CABasicAnimation alloc] init];
    basicAnimation.keyPath = @"position.y";
    basicAnimation.removedOnCompletion = NO;
    //beginTime : 動畫的開始時間
    //CACurrentMediaTime() : 圖層的當前時間
    //讓動畫延遲3秒執行
    basicAnimation.beginTime = CACurrentMediaTime()+3;
    basicAnimation.fillMode = kCAFillModeForwards;
    //動畫的開始位置
    basicAnimation.fromValue = @300;
    //動畫的結束位置
    basicAnimation.toValue = @500;
    //動畫持續時間
    basicAnimation.duration = 3;
    [self.layer addAnimation:basicAnimation forKey:nil];

效果

練習1.gif

核心代碼

CABasicAnimation * basicAnimation = [[CABasicAnimation alloc] init];
    basicAnimation.keyPath = @"position.y";
    //beginTime : 動畫的開始時間
    //CACurrentMediaTime() : 圖層的當前時間
    //讓動畫延遲3秒執行
    basicAnimation.beginTime = CACurrentMediaTime()+3;
    basicAnimation.fillMode = kCAFillModeBackwards;
    //動畫的開始位置
    basicAnimation.fromValue = @300;
    //動畫的結束位置
    basicAnimation.toValue = @500;
    //動畫持續時間
    basicAnimation.duration = 3;
    [self.layer addAnimation:basicAnimation forKey:nil];

效果

練習2.gif

相信大家從效果能看出來kCAFillModeForwards是在動畫開始之后layer迅速進入指定位置開始執行動畫并在removedOnCompletion = NO的前提下會停在動畫結束的最后位置,而kCAFillModeBackwards則是在動畫開始之前迅速進入指定狀態并在動畫開始后執行動畫,動畫結束后迅速返回到layer的本身位置

如果kCAFillModeForwards和kCAFillModeBackwards區分后那kCAFillModeBoth就很好理解了如果removedOnCompletion = NO那layer會在動畫開始之前就會迅速進入動畫的初始位置并在執行完動畫后停在動畫結束的位置,如果removedOnCompletion = YES那layer會在動畫開始之前就會迅速進入動畫的初始位置并在執行完動畫后迅速返回到layer的本身位置

代碼比較簡單,如果有需要源碼的同學請在評論區留言。
轉載請注明出處~~(尊重原創??)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容