[譯]《Motion Design for iOS》(二十四)

我大部分展示的比例變更動畫,但這不意味著你不能動畫layer的更多屬性!這里就是使用JNWSpringAnimation來使用彈簧動作旋轉一個layer的示例。

JNWSpringAnimation *scale =
    [JNWSpringAnimation animationWithKeyPath:@"transform.rotation"];
scale.damping = 10;
scale.stiffness = 100;
scale.mass = 3;

scale.fromValue = @(0);
scale.toValue = @(M_PI_2);

[redBall.layer addAnimation:scale forKey:scale.keyPath];
redBall.transform = CGAffineTransformMakeRotation(M_PI_2);

由于這是一個旋轉動畫,開始和結束值是由弧度定義的角度。我們使用便利的函數CGAffineTransformMakeRotation()來設置模型層的最終值為2π。


image

接下來我們要設置彈簧的阻尼和剛度為如之前展示的3個層示例一般會導致指數衰減類型動作的類似值。我們會動畫其位置,而不是layer的比例。

JNWSpringAnimation *scale = [JNWSpringAnimation
    animationWithKeyPath:@"transform.translation.x"];
scale.damping = 7;
scale.stiffness = 7;
scale.mass = 1;

scale.fromValue = @(0);
scale.toValue = @(400);

[redBall.layer addAnimation:scale forKey:scale.keyPath];
redBall.transform = CGAffineTransformMakeTranslation(400, 0);

我們要動畫的位置關鍵路徑為“transform.translation.x”,是從左到右的位置——x坐標。我們會將其向右移動400個像素,所以toValue是400,要設置最終值并保持球在我們動畫的地方,我們需要設置球的transform到CGAffineTransformMakeTranslation(400, 0)。這個函數是一個改變視圖的變化矩陣的平移組件的簡單方式,它接收兩個參數,x和y的變化。


image

當然,我們可以一次性動畫很多屬性。這里是一個同時動畫比例和旋轉的代碼。看你能不能發現與單個屬性動畫的區別。

JNWSpringAnimation *scale = [JNWSpringAnimation
    animationWithKeyPath:@"transform.scale"];
scale.damping = 9;
scale.stiffness = 9;
scale.mass = 1;
scale.fromValue = @(1);
scale.toValue = @(4.0);

[redBall.layer addAnimation:scale forKey:scale.keyPath];
redBall.transform = CGAffineTransformScale(redBall.transform, 4.0, 4.0);

JNWSpringAnimation *rotate = [JNWSpringAnimation
    animationWithKeyPath:@"transform.rotation"];
rotate.damping = 9;
rotate.stiffness = 9;
rotate.mass = 1;
rotate.fromValue = @(0);
rotate.toValue = @(M_PI);

[redBall.layer addAnimation:rotate forKey:rotate.keyPath];
redBall.transform = CGAffineTransformRotate(redBall.transform, M_PI);

第一個動畫是一個比例變化,從1.0到4.0變成四倍大小。與之前的例子的代碼相比第一個不同是當我們在添加動畫后設置模型層的實際變化值時(所以它才能保持最終值。)不是使用CGAffineTransformMakeScale()函數來進入新的比例,而是使用了名稱相似容易混淆的CGAffineTransformScale()函數并接收了三個參數。CGAffineTransformMakeScale()(包含make在其中)假設你想改變到的變化矩陣是常規、默認、未觸摸的恒等變換的變化矩陣,其剛剛創建了此時的視圖。

另一方面接收三個參數的CGAffineTransformScale(),第一個參數是你想要改變的起始的變化矩陣。這可以是恒等變化或者一個已經有了一些操作的變形,比如已經被旋轉了、伸縮了、平移了等等。我們使用這個函數并且將視圖當前的變形作為第一個參數的原因是我們正在添加兩個動畫到其中并且它們都會操作layer的變形矩陣。如果我們使用CGAffineTransformMakeScale(),就會影響所有的第二個動畫的變形調整,使用開始的恒等變換,而不是最近更新的第二次動畫設置的layer變形。通過引入當前的變形值,我們可以確保對我們的操作使用最近的值,而這就會包含第二個動畫的最終值。

第二個動畫會旋轉我們的對象π的角度。讓我們看看包含比例和旋轉變形的動畫看起來什么樣。


image

很酷對吧,我們不需要對每個動畫設置同樣的時間曲線;因為這是兩個單獨的動畫對象,我們可以單獨地控制每個彈簧的屬性。這里是一個比例和旋轉動畫的例子,其比例彈簧使用了一個指數衰減類型的彈簧動作(沒有彈性),而旋轉動畫動作非常有彈性。


image

這里是另一個同時添加兩個動畫的例子。這次它組合了一個位置(平移)動畫和一個比例變形。


image

我不知道你如何,但我對于僅僅動畫這些色塊已經有點無聊了。我認為是時候進入一些使用JNWSpringAnimation來實現彈簧動作動畫的真實世界、真實app的例子了。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,517評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,087評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,521評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,493評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,207評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,603評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,624評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,813評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,364評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,110評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,305評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,874評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,532評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,953評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,209評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,033評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,268評論 2 375

推薦閱讀更多精彩內容

  • 動畫翻譯3 自然的動畫 可以使用標準的時間曲線,但那并不是最優方案,并且不一定會帶給用戶令人贊嘆和愉悅的感覺,因為...
    SHChen閱讀 734評論 0 2
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,545評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,134評論 5 13
  • 每個UIView有一個伙伴稱為layer,一個CALayer。UIView實際上并沒有把自己畫到屏幕上;它繪制本身...
    shenzhenboy閱讀 3,133評論 0 17
  • 為什麼學了那麼多年英語,和老外交談還是會特別費勁?或者說,為什麼學了那麼多年英語,能跟老外聊上幾句,但是又感覺好死...
    寶龍Chris閱讀 459評論 7 8