2. 程式人生 > >iOS動畫（Core Animation）總結

iOS動畫（Core Animation）總結

阿新 • • 發佈：2019-02-10

一、簡介

iOS動畫主要是指Core Animation框架。官方使用文件地址為：Core Animation Guide。Core Animation是iOS和macOS平臺上負責圖形渲染與動畫的基礎框架。Core Animation可以作用與動畫檢視或者其他可視元素，為你完成了動畫所需的大部分繪幀工作。你只需要配置少量的動畫引數（如開始點的位置和結束點的位置）即可使用Core Animation的動畫效果。Core Animation將大部分實際的繪圖任務交給了圖形硬體來處理，圖形硬體會加速圖形渲染的速度。這種自動化的圖形加速技術讓動畫擁有更高的幀率並且顯示效果更加平滑，不會加重CPU的負擔而影響程式的執行速度。

二、Core Animation類圖以及常用欄位

Core Animation類的繼承關係圖

1595403-cb862acfb4d76c35.jpg

常用屬性

duration : 動畫的持續時間

beginTime : 動畫的開始時間

repeatCount : 動畫的重複次數

autoreverses : 執行的動畫按照原動畫返回執行

timingFunction : 控制動畫的顯示節奏系統提供五種值選擇，分別是：

  • kCAMediaTimingFunctionLinear 線性動畫

  • kCAMediaTimingFunctionEaseIn 先快後慢

  • kCAMediaTimingFunctionEaseOut 先慢後快

  • kCAMediaTimingFunctionEaseInEaseOut 先慢後快再慢

  • kCAMediaTimingFunctionDefault 預設，也屬於中間比較快

delegate ： 動畫代理。能夠檢測動畫的執行和結束。

1 2 3 4 @interface NSObject (CAAnimationDelegate) - (void)animationDidStart:(CAAnimation *)anim; - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag; @end

path：關鍵幀動畫中的執行路徑

type：過渡動畫的動畫型別，系統提供了四種過渡動畫。

  • kCATransitionFade 漸變效果

  • kCATransitionMoveIn 進入覆蓋效果

  • kCATransitionPush 推出效果

  • kCATransitionReveal 揭露離開效果

  • subtype : 過渡動畫的動畫方向

  • kCATransitionFromRight 從右側進入

  • kCATransitionFromLeft 從左側進入

  • kCATransitionFromTop 從頂部進入

  • kCATransitionFromBottom 從底部進入

三、iOS動畫的呼叫方式

第一種：UIView 程式碼塊呼叫

1 2 3 4 5 6 _demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50); [UIView animateWithDuration:1.0f animations:^{ _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50); } completion:^(BOOL finished) { _demoView.frame = CGRectMake(SCREEN_WIDTH/2-25, SCREEN_HEIGHT/2-50, 50, 50); }];

第二種：UIView [begin commit]模式

1 2 3 4 5 _demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50); [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:1.0f]; _demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50); [UIView commitAnimations];

第三種：使用Core Animation中的類

1 2 3 4 5 CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"]; anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)]; anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)]; anima.duration = 1.0f; [_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

四、iOS動畫的使用

4.1：基礎動畫（CABaseAnimation）

重要屬性

  • fromValue：keyPath對應的初始值

  • toValue：keyPath對應的結束值

基礎動畫主要提供了對於CALayer物件中的可變屬性進行簡單動畫的操作。比如：位移、透明度、縮放、旋轉、背景色等等。

效果演示：

1595403-3aef598c22bd2ee3.gif

baseAnimation

位移動畫程式碼演示：

1 2 3 4 5 6 7 8 //使用CABasicAnimation建立基礎動畫 CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"]; anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)]; anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)]; anima.duration = 1.0f; //anima.fillMode = kCAFillModeForwards; //anima.removedOnCompletion = NO; [_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

注意點

如果fillMode=kCAFillModeForwards和removedOnComletion=NO，那麼在動畫執行完畢後，圖層會保持顯示動畫執行後的狀態。但在實質上，圖層的屬性值還是動畫執行前的初始值，並沒有真正被改變。

4.2：關鍵幀動畫（CAKeyframeAnimation）

CAKeyframeAnimation和CABaseAnimation都屬於CAPropertyAnimatin的子類。CABaseAnimation只能從一個數值（fromValue）變換成另一個數值（toValue）,而CAKeyframeAnimation則會使用一個NSArray儲存一組關鍵幀。

重要屬性

  • values：就是上述的NSArray物件。裡面的元素稱為”關鍵幀”(keyframe)。動畫物件會在指定的時間(duration)內，依次顯示values陣列中的每一個關鍵幀

  • path：可以設定一個CGPathRef\CGMutablePathRef,讓層跟著路徑移動。path只對CALayer的anchorPoint和position起作用。如果你設定了path，那麼values將被忽略。

  • keyTimes：可以為對應的關鍵幀指定對應的時間點,其取值範圍為0到1.0,keyTimes中的每一個時間值都對應values中的每一幀.當keyTimes沒有設定的時候,各個關鍵幀的時間是平分的。

效果演示：

1595403-e5ed00f6e6971de8.gif

關鍵幀動畫

圓形路徑動畫程式碼演示：

1 2 3 4 5 CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"]; UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH/2-100, SCREEN_HEIGHT/2-100, 200, 200)]; anima.path = path.CGPath; anima.duration = 2.0f; [_demoView.layer addAnimation:anima forKey:@"pathAnimation"];

說明：CABasicAnimation可看做是最多隻有2個關鍵幀的CAKeyframeAnimation

4.3：組動畫（CAAnimationGroup）

CAAnimation的子類，可以儲存一組動畫物件，將CAAnimationGroup物件加入層後，組中所有動畫物件可以同時併發執行。

重要屬性

  • animations: 用來儲存一組動畫物件的NSArray

效果演示：

1595403-36a23c5f7e244c45.gif

組動畫

組動畫程式碼演示：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@"position"]; NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)]; NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)]; NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)]; NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)]; NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)]; NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)]; anima1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil]; //縮放動畫 CABasicAnimation *anima2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; anima2.fromValue = [NSNumber numberWithFloat:0.8f]; anima2.toValue = [NSNumber numberWithFloat:2.0f]; //旋轉動畫 CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; anima3.toValue = [NSNumber numberWithFloat:M_PI*4]; //組動畫 CAAnimationGroup *groupAnimation = [CAAnimationGroup animation]; groupAnimation.animations = [NSArray arrayWithObjects:anima1,anima2,anima3, nil]; groupAnimation.duration = 4.0f; [_demoView.layer addAnimation:groupAnimation forKey:@"groupAnimation"];

4.4：過渡動畫（CATransition）

CAAnimation的子類，用於做過渡動畫或者轉場動畫，能夠為層提供移出螢幕和移入螢幕的動畫效果。

重要屬性

  • type：動畫過渡型別

Apple 官方的SDK其實只提供了四種過渡效果。

  • kCATransitionFade 漸變效果

  • kCATransitionMoveIn 進入覆蓋效果

  • kCATransitionPush 推出效果

  • kCATransitionReveal 揭露離開效果

私有API提供了其他很多非常炫的過渡動畫，比如@"cube"、@"suckEffect"、@"oglFlip"、 @"rippleEffect"、@"pageCurl"、@"pageUnCurl"、@"cameraIrisHollowOpen"、@"cameraIrisHollowClose"等。

注意點

私有api，不建議開發者們使用。因為蘋果公司不提供維護，並且有可能造成你的app稽核不通過。

  • subtype：動畫過渡方向

  • kCATransitionFromRight 從右側進入

  • kCATransitionFromLeft 從左側進入

  • kCATransitionFromTop 從頂部進入

  • kCATransitionFromBottom 從底部進入

  • startProgress：動畫起點(在整體動畫的百分比)

  • endProgress：動畫終點(在整體動畫的百分比)

效果演示：

1595403-7b2c4e8bae15a5f2.gif

4.5：綜合案例

4.5.1 ： 仿Path選單效果

效果演示：

1595403-8addb269b4318e86.gif

仿Path選單效果

動畫解析：

1、點選紅色按鈕，紅色按鈕旋轉。（旋轉動畫）

2、黑色小按鈕依次彈出，並且帶有旋轉效果。（位移動畫、旋轉動畫、組動畫）

3、點選黑色小按鈕，其他按鈕消失，被點選的黑色按鈕變大變淡消失。（縮放動畫、alpha動畫、組動畫）

博主的話：程式碼過多，這裡不做演示。文章最後提供程式碼下載地址。

4.5.2： 仿釘釘選單效果

效果演示：

1595403-bbf63b96a31b7c1c.gif

仿釘釘選單效果

看上去挺炫的，其實實現很簡單，就是位移動畫+縮放動畫。

4.5.3： 點贊煙花效果動畫

效果演示：

1595403-7722f487cbc2d268.gif

點贊煙花效果動畫

這裡其實只有按鈕變大效果使用的縮放動畫。煙花效果 使用的是一種比較特殊的動畫--粒子動畫。

一個粒子系統一般有兩部分組成：

1、CAEmitterCell：可以看作是單個粒子的原型（例如，一個單一的粉撲在一團煙霧）。當散發出一個粒子，UIKit根據這個發射粒子和定義的基礎上建立一個隨機粒子。此原型包括一些屬性來控制粒子的圖片，顏色，方向，運動，縮放比例和生命週期。

2、CAEmitterLayer：主要控制發射源的位置、尺寸、發射模式、發射源的形狀等等。

以上兩個類的屬性還是比較多的，這裡就不細講了。大家可以google一下，詳細的瞭解吧。

五、總結

任何複雜的動畫其實都是由一個個簡單的動畫組裝而成的，只要我們善於分解和組裝，我們就能實現出滿意的效果。動畫其實也不是那麼難。

相關推薦

iOS動畫（Core Animation）總結

一、簡介 iOS動畫主要是指Core Animation框架。官方使用文件地址為：Core Animation Guide。Core Animation是iOS和macOS平臺上負責圖形渲染與動畫的基礎框架。Core Animation可以作用與動畫檢視或者其他可視元素，

iOS動畫（Core Animation）使用

#import <Foundation/Foundation.h> @interface AnimationManager : NSObject /* 閃爍動畫 * time:閃爍間隔 * repeatCount = MAXFLOAT（永久閃爍）重複次數 */ + (CABasic

Android 屬性動畫（Property Animation） 全然解析 （上）

顏色 valid 全部 加速度 ext target ng- 點擊 save 轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/380674751、概述Android提供了幾種動畫類型：View Anima

Android 屬性動畫（Property Animation） 完全解析 （上）【轉】

轉載請標明出處：http://blog.csdn.net/lmj623565791/article/details/38067475 1、概述 Android提供了幾種動畫型別：View Animation 、Drawable Animation 、Property Anima

屬性動畫（property animation） &重複執行

Android中的動畫分為檢視動畫(View Animation)即Tween Animation（補間動畫）、屬性動畫（Property Animation）以及Drawable動畫即Frame Animation（幀動畫）。從Android 3.0(API

Android 屬性動畫（Property Animation） 完全解析 （上）

目錄(?)[+] 1、概述 Android提供了幾種動畫型別：View Animation 、Drawable Animation 、Property Animation 。View Animation相當簡單，不過只能支援簡單的縮放、平移、旋轉、透明度基本的動畫，

Android過渡動畫（Transition Animation）

本篇部落格記錄一下Android中過渡動畫的用法。 過渡動畫是Android 4.4引入的新的動畫框架，它本質上仍是屬性動畫， 但對屬性動畫做了一層封裝，以方便開發者實現Activity或者View的過渡動畫效果。 和屬性動畫相比，過渡動畫最大的不同是需要

Android 幀動畫（Frame Animation） 動畫停止在第一幀

專案中遇到的問題： 需求： 做一個聊天頁面，要求播放語音時，有一個類似於喇叭的動畫，從小到大不停迴圈，語音播放完，動畫停止在第一幀。當點選正在播放的語音時，語音停止，動畫回覆到第一幀（回覆到第一幀是難點） 實現：用Frame Animation   可以在Java程式碼中新

Android 屬性動畫（Property Animation）一

1、概述 Android提供了幾種動畫型別：View Animation 、Drawable Animation 、Property Animation 。View Animation相當簡單，不過只能支援簡單的縮放、平移、旋轉、透明度基本的動畫，且有一定的侷限

iOS--------如何在ios中運用core animation暫停和繼續動畫

核心程式碼如下 //暫停layer上面的動畫 - (void)pauseLayer:(CALayer*)layer { CFTimeInterval pausedTime = [laye

MySQL二進制日誌（binary log）總結

何事 mysqld 支持 col mysql數據庫 內存大小 報錯 正常 ora 本文出處：http://www.cnblogs.com/wy123/p/7182356.html （保留出處並非什麽原創作品權利，本人拙作還遠遠達不到，僅僅是為了鏈接到原文，因為後續對可

單頁面跳轉添加返回和跳轉動畫（仿app） 只對單頁面和跳轉有用，我用的是angualr，有不會的可以私信問我。

hist page func margin consola color -s tar pla p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #596972 } p.p2 { mar

第二次java實習筆試（小公司）總結

font 結果 原理 chm 優化 二次 實習 多少 而且 映象最深刻的是第一題， 34的17次方對6取余， 結果是多少？ A.2 B.3 C.4 D.5 看到題我蒙了一下，，要算出來嗎？..17次方還是算了吧，而且還沒給草稿紙。 那麽，怎麽辦呢？ 34除以6的余數為4，，

現代軟體工程第二次結對程式設計（統計詞頻）總結

作業要求及Github連結 作業要求：文字檔案中英語單詞的頻率 專案原始碼：統計詞頻 合作方式 有了第一次結對程式設計的經驗，我們這次有意識的採取了多種合作方式： 結對程式設計，我和隊友共用一臺顯示器和電腦完成了最簡單的-c -f標籤的處理和輸入輸出統一。 各自獨立程式設計，我和隊友各自獨立

Qt開場動畫（gif效果）的實現

    Qt自己提供了一個開場動畫的類QSplashScreen，可以實現簡單的圖片開場的效果，但是是靜態的圖片。 Qt播放gif格式圖片是利用的QMovie實現的。因此利用QMoviee和QTimer,每隔一段時間將QSplashScreen重繪一次，來實現gi

thinking in java (十八) ----- 集合之Map（HashMap HashTable）總結

Map框架圖 Map概括 Map是鍵值對對映的抽象介面 AbstractMap實現了Map中的大部分介面，減少了Map實現類的重複程式碼 HashMap是基於拉鍊法實現的散列表，一般使用在單執行緒程式中 HashTable是基於拉鍊法

vue——32-動畫-列表動畫（transition-group）

css li { border: 1px dashed red; margin: 5px; line-height: 35px; list-style: none;

實戰 | 使用揭露動畫（Reveal Effect）做一個絲滑的Activity轉場動畫

提筆之際（附總體思路） 最近跟幾個小夥伴在實踐一個專案，考慮到介面效果，我們決定使用揭露動畫作為Activity的轉場動畫。 這裡主要是我負責這部分的實現。 話說之前是沒接

如何在網頁中做出炫酷的動畫（使用Spine）

屬性動畫和幀動畫 web中的動畫主要分為屬性動畫和幀動畫兩種，屬性動畫是通過改變dom元素的屬性如寬高、字型大小或者transform的scale、rotate等屬性，在一段時間內，屬性值按照時間函式變化來實現的。幀動畫是通過在一段時間內按照一定速率替換圖片的方式來實現，這個和傳統的動畫方式一致。 幀動畫

[OI]Noip 2018（普及組）總結

應該 str ora clu ios 老師 失誤 play max 考砸了，還有原諒我代碼十分有限的可讀性。 從一年前初一九月到現在18年10月接觸OI已經有一年了。幾次模擬賽也自我感覺良好，都過了一等的線，自己考試的心態當時也放的挺平。但也沒想到會考出這麽差的分數。