CoreAnimation編程指南(六)動畫

轉自 http://www.dreamingwish.com/dream-2012/coreanimation-programming-guide-f-animation.html

動畫是當今用戶界面的關鍵因素。當使用核心動畫的時候,動畫是自動完成的。沒有動畫的循環和計數器。你的應用程序不負負責重繪,也不負責跟蹤動畫的當前狀態。動畫在獨立線程裏面自動執行,沒有和你的應用程序交互。

本章提供了對動畫類的概覽,和介紹如何創建隱式的和顯式的動畫。

 

1.1 動畫類和時序

核心動畫提供了一套你可以在你應用程序裏面使用的動畫類的表現:

  • CABasicAnimation提供了在圖層的屬性值間簡單的插入。
  • CAKeyframeAnimation提供支持關鍵幀動畫。你指定動畫的一個圖層屬性的關鍵路徑,一個表示在動畫的每個階段的價值的數組,還有一個關鍵幀時間的數組和時間函數。
  • CATransition提供了一個影響整個圖層的內容過渡效果。在動畫顯示過程中採用淡出(fade)、推出(push)、顯露(reveal)圖層的內容。 常用的過渡效果可以通過提供你自己定製的核心圖像濾鏡來擴展。

除了要指定顯示的動畫類型,你還必須指定動畫的間隔、它的速度(它的插值如何分佈在整個動畫過程)、動畫循環時候的循環次數、動畫週期完成的時候是否自動的反轉、還有動畫結束的時候它的可視化狀態。動畫類和CAMediaTiming協議提供所有這些功能甚至更多的功能。

CAAnimation、它的子類、時序協議被核心動畫和Cocoa Animation Proxy功能共享。這些類將會在“動畫類型和時序編程指南(Animation Types and Timing Programming Guide)”裏面詳細介紹。

 

1.2 隱式動畫

核心動畫的隱式動畫模型假定所有動畫圖層屬性的變化應該是漸進的和異步的。動態的動畫場景可以在沒有顯式的動畫圖層時候實現。改變可動畫顯示的圖層的屬性將會導致圖層隱式把圖層從舊的值動畫顯示爲新的值。雖然動畫是持續的,但是設置新的目標值時會導致圖層從當前狀態動畫過渡到新的目標值。

代碼1顯示瞭如果簡單的觸發一個隱式的動畫,把圖層從當前位置動畫改變到新的位置。

代碼 1  隱式的動畫改變圖層的position屬性

//假設layer當前position爲(100.0,100.0)
theLayer.position=CGPointMake(500.0,500.0);

  

你可以隱式的一次動畫改變圖層的一個或者多個屬性。你還可以隱式的同時動畫改變多個圖層。代碼2的代碼實現了4個同時觸發的隱式動畫。

代碼 2  隱式的同時動畫改變多個圖層的多個屬性

// 在移動至遠處時將Layer的opacity屬性漸進至0
theLayer.opacity=0.0;
theLayer.zPosition=-100;

//在移動至近處時將Layer的opacity屬性漸進至1
anotherLayer.opacity=1.0;
anotherLayer.zPosition=100.0;  

 

隱式動畫使用動畫屬性中默認指定的動畫時間,除非該時間已經被隱式或者顯式的修改過。閱讀“重載覆蓋隱式動畫時間”獲取更多詳情。

 

1.3 顯式動畫

核心動畫同時提供了一個顯式的動畫模型。該顯式動畫模型需要你創建一個動畫對象,並設置開始和結束的值。顯式動畫不會開始執行,直到你把該動畫應用到某個圖層上面。代碼3中的代碼片段創建了一個顯式動畫,它實現一個層的不透明度從完全不透明過渡到完全透明的,3秒後返回重新執行。動畫沒有開始,直到它被添加到某一圖層層。

代碼 3  顯式動畫

CABasicAnimation *theAnimation;

theAnimation=[CABasicAnimation animationWithKeyPath:@"opacity"];
theAnimation.duration=3.0;
theAnimation.repeatCount=2;
theAnimation.autoreverses=YES;
theAnimation.fromValue=[NSNumber numberWithFloat:1.0];
theAnimation.toValue=[NSNumber numberWithFloat:0.0];
[theLayer addAnimation:theAnimation forKey:@"animateOpacity"];

  

顯式動畫對於創建連續執行的動畫非常有幫助。代碼4顯示瞭如何創建一個顯式動畫,把一個CoreImage濾鏡應用到圖層上面,動畫顯示其強度。這將導致“選擇的圖層”跳動,吸引用戶的注意力。

代碼 4  連續顯式動畫示例

// The selection layer will pulse continuously.
// This is accomplished by setting a bloom filter(夢維:用5.0和5.1模擬器測試發現CIBloom這個名稱無法初始化濾鏡,返回值爲nil) on the layer
// create the filter and set its default values
CIFilter *filter = [CIFilter filterWithName:@"CIBloom"];
[filter setDefaults];
[filter setValue:[NSNumber numberWithFloat:5.0] forKey:@"inputRadius"];

// name the filter so we can use the keypath to animate the inputIntensity
// attribute of the filter
[filter setName:@"pulseFilter"];

// set the filter to the selection layer's filters
[selectionLayer setFilters:[NSArray arrayWithObject:filter]];

// create the animation that will handle the pulsing.
CABasicAnimation* pulseAnimation = [CABasicAnimation animation];

// the attribute we want to animate is the inputIntensity
// of the pulseFilter
pulseAnimation.keyPath = @"filters.pulseFilter.inputIntensity";

// we want it to animate from the value 0 to 1
pulseAnimation.fromValue = [NSNumber numberWithFloat: 0.0];
pulseAnimation.toValue = [NSNumber numberWithFloat: 1.5];

// over a one second duration, and run an infinite
// number of times
pulseAnimation.duration = 1.0;
pulseAnimation.repeatCount = HUGE_VALF;

// we want it to fade on, and fade off, so it needs to
// automatically autoreverse.. this causes the intensity
// input to go from 0 to 1 to 0
pulseAnimation.autoreverses = YES;

// use a timing curve of easy in, easy out..
pulseAnimation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];

// add the animation to the selection layer. This causes
// it to begin animating. We'll use pulseAnimation as the
// animation key name
[selectionLayer addAnimation:pulseAnimation forKey:@"pulseAnimation"];

  

1.4 開始和結束顯式動畫

你可以發送addAnimation:forKey:消息給目標圖層來開始一個顯式動畫,把動畫和標識符作爲參數。一旦把動畫添加到目標圖層,動畫將會一直執行直到動畫完成,或者動畫被從圖層上面移除。把動畫添加到圖層時添加的標識符,同樣也可以在停止動畫的時候使用,通過調用removeAnimationForKey:。你可以通過給圖層發送一個removeAllAnimations消息來停止圖層所有的動畫。


參考文檔:
http://blog.163.com/donald_wong5/blog/static/190962406201191912456928/
Core Animation for Mac OS X and the iPhone   下載地址 

http://www.cocoachina.com/bbs/read.php?tid=12133&ordertype=asc

http://xxxxxfsadf.iteye.com/blog/565785 

核心動畫編程指南 

 Quartz 2D官方文檔

 https://developer.apple.com/library/prerelease/ios/#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/Introduction/Introduction.html#//apple_ref/doc/uid/TP30001066

 項目文件下載

 開源Core Animation 示例CA360

 另外一個演示demo,很好很強大



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章