我大部分展示的比例變更動畫,但這不意味著你不能動畫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π。
接下來我們要設置彈簧的阻尼和剛度為如之前展示的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的變化。
當然,我們可以一次性動畫很多屬性。這里是一個同時動畫比例和旋轉的代碼。看你能不能發現與單個屬性動畫的區別。
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變形。通過引入當前的變形值,我們可以確保對我們的操作使用最近的值,而這就會包含第二個動畫的最終值。
第二個動畫會旋轉我們的對象π的角度。讓我們看看包含比例和旋轉變形的動畫看起來什么樣。
很酷對吧,我們不需要對每個動畫設置同樣的時間曲線;因為這是兩個單獨的動畫對象,我們可以單獨地控制每個彈簧的屬性。這里是一個比例和旋轉動畫的例子,其比例彈簧使用了一個指數衰減類型的彈簧動作(沒有彈性),而旋轉動畫動作非常有彈性。
這里是另一個同時添加兩個動畫的例子。這次它組合了一個位置(平移)動畫和一個比例變形。
我不知道你如何,但我對于僅僅動畫這些色塊已經有點無聊了。我認為是時候進入一些使用JNWSpringAnimation來實現彈簧動作動畫的真實世界、真實app的例子了。