第45回 Cocoa勉強会関西の発表資料

1. CAKeyframeAnimation
2012.08.25
ふじしげ ゆういち
@nakiwo

2. • ふじしげ ゆういち
• @nakiwo
• 株式会社フィードテイラー
http://feedtailor.jp/
Book+
そら案内
Slidrs

3. • ふじしげ ゆういち
• @nakiwo
• http://www.nakiwo.com/
洞窟物語
めがね
(Mac AppStore)

5. 今日のテーマ
•CAKeyframeAnimation
•Core Animation
•3つ以上の値を補間

6. 今日のサンプル
https://github.com/nakiwo/KeyFrameSample

7. CABasicAnimation
•2つの値を補完するアニメーション
•fromValue, toValue
fromValue toValue

8. CAKeyframeAnimation
•3つ以上の値を補完するアニメーション
•values
•path (CGPoint)
values[0] values[2]values[1]

9. 注意点
•CAKeyframeAnimationはいくつかの
モードを持っている
•モードによって無視されるプロパティ
があるので要注意

10. パターン1. values
• values[n]
• keyTimes[n] (0...1) duration内の%
• timingFunctions[n-1] (オプション)
timingFunction

11. values[0] values[2]values[1]
keyTimes[0] = 0 keyTimes[1] = 0..1 keyTimes[2] = 1
timingFunctions[0] timingFunctions[1]
< <

12. values[0] values[2]values[1]
keyTimes[0] = 0 keyTimes[1] = 0..1 keyTimes[2] = 1
timingFunctions[0] timingFunctions[1]
< <
keyframe

13. calculationMode
•keyFrameの補間の仕方
•kCAAnimationLinear
•kCAAnimationDiscrete (補間無し)

14. デモ
※ Keynoteを中断する時は[H]を押す

15. パターン2. path
• CGPointのアニメーションをCGPathで指定
• animation.path (valuesは無視される)
• 補間モード kCAAnimationPaced
• keyTimesが無効になり、pathを一定のタイ
ミングで辿る

16. • rotationMode
• kCAAnimationRotateAuto
• kCAAnimationRotateAutoReverse

17. デモ
※ Keynoteを中断する時は[H]を押す

18. パターン３. cubic
• valuesでCGPointを指定。指定したポイントを通過す
るようにアニメーションする
• 補間モード kCAAnimationCubic
• Catmull-Rom spline
• 曲線の微調整可能
• 補間モード kCAAnimationPaced
• keyTimesが無効になる

19. kCAAnimationCubic
• valuesにCGPointを設定
• tensionValues, continuityValues, biasValues で微
調整
• http://en.wikipedia.org/wiki/Kochanek-
Bartels_spline

20. values[0] values[2]values[1]
keyTimes[0] = 0 keyTimes[1] = 0..1 keyTimes[2] = 1
timingFunctions[0] timingFunctions[1]
tensionValues[0]
continuityValues[0]
biasValues[0]
tensionValues[1]
continuityValues[1]
biasValues[1]
tensionValues[2]
continuityValues[2]
biasValues[2]

21. http://en.wikipedia.org/wiki/Kochanek-Bartels_spline

22. kCAAnimationCubicPaced
• valuesにCGPointを設定
• keyTimesは無視される
• 微調整不可

23. デモ
※ Keynoteを中断する時は[H]を押す

24. おまけ.timingFunction
• CAKeyframeAnimationは継承している
timingFunctionプロパティを無視する
(timingFunctionsの利用が意図されている)
• timingFunctionsを指定せずに単一のtimingFunction
を指定したい場合は?

25. • CAAnimationGroupを使う
• Using a Single Timing Function For a Keyframe
Animation
• Core Animation Cookbook
https://developer.apple.com/library/mac/
#documentation/GraphicsImaging/Conceptual/
CoreAnimation_Cookbook/Articles/Timing.html

26. CAKeyframeAnimation *theAnimation =
[CAKeyframeAnimation animationWithKeyPath:@"position"];
theAnimation.path = path;
CAAnimationGroup *theGroup = [CAAnimationGroup animation];
theGroup.animations = [NSArray arrayWithObject:theAnimation];
theGroup.timingFunction =
[CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseIn];
theGroup.duration = 15.0;
[theLayer addAnimation:theGroup forKey:@"animatePosition"];

27. おわり