動畫速度(緩衝 10.1)

来源:http://www.cnblogs.com/EchoHG/archive/2017/10/05/7628737.html
-Advertisement-
Play Games

動畫速度 動畫實際上就是一段時間內的變化,這就暗示了變化一定是隨著某個特定的速率進行。速率由以下公式計算而來: 這裡的變化可以指的是一個物體移動的距離,時間指動畫持續的時長,用這樣的一個移動可以更加形象的描述(比如position和bounds屬性的動畫),但實際上它應用於任意可以做動畫的屬性(比如 ...


動畫速度

動畫實際上就是一段時間內的變化,這就暗示了變化一定是隨著某個特定的速率進行。速率由以下公式計算而來:

velocity = change / time

這裡的變化可以指的是一個物體移動的距離,時間指動畫持續的時長,用這樣的一個移動可以更加形象的描述(比如positionbounds屬性的動畫),但實際上它應用於任意可以做動畫的屬性(比如coloropacity)。

上面的等式假設了速度在整個動畫過程中都是恆定不變的(就如同第八章“顯式動畫”的情況),對於這種恆定速度的動畫我們稱之為“線性步調”,而且從技術的角度而言這也是實現動畫最簡單的方式,但也是完全不真實的一種效果。

考慮一個場景,一輛車行駛在一定距離內,它並不會一開始就以60mph的速度行駛,然後到達終點後突然變成0mph。一是因為需要無限大的加速度(即使是最好的車也不會在0秒內從0跑到60),另外不然的話會幹死所有乘客。在現實中,它會慢慢地加速到全速,然後當它接近終點的時候,它會慢慢地減速,直到最後停下來。

那麼對於一個掉落到地上的物體又會怎樣呢?它會首先停在空中,然後一直加速到落到地面,然後突然停止(然後由於積累的動能轉換伴隨著一聲巨響,砰!)。

 

現實生活中的任何一個物體都會在運動中加速或者減速。那麼我們如何在動畫中實現這種加速度呢?一種方法是使用物理引擎來對運動物體的摩擦和動量來建模,然而這會使得計算過於複雜。我們稱這種類型的方程為緩衝函數,幸運的是,Core Animation內嵌了一系列標準函數提供給我們使用。

##CAMediaTimingFunction

那麼該如何使用緩衝方程式呢?首先需要設置CAAnimationtimingFunction屬性,是CAMediaTimingFunction類的一個對象。如果想改變隱式動畫的計時函數,同樣也可以使用CATransaction+setAnimationTimingFunction:方法。

這裡有一些方式來創建CAMediaTimingFunction,最簡單的方式是調用+timingFunctionWithName:的構造方法。這裡傳入如下幾個常量之一:

1 kCAMediaTimingFunctionLinear 
2 kCAMediaTimingFunctionEaseIn 
3 kCAMediaTimingFunctionEaseOut 
4 kCAMediaTimingFunctionEaseInEaseOut
5 kCAMediaTimingFunctionDefault

 

kCAMediaTimingFunctionLinear選項創建了一個線性的計時函數,同樣也是CAAnimationtimingFunction屬性為空時候的預設函數。線性步調對於那些立即加速並且保持勻速到達終點的場景會有意義(例如射出槍膛的子彈),但是預設來說它看起來很奇怪,因為對大多數的動畫來說確實很少用到。

kCAMediaTimingFunctionEaseIn常量創建了一個慢慢加速然後突然停止的方法。對於之前提到的自由落體的例子來說很適合,或者比如對準一個目標的導彈的發射。

kCAMediaTimingFunctionEaseOut則恰恰相反,它以一個全速開始,然後慢慢減速停止。它有一個削弱的效果,應用的場景比如一扇門慢慢地關上,而不是砰地一聲。

kCAMediaTimingFunctionEaseInEaseOut創建了一個慢慢加速然後再慢慢減速的過程。這是現實世界大多數物體移動的方式,也是大多數動畫來說最好的選擇。如果只可以用一種緩衝函數的話,那就必須是它了。那麼你會疑惑為什麼這不是預設的選擇,實際上當使用UIView的動畫方法時,他的確是預設的,但當創建CAAnimation的時候,就需要手動設置它了。

最後還有一個kCAMediaTimingFunctionDefault,它和kCAMediaTimingFunctionEaseInEaseOut很類似,但是加速和減速的過程都稍微有些慢。它和kCAMediaTimingFunctionEaseInEaseOut的區別很難察覺,可能是蘋果覺得它對於隱式動畫來說更適合(然後對UIKit就改變了想法,而是使用kCAMediaTimingFunctionEaseInEaseOut作為預設效果),雖然它的名字說是預設的,但還是要記住當創建顯式CAAnimation它並不是預設選項(換句話說,預設的圖層行為動畫用kCAMediaTimingFunctionDefault作為它們的計時方法)。

你可以使用一個簡單的測試工程來實驗一下(清單10.1),在運行之前改變緩衝函數的代碼,然後點擊任何地方來觀察圖層是如何通過指定的緩衝移動的。

清單10.1 緩衝函數的簡單測試

 1 @interface ViewController ()
 2 
 3 @property (nonatomic, strong) CALayer *colorLayer;
 4 
 5 @end
 6 
 7 @implementation ViewController
 8 
 9 - (void)viewDidLoad
10 {
11     [super viewDidLoad];
12     //create a red layer
13     self.colorLayer = [CALayer layer];
14     self.colorLayer.frame = CGRectMake(0, 0, 100, 100);
15     self.colorLayer.position = CGPointMake(self.view.bounds.size.width/2.0, self.view.bounds.size.height/2.0);
16     self.colorLayer.backgroundColor = [UIColor redColor].CGColor;
17     [self.view.layer addSublayer:self.colorLayer];
18 }
19 
20 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
21 {
22     //configure the transaction
23     [CATransaction begin];
24     [CATransaction setAnimationDuration:1.0];
25     [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
26     //set the position
27     self.colorLayer.position = [[touches anyObject] locationInView:self.view];
28     //commit transaction
29     [CATransaction commit];
30 }
31 
32 @end
View Code

 

##UIView的動畫緩衝

UIKit的動畫也同樣支持這些緩衝方法的使用,儘管語法和常量有些不同,為了改變UIView動畫的緩衝選項,給options參數添加如下常量之一:

1 UIViewAnimationOptionCurveEaseInOut 
2 UIViewAnimationOptionCurveEaseIn 
3 UIViewAnimationOptionCurveEaseOut 
4 UIViewAnimationOptionCurveLinear

 

它們和CAMediaTimingFunction緊密關聯,UIViewAnimationOptionCurveEaseInOut是預設值(這裡沒有kCAMediaTimingFunctionDefault相對應的值了)。

具體使用方法見清單10.2(註意到這裡不再使用UIView額外添加的圖層,因為UIKit的動畫並不支持這類圖層)。

清單10.2 使用UIKit動畫的緩衝測試工程

@interface ViewController ()

@property (nonatomic, strong) UIView *colorView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //create a red layer
    self.colorView = [[UIView alloc] init];
    self.colorView.bounds = CGRectMake(0, 0, 100, 100);
    self.colorView.center = CGPointMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 2);
    self.colorView.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.colorView];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //perform the animation
    [UIView animateWithDuration:1.0 delay:0.0
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^{
                            //set the position
                            self.colorView.center = [[touches anyObject] locationInView:self.view];
                        }
                     completion:NULL];

}

@end
View Code

緩衝和關鍵幀動畫

或許你會回想起第八章裡面顏色切換的關鍵幀動畫由於線性變換的原因(見清單8.5)看起來有些奇怪,使得顏色變換非常不自然。為了糾正這點,我們來用更加合適的緩衝方法,例如kCAMediaTimingFunctionEaseIn,給圖層的顏色變化添加一點脈衝效果,讓它更像現實中的一個彩色燈泡。

我們不想給整個動畫過程應用這個效果,我們希望對每個動畫的過程重覆這樣的緩衝,於是每次顏色的變換都會有脈衝效果。

CAKeyframeAnimation有一個NSArray類型的timingFunctions屬性,我們可以用它來對每次動畫的步驟指定不同的計時函數。但是指定函數的個數一定要等於keyframes數組的元素個數減一,因為它是描述每一幀之間動畫速度的函數。

在這個例子中,我們自始至終想使用同一個緩衝函數,但我們同樣需要一個函數的數組來告訴動畫不停地重覆每個步驟,而不是在整個動畫序列只做一次緩衝,我們簡單地使用包含多個相同函數拷貝的數組就可以了(見清單10.3)。

運行更新後的代碼,你會發現動畫看起來更加自然了。

清單10.3 對CAKeyframeAnimation使用CAMediaTimingFunction

 1 @interface ViewController ()
 2 
 3 @property (nonatomic, weak) IBOutlet UIView *layerView;
 4 @property (nonatomic, weak) IBOutlet CALayer *colorLayer;
 5 
 6 @end
 7 
 8 @implementation ViewController
 9 
10 - (void)viewDidLoad
11 {
12     [super viewDidLoad];
13     //create sublayer
14     self.colorLayer = [CALayer layer];
15     self.colorLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
16     self.colorLayer.backgroundColor = [UIColor blueColor].CGColor;
17     //add it to our view
18     [self.layerView.layer addSublayer:self.colorLayer];
19 }
20 
21 - (IBAction)changeColor
22 {
23     //create a keyframe animation
24     CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
25     animation.keyPath = @"backgroundColor";
26     animation.duration = 2.0;
27     animation.values = @[
28                          (__bridge id)[UIColor blueColor].CGColor,
29                          (__bridge id)[UIColor redColor].CGColor,
30                          (__bridge id)[UIColor greenColor].CGColor,
31                          (__bridge id)[UIColor blueColor].CGColor ];
32     //add timing function
33     CAMediaTimingFunction *fn = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn];
34     animation.timingFunctions = @[fn, fn, fn];
35     //apply animation to layer
36     [self.colorLayer addAnimation:animation forKey:nil];
37 }
38 
39 @end
View Code

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Js 的射擊小游戲 玩法按下求 技能準備 點擊左鍵射擊,射擊到後面的球得分 代碼如下:直接粘到html文件中即可暢玩: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset ...
  • Android Studio(2.3.3) 在給代碼混淆時,提示: 簡單說就是找不到"aapt_rules.txt"這個文件,解決方法也很簡單: 1、菜單欄選擇 build clean project 2、重新打包(build) 這裡只列出解決方法,詳細的說明請看以下這篇文章: http://blo ...
  • iOS9 發佈後,產生了一個使 App Thinning 無法正常運行的 bug。在iOS9.0.2 版本中,這個 bug 已經被修複,App Thinning 已經可以正常使用。當你從應用商店(App Store)下載應用時,請註意這點。iOS9 推出之後,大受歡迎。僅僅數周,已經有超過半數的 i ...
  • 之前沒有設置過打包的命名,每次打包都是預設的"app realease.apk",之後手動修改名字來顯示出它是一個新版本。 晚上學習瞭如何配置打包名稱,很簡單,修改build.gradle里的代碼就行。 詳細記錄如下: 1、打開app這個directory下的build.gradle 2、定義打包時 ...
  • 軟體繪圖 術語繪圖通常在Core Animation的上下文中指代軟體繪圖(意即:不由GPU協助的繪圖)。在iOS中,軟體繪圖通常是由Core Graphics框架完成來完成。但是,在一些必要的情況下,相比Core Animation和OpenGL,Core Graphics要慢了不少。 軟體繪圖不 ...
  • 物理模擬 即使使用了基於定時器的動畫來複制第10章中關鍵幀的行為,但還是會有一些本質上的區別:在關鍵幀的實現中,我們提前計算了所有幀,但是在新的解決方案中,我們實際上實在按需要在計算。意義在於我們可以根據用戶輸入實時修改動畫的邏輯,或者和別的實時動畫系統例如物理引擎進行整合。 Chipmunk 我們 ...
  • 自定義緩衝函數 在第八章中,我們給時鐘項目添加了動畫。看起來很贊,但是如果有合適的緩衝函數就更好了。在顯示世界中,鐘錶指針轉動的時候,通常起步很慢,然後迅速啪地一聲,最後緩衝到終點。但是標準的緩衝函數在這裡每一個適合它,那該如何創建一個新的呢? 除了+functionWithName:之外,CAMe ...
  • 直接寫解決方法吧: 1、將XML里的靜態引入刪除: 2、在代碼里 findViewById 找到 NavigationView,然後引入 Header 和 Menu,再獲取頭部佈局,最後設置監聽事件: 3、完整代碼如下: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...