原文地址:http://superman474.blog.163.com/blog/static/120661462011857653190/
animation(動畫)
動畫是用戶界面中一個重要的部分,當我們使用core animation時,動畫是完全自動的,不需要動畫循環或者定時器,我們的程序不需要一幀一幀的去繪製,也不需要去跟蹤動畫當前的狀態。動畫發生在一個獨立的線程裏,不需要與應用程序交互。
本篇文章就主要講述一下動畫類,以及描述一下如何創建明確的(explicit)動畫和隱含的(implicit)動畫。
1.animation類和timing(時序)
core Animation提供了一個animation類的集合可以供我們應用程序使用。
CABasicAnimation提供簡單的layer屬性值之間的interpolation。
CAKeyframeAnimation提供了關鍵幀動畫的支持。我們可以指定layer屬性進行動畫的關鍵路徑,一個包含每一個階段動畫的數組。
CATransition提供一個過度效果(影響到整個layer的內容),當動畫時,它fade(淡化),push(推),或者reveals(揭露)layer的內容。此動畫可以用自己提供的自定義 core image filters去擴展。
CAAnimationGroup允許將一組動畫放在一個數組裏面,然後同時執行。
除了指定具體的動畫類型,我們必須要指定動畫的持續時間, pacing等。動畫可以重複,設置重複的次數,或者當動畫週期完成時是否自動反轉。animation類和CAMediaTiming協議提供了這裏所有的功能。
2.implicit animation
core animation的隱含動畫假定所有改變的可動畫的layer屬性應該是漸進和異步的。改變一個可動畫的layer屬性值可以隱含的引起一個動畫使屬性的值從舊值變爲新值。
下面一句話就是簡單的觸發一個隱含的動畫時layer從當前的position到新的position。
// assume that the layer is current positioned at (100.0,100.0) |
theLayer.position=CGPointMake(500.0,500.0); |
也可以一次改變多個layer屬性,或者同時改變多個layer的屬性值都可以。下面代碼說明了此。
// animate theLayer's opacity to 0 while moving it |
// further away in the layer |
theLayer.opacity=0.0; |
theLayer.zPosition=-100; |
|
// animate anotherLayer's opacity to 1 |
// while moving it closer in the layer |
anotherLayer.opacity=1.0; |
anotherLayer.zPosition=100.0; |
隱含動畫使用該屬性使用的默認的動畫中指定的時間。可以覆蓋此默認的時間,在6中我們在介紹。
3.明確的動畫
明確的動畫需要我們去創建一個animation對象,設置開始和結束值。一個明確的動畫不會自動開始除非你將其應用到layer中。下面的代碼將創建一個明確的動畫,在3秒中過度一個layer的opacity從opaque到full transparent(全部透明),並且在返回原樣。直到將其加到layer上時,動畫纔開始。
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"]; |
當想創建一個動畫讓其持續運行時,顯式的動畫是很有用的。
// The selection layer will pulse continuously. |
// This is accomplished by setting a bloom filter 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"]; |
(上面的代碼用到了過濾器)
4.啓動和停止顯式動畫
可以通過發送消息addAnimation:forKey:給layer來啓動顯式動畫,傳遞動畫類和標識作爲參數。
一旦加入,顯式動畫就會開始運行直到其動畫完成,或者從layer上remove。標識就是用來停止一個動畫的,removeAnimationForKey:,也可以通過removeAllAnimations停止一個layer所有的動畫。