CAKeyframeAnimation

2,738 views

Published on

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

Published in: Technology
  • Be the first to comment

CAKeyframeAnimation

  1. 1. CAKeyframeAnimation 2012.08.25 ふじしげ ゆういち @nakiwo
  2. 2. • ふじしげ ゆういち • @nakiwo • 株式会社フィードテイラー http://feedtailor.jp/ Book+ そら案内 Slidrs
  3. 3. • ふじしげ ゆういち • @nakiwo • http://www.nakiwo.com/ 洞窟物語 めがね (Mac AppStore)
  4. 4. 今日のテーマ •CAKeyframeAnimation •Core Animation •3つ以上の値を補間
  5. 5. 今日のサンプル https://github.com/nakiwo/KeyFrameSample
  6. 6. CABasicAnimation •2つの値を補完するアニメーション •fromValue, toValue fromValue toValue
  7. 7. CAKeyframeAnimation •3つ以上の値を補完するアニメーション •values •path (CGPoint) values[0] values[2]values[1]
  8. 8. 注意点 •CAKeyframeAnimationはいくつかの モードを持っている •モードによって無視されるプロパティ があるので要注意
  9. 9. パターン1. values • values[n] • keyTimes[n] (0...1) duration内の% • timingFunctions[n-1] (オプション) timingFunction
  10. 10. values[0] values[2]values[1] keyTimes[0] = 0 keyTimes[1] = 0..1 keyTimes[2] = 1 timingFunctions[0] timingFunctions[1] < <
  11. 11. values[0] values[2]values[1] keyTimes[0] = 0 keyTimes[1] = 0..1 keyTimes[2] = 1 timingFunctions[0] timingFunctions[1] < < keyframe
  12. 12. calculationMode •keyFrameの補間の仕方 •kCAAnimationLinear •kCAAnimationDiscrete (補間無し)
  13. 13. デモ ※ Keynoteを中断する時は[H]を押す
  14. 14. パターン2. path • CGPointのアニメーションをCGPathで指定 • animation.path (valuesは無視される) • 補間モード kCAAnimationPaced • keyTimesが無効になり、pathを一定のタイ ミングで辿る
  15. 15. • rotationMode • kCAAnimationRotateAuto • kCAAnimationRotateAutoReverse
  16. 16. デモ ※ Keynoteを中断する時は[H]を押す
  17. 17. パターン3. cubic • valuesでCGPointを指定。指定したポイントを通過す るようにアニメーションする • 補間モード kCAAnimationCubic • Catmull-Rom spline • 曲線の微調整可能 • 補間モード kCAAnimationPaced • keyTimesが無効になる
  18. 18. kCAAnimationCubic • valuesにCGPointを設定 • tensionValues, continuityValues, biasValues で微 調整 • http://en.wikipedia.org/wiki/Kochanek- Bartels_spline
  19. 19. 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]
  20. 20. http://en.wikipedia.org/wiki/Kochanek-Bartels_spline
  21. 21. kCAAnimationCubicPaced • valuesにCGPointを設定 • keyTimesは無視される • 微調整不可
  22. 22. デモ ※ Keynoteを中断する時は[H]を押す
  23. 23. おまけ.timingFunction • CAKeyframeAnimationは継承している timingFunctionプロパティを無視する (timingFunctionsの利用が意図されている) • timingFunctionsを指定せずに単一のtimingFunction を指定したい場合は?
  24. 24. • 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
  25. 25. 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"];
  26. 26. おわり

×