我大部分展示的比例變更動(dòng)畫原在，但這不意味著你不能動(dòng)畫layer的更多屬性牲芋！這里就是使用JNWSpringAnimation來(lái)使用彈簧動(dòng)作旋轉(zhuǎn)一個(gè)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);
由于這是一個(gè)旋轉(zhuǎn)動(dòng)畫，開(kāi)始和結(jié)束值是由弧度定義的角度。我們使用便利的函數(shù)CGAffineTransformMakeRotation()來(lái)設(shè)置模型層的最終值為2π吼渡。
接下來(lái)我們要設(shè)置彈簧的阻尼和剛度為如之前展示的3個(gè)層示例一般會(huì)導(dǎo)致指數(shù)衰減類型動(dòng)作的類似值。我們會(huì)動(dòng)畫其位置乓序，而不是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);
我們要?jiǎng)赢嫷奈恢藐P(guān)鍵路徑為“transform.translation.x”坎背，是從左到右的位置——x坐標(biāo)。我們會(huì)將其向右移動(dòng)400個(gè)像素寄雀，所以toValue是400得滤，要設(shè)置最終值并保持球在我們動(dòng)畫的地方，我們需要設(shè)置球的transform到CGAffineTransformMakeTranslation(400, 0)咙俩。這個(gè)函數(shù)是一個(gè)改變視圖的變化矩陣的平移組件的簡(jiǎn)單方式耿戚，它接收兩個(gè)參數(shù)湿故，x和y的變化阿趁。
當(dāng)然，我們可以一次性動(dòng)畫很多屬性坛猪。這里是一個(gè)同時(shí)動(dòng)畫比例和旋轉(zhuǎn)的代碼脖阵。看你能不能發(fā)現(xiàn)與單個(gè)屬性動(dòng)畫的區(qū)別墅茉。
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);
第一個(gè)動(dòng)畫是一個(gè)比例變化命黔，從1.0到4.0變成四倍大小。與之前的例子的代碼相比第一個(gè)不同是當(dāng)我們?cè)谔砑觿?dòng)畫后設(shè)置模型層的實(shí)際變化值時(shí)（所以它才能保持最終值就斤。）不是使用CGAffineTransformMakeScale()函數(shù)來(lái)進(jìn)入新的比例悍募，而是使用了名稱相似容易混淆的CGAffineTransformScale()函數(shù)并接收了三個(gè)參數(shù)。CGAffineTransformMakeScale()（包含make在其中）假設(shè)你想改變到的變化矩陣是常規(guī)洋机、默認(rèn)坠宴、未觸摸的恒等變換的變化矩陣，其剛剛創(chuàng)建了此時(shí)的視圖绷旗。
另一方面接收三個(gè)參數(shù)的CGAffineTransformScale()喜鼓，第一個(gè)參數(shù)是你想要改變的起始的變化矩陣。這可以是恒等變化或者一個(gè)已經(jīng)有了一些操作的變形衔肢，比如已經(jīng)被旋轉(zhuǎn)了庄岖、伸縮了、平移了等等角骤。我們使用這個(gè)函數(shù)并且將視圖當(dāng)前的變形作為第一個(gè)參數(shù)的原因是我們正在添加兩個(gè)動(dòng)畫到其中并且它們都會(huì)操作layer的變形矩陣隅忿。如果我們使用CGAffineTransformMakeScale()，就會(huì)影響所有的第二個(gè)動(dòng)畫的變形調(diào)整邦尊，使用開(kāi)始的恒等變換背桐，而不是最近更新的第二次動(dòng)畫設(shè)置的layer變形。通過(guò)引入當(dāng)前的變形值胳赌，我們可以確保對(duì)我們的操作使用最近的值牢撼，而這就會(huì)包含第二個(gè)動(dòng)畫的最終值。
第二個(gè)動(dòng)畫會(huì)旋轉(zhuǎn)我們的對(duì)象π的角度疑苫。讓我們看看包含比例和旋轉(zhuǎn)變形的動(dòng)畫看起來(lái)什么樣熏版。
很酷對(duì)吧纷责，我們不需要對(duì)每個(gè)動(dòng)畫設(shè)置同樣的時(shí)間曲線；因?yàn)檫@是兩個(gè)單獨(dú)的動(dòng)畫對(duì)象撼短，我們可以單獨(dú)地控制每個(gè)彈簧的屬性再膳。這里是一個(gè)比例和旋轉(zhuǎn)動(dòng)畫的例子，其比例彈簧使用了一個(gè)指數(shù)衰減類型的彈簧動(dòng)作（沒(méi)有彈性）曲横，而旋轉(zhuǎn)動(dòng)畫動(dòng)作非常有彈性喂柒。
這里是另一個(gè)同時(shí)添加兩個(gè)動(dòng)畫的例子。這次它組合了一個(gè)位置（平移）動(dòng)畫和一個(gè)比例變形禾嫉。
我不知道你如何灾杰，但我對(duì)于僅僅動(dòng)畫這些色塊已經(jīng)有點(diǎn)無(wú)聊了。我認(rèn)為是時(shí)候進(jìn)入一些使用JNWSpringAnimation來(lái)實(shí)現(xiàn)彈簧動(dòng)作動(dòng)畫的真實(shí)世界熙参、真實(shí)app的例子了艳吠。
