Core-Animation筆記

這次要來記錄一下CoreAnimation, core animation很實用也很簡單; 一般來說, UIView所提供的Animation已經可以提供大部分我們需要的效果, 不過如果想要用到更複雜, 比較特別的動畫, UIView Animation就沒辦法符合我們的需求.

CAAnimation

CAAnimation 是 CoreAnimation 基礎的 Object, 而我們大多真正會使用的大該是下面五種繼承CAAnimttion的物件

  • CAPropertyAnimation 主要使用 下面兩個subclass
    • CAKeyframeAnimation
    • CABasicAnimation
  • CAAnimationGroup
  • CATransition
  • CATransaction

其中CATransaction使用的方式跟其他四個比較不一樣, 不過也算是比較常用的 CoreAnimation物件; CATransition已經內建了幾種動畫的樣式, 例如相機開啟、水波以及垃圾桶的特效等等, 都可以直接運用CATransition來使用.

CAPropertyAnimation 的使用方式都是改變物件的property, 是使用keypath的方式來改變property(KVC), 在建立Animation的時候就要先給要變化的keypath

example 
1
2
3
4
5

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"alpha"];
anim.fromValue = @1;
anim.toValue = @1;

[tagetLayer addAnimation:anima forKey:@"anima"] ;

在使用KVC在使用的時候, 改變內容都是以NSValue; 到帶入的NSValue型態可以參考這邊的文件

上面這樣就會有簡單動畫, layer的半透明會越來越明顯只到消失; 可以指定的變化的數值之外, 同時也可以指定Animation的時間以及動畫的速率方式, 分別是:

  • duration
  • timimgFunction

最後還有一個需要特別提到的部份, fillMode的部份, 可以特別注意一下, 必須要設成 kCAFillModeForwards, 不然在執行玩動畫後, 可能會回到原本的狀態. 而在Keyframe的部份, 也是相識的作法, 用 values 跟 keyTimes.

CAAnimtaionGroup

在使用Keyframe and basic animation的時候, 如果是一個一個加到 layer上面去, 會是依序加上去的順序去執行, 如果想要Animation是同時發生(concurrent)的話, 就需要搭配 CAAnimationGroup來使用.

1
2
3
4
5
6
7
8
9
10

CABasicAnimation *anim0 = [CABasicAnimation animationWithKeyPath:@"..."];
CAKeyframeAnimation *anim1 = [CABasicAnimation animationWithKeyPath:@"..."];



CAAnimationGroup *animGroup = [CAAnimationGroup animation];
animGroup.animations = @[anim0, anim1];


[targetLayer addAnimation:animGroup forKey:@"anima"];

CATransaction

最後來提提CATransaction; 在運用CALayer的時候, 只要我們一修改frame, Layer就會開始呈現動畫, 而CATransaction是可以用來控制這些動畫的時間跟動畫速率, 跟UIView的Aniamtion用法有點像.

1
2
3
4
5
6
7
8
9
10
11
12
13

[CATransaction begin];
if (!animated) {
    [CATransaction setValue:(id)kCFBooleanTrue
                     forKey:kCATransactionDisableActions];
}
else {
    [CATransaction setAnimationDuration:.3f];
}

self.layer.backgroundColor = [UIColor clearColor].CGColor;
self.gradientLayer.colors = colors;
self.gradientLayer.locations = locations;
[CATransaction commit];

如果有有錯誤也請幫忙指正, 謝謝.

Comments