3.1 Basic Animation
?
?CABasicAnimation
?
3.2 Keyframe Animations
?
與基本動畫進行線性插值不同，關(guān)鍵楨動畫允許你在特定時間指定不同的數(shù)值，這樣你可以在動畫的全過程控制動畫的展示和動作。
自從發(fā)明手繪電影以來，關(guān)鍵楨就在動畫中起到了一定作用。一些資深的藝術(shù)家會針對一個場景畫不同的關(guān)鍵楨，而一些剛?cè)胄械乃囆g(shù)家卻會填滿每一楨，以便使動畫看起來更平滑。（有時候這個過程叫做tweening：兩者之間的動畫）。Core Animation的關(guān)鍵楨動畫可以幫我們實現(xiàn)在關(guān)鍵楨之間的填充，我們只需要指定哪個是關(guān)鍵楨，系統(tǒng)會自動幫我們生成動畫。
另外一個很酷的東西是，關(guān)鍵楨動畫同樣可以完成任何基本動畫能夠完成的動作。特別是點、大小或是矩形。比如如果我們希望讓一個層的不透明度顯示為一個動畫，我們可以指定一些不同的數(shù)值（比如：0.25, 0.50, 0.75)，然后在動畫的過程的不同時間中逐漸變化。
再一個真的很酷的方面，我們不光可以使用離散數(shù)值，更可以使用CGPath去指定關(guān)鍵楨動畫的值。換句話說，我們不僅僅可以在特定時間點指定特定的動畫值，還可以使用曲線路徑去指定動畫的值。舉例說明，我們可以將一個層的不透明度用鐘型曲線表示：開始是透明，然后逐漸顯現(xiàn)到某個特定透明度，再逐漸變?yōu)橥该鳌Ｎ覀冞€可以用CGPoint和CGSize值的路徑做為動畫的行進路線。這樣，路徑的x值可以表示橫坐標也可以表示寬度，y既可以表示縱坐標還可以表示高度。
?
?
?
?
?
?
The code to create the keyframe animation would look like this:
?
- (CAKeyframeAnimation *)opacityAnimation {
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.values = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.75],
[NSNumber numberWithFloat:0.0], nil];
animation.keyTimes = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.25],
[NSNumber numberWithFloat:0.50],
[NSNumber numberWithFloat:0.75], nil];
return animation;
}
?
不設(shè)置keyTimes時的運行方式：
?
?
Keyframes and Paths
?
?
- (void)addBounceAnimation {
[mover setAnimations:[NSDictionary dictionaryWithObjectsAndKeys:
self.originAnimation, @"frameOrigin" , nil]];
}
- (id)initWithFrame:(NSRect)frame {
self = [super initWithFrame:frame];
if (self) {
CGFloat xInset = 3.0f * (NSWidth(frame) / 8.0f);
CGFloat yInset = 3.0f * (NSHeight(frame) / 8.0f);
NSRect moverFrame = NSInsetRect(frame, xInset, yInset);
mover = [[NSImageView alloc] initWithFrame:moverFrame];
[mover setImageScaling:NSScaleToFit];
[mover setImage:[NSImage imageNamed:@"photo.jpg" ]];
[self addSubview:mover];
[self addBounceAnimation];
}
return self;
}
?
?
[mover setAnimations:[NSDictionary dictionaryWithObjectsAndKeys:?self.originAnimation, @" frameOrigin " , nil]];
?
frameOrigin：
要和[[mover animator] setFrameOrigin:rect.origin];的
setFrameOrigin相對應(yīng)，才會在setFrameOrigin方法被調(diào)用的時候，執(zhí)行設(shè)置的動畫
例如：
- (void)awakeFromNib
{
NSView *contentView = [[self window] contentView];
[contentView setWantsLayer:YES];
[contentView addSubview:[self currentView]];
transition = [CATransition animation];
[transition setType:kCATransitionPush];
[transition setSubtype:kCATransitionFromLeft];
NSDictionary *ani = [NSDictionary dictionaryWithObject:transition
forKey:@"subviews"];
[contentView setAnimations:ani];
}
awakeFromNib首先打開Core Animation支持（就是setWantsLayer這行）。然后把當前的參考視圖currentView做為子視圖加入到contentView中。由于我們已經(jīng)將currentView的frameOrigin屬性設(shè)置為0,0，因此不需要考慮subview的位置。
接下來我建立了一個CATransition的動畫。注意我在AppDelegate中將這個動畫保留為ivar。原因很明顯，當動畫建立時，我將它做為transition動畫加入content view，key是“subviews”。這個transition動畫無論在一個subview添加、刪除或者替換的時候都會觸發(fā)。
?
- (CAKeyframeAnimation *)originAnimation {
CAKeyframeAnimation *originAnimation = [CAKeyframeAnimation animation];
originAnimation.path = self.heartPath;
originAnimation.duration = 2.0f;
originAnimation.calculationMode = kCAAnimationPaced;
return originAnimation;
}
?
設(shè)置動畫運行路徑：
???? originAnimation.path = self.heartPath;
設(shè)置動畫持續(xù)時間：
???? originAnimation.duration = 2.0f;
設(shè)置動畫方式：
???? originAnimation.calculationMode = kCAAnimationPaced;
?
?
設(shè)置動畫路徑：
- (CGPathRef)heartPath {
NSRect frame = [mover frame];
if(heartPath == NULL) {
heartPath = CGPathCreateMutable();
CGPathMoveToPoint(heartPath, NULL, NSMinX(frame), NSMinY(frame));
CGPathAddLineToPoint(heartPath, NULL, NSMinX(frame) - NSWidth(frame),NSMinY(frame) + NSHeight(frame) * 0.85);
CGPathAddLineToPoint(heartPath, NULL, NSMinX(frame),NSMinY(frame) - NSHeight(frame) * 1.5);
CGPathAddLineToPoint(heartPath, NULL, NSMinX(frame) + NSWidth(frame),NSMinY(frame) + NSHeight(frame) * 0.85);
CGPathAddLineToPoint(heartPath, NULL, NSMinX(frame), NSMinY(frame));
CGPathCloseSubpath(heartPath);
}
return heartPath;
}
?
?
- (void)bounce {
NSRect rect = [mover frame];
[[mover animator] setFrameOrigin:rect.origin];
}
?
Recall that since we have added an animation to the animations dictionary under the frameOrigin key, the animator will find it during its search and use ours instead of the default animation.
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
