我們首先來看看Core Animation類的繼承關系圖
687474703a2f2f696d672e6d792e6373646e2e6e65742f75706c6f6164732f3230313530372f32332f313433373631373536325f333139302e706e67.png
下面通過蘋果官方的API來介紹CABasicAnimation
Class
CABasicAnimation
An object that provides basic, single-keyframe animation capabilities for a layer property.
//為圖層屬性提供基本的單關鍵幀動畫功能的對象。介紹了這個類的作用
//關鍵詞:basic, single-keyframe animation(單關鍵幀,你可以理解成CABasicAnimation是CAKeyframeAnimation的特殊化)
Overview(概述)
You create an instance of CABasicAnimation using the inherited animationWithKeyPath: method, specifying the key path of the property to be animated in the render tree.
//你可以使用繼承的animationWithKeyPath:方法創建CABasicAnimation的實例,指定要在渲染樹中進行動畫處理的屬性的鍵路徑。
For example, you can animate a layer's scalar (i.e. containing a single value) properties such as its opacity. Listing 1 fades in a layer by animating its opacity from 0 to 1.
//如列表1中,你可以為涂層屬性(不透明度)設置動畫,使其不透明度從0到1淡化
Listing 1
Creating an animation to animate opacity
let animation = CABasicAnimation(keyPath: "opacity")
animation.fromValue = 0
animation.toValue = 1
Non-scalar properties, such as backgroundColor, can also be animated. Core Animation will interpolate between the fromValue color and the toValue color. The animation created in Listing 2 fades a layer's background color from red to blue.
//非標量屬性,如backgroundColor,也可以是動畫。 核心動畫將在fromValue顏色和toValue顏色之間進行插值。 清單2中創建的動畫會將圖層的背景顏色從紅色漸變為藍色
Listing 2
Creating an animation to animate background color.
let animation = CABasicAnimation(keyPath: "backgroundColor")
animation.fromValue = NSColor.red.cgColor
animation.toValue = NSColor.blue.cgColor
If you want to animate the individual(個人) components(組件、元件) of a non-scalar property with different values, you pass the values to toValue and fromValue as arrays. The animation created in Listing 3 moves a layer from (0, 0) to (100, 100).
//如果要為具有不同值的非標量屬性的各個組件設置動畫,請將值傳遞到toValue和fromValue作為數組。 清單3中創建的動畫將一個圖層從(0,0)移動到(100,100)。
Listing 3
Creating an animation to animate position
let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = [0, 0]
animation.toValue = [100, 100]
The keyPath can access the individual components of a property. For example, the Listing 4 stretches a layer by animating its transform object's x from 1 to 2.
//keyPath可以訪問屬性的各個組件。 例如,清單4通過將其變換對象的x從1動畫化為2來展開圖層。
Listing 4
Creating an animation to animate scale
let animation = CABasicAnimation(keyPath: "transform.scale.x")
animation.fromValue = 1
animation.toValue = 2
Setting Interpolation Values(設置插值)
The fromValue, byValue and toValue properties define the values being interpolated between. All are optional, and no more than two should be non-nil. The object type should match the type of the property being animated.
//fromValue,byValue和toValue屬性定義在之間插入的值。 所有都是可選的,不超過兩個應該是非零。 對象類型應與要動畫的屬性的類型匹配
//注意:不超過兩個是非零,byValue是一個相對值,例如,如果指定了`fromValue`等于2,`toValue`等于4,`byValue`等于3,那么Core Animation就不知道結果到底是4(`toValue`)還是5(`fromValue + byValue`)了
The interpolation values are used as follows:
//內插值使用如下
Both fromValue and toValue are non-nil. Interpolates between fromValue and toValue.
//fromValue和toValue都是非零。 插值(也就是動畫執行)從fromValue到toValue
fromValue and byValue are non-nil. Interpolates between fromValue and (fromValue + byValue).
//fromValue和byValue是非零。 插值(也就是動畫執行)從fromValue到fromValue + byValue。
byValue and toValue are non-nil. Interpolates between (toValue - byValue) and toValue.
//byValue和toValue是非零。 插值(也就是動畫執行)從toValue - byValue到toValue
fromValue is non-nil. Interpolates between fromValue and the current presentation value of the property.
//fromValue是非零,fromValue->當前
toValue is non-nil. Interpolates between the current value of keyPath in the target layer’s presentation layer and toValue.
//toValue是非零,當前->toValue
byValue is non-nil. Interpolates between the current value of keyPath in the target layer’s presentation layer and that value plus byValue.
//byValue是非零,當前值->當前值 + byValue
All properties are nil. Interpolates between the previous value of keyPath in the target layer’s presentation layer and the current value of keyPath in the target layer’s presentation layer.
//super與當前的對比,沒意義
Symbols
Interpolation values
fromValue
Defines the value the receiver uses to start interpolation.
//定義接收器用于開始插值的值。
toValue
Defines the value the receiver uses to end interpolation.
//定義接收器用于結束插值的值
byValue
Defines the value the receiver uses to perform relative interpolation.
//定義接收器用于執行相對插值的值
示例
從蘋果官方API我們可以了解到CABasicAnimation(基礎動畫)算是CAKeyframeAnimation(關鍵幀動畫)的特殊化,CABaseAnimation只能從一個數值(fromValue)變換成另一個數值(toValue),而CAKeyframeAnimation則會使用一個NSArray保存一組關鍵幀.
使用CABasicAnimation可操控的幾種屬性
- opacity (透明度)
- backgroundColor (背景色)
- position (位置)
- transform.scale.x(多種)
1 opacity
CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"opacity"];
anima.fromValue = [NSNumber numberWithFloat:1.0f];
anima.toValue = [NSNumber numberWithFloat:0.2f];
anima.duration = 1.0f;
[_demoView.layer addAnimation:anima forKey:@"opacityAniamtion"];
2 backgroundColor
CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
anima.toValue =(id) [UIColor greenColor].CGColor;
anima.duration = 1.0f;
[_demoView.layer addAnimation:anima forKey:@"backgroundAnimation"];
3 position
CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)];
anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
anima.duration = 3.0f;
//如果fillMode=kCAFillModeForwards和removedOnComletion=NO,那么在動畫執行完畢后,圖層會保持顯示動畫執行后的狀態。但在實質上,圖層的屬性值還是動畫執行前的初始值,并沒有真正被改變。
//anima.fillMode = kCAFillModeForwards;
//anima.removedOnCompletion = NO;
anima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[_demoView.layer addAnimation:anima forKey:@"positionAnimation"];
4 transform
//縮放
CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"transform.scale"];//同上
anima.toValue = [NSNumber numberWithFloat:2.0f];
anima.duration = 3.0f;
[_demoView.layer addAnimation:anima forKey:@"scaleAnimation"];
//旋轉
CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];//繞著z軸為矢量,進行旋轉(@"transform.rotation.z"==@@"transform.rotation")
anima.toValue = [NSNumber numberWithFloat:M_PI];
anima.duration = 1.0f;
[_demoView.layer addAnimation:anima forKey:@"rotateAnimation"];