Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CAKeyframeAnimation
2012.08.25
ふじしげ ゆういち
@nakiwo
• ふじしげ ゆういち
• @nakiwo
• 株式会社フィードテイラー
http://feedtailor.jp/
Book+
そら案内
Slidrs
• ふじしげ ゆういち
• @nakiwo
• http://www.nakiwo.com/
洞窟物語
めがね
(Mac AppStore)
今日のテーマ
•CAKeyframeAnimation
•Core Animation
•3つ以上の値を補間
今日のサンプル
https://github.com/nakiwo/KeyFrameSample
CABasicAnimation
•2つの値を補完するアニメーション
•fromValue, toValue
fromValue toValue
CAKeyframeAnimation
•3つ以上の値を補完するアニメーション
•values
•path (CGPoint)
values[0] values[2]values[1]
注意点
•CAKeyframeAnimationはいくつかの
モードを持っている
•モードによって無視されるプロパティ
があるので要注意
パターン1. values
• values[n]
• keyTimes[n] (0...1) duration内の%
• timingFunctions[n-1] (オプション)
timingFunction
values[0] values[2]values[1]
keyTimes[0] = 0 keyTimes[1] = 0..1 keyTimes[2] = 1
timingFunctions[0] timingFunctions[1]
< <
values[0] values[2]values[1]
keyTimes[0] = 0 keyTimes[1] = 0..1 keyTimes[2] = 1
timingFunctions[0] timingFunctions[1]
< <
...
calculationMode
•keyFrameの補間の仕方
•kCAAnimationLinear
•kCAAnimationDiscrete (補間無し)
デモ
※ Keynoteを中断する時は[H]を押す
パターン2. path
• CGPointのアニメーションをCGPathで指定
• animation.path (valuesは無視される)
• 補間モード kCAAnimationPaced
• keyTimesが無効になり、pathを一定...
• rotationMode
• kCAAnimationRotateAuto
• kCAAnimationRotateAutoReverse
デモ
※ Keynoteを中断する時は[H]を押す
パターン3. cubic
• valuesでCGPointを指定。指定したポイントを通過す
るようにアニメーションする
• 補間モード kCAAnimationCubic
• Catmull-Rom spline
• 曲線の微調整可能
• 補間...
kCAAnimationCubic
• valuesにCGPointを設定
• tensionValues, continuityValues, biasValues で微
調整
• http://en.wikipedia.org/wiki/K...
values[0] values[2]values[1]
keyTimes[0] = 0 keyTimes[1] = 0..1 keyTimes[2] = 1
timingFunctions[0] timingFunctions[1]
tens...
http://en.wikipedia.org/wiki/Kochanek-Bartels_spline
kCAAnimationCubicPaced
• valuesにCGPointを設定
• keyTimesは無視される
• 微調整不可
デモ
※ Keynoteを中断する時は[H]を押す
おまけ.timingFunction
• CAKeyframeAnimationは継承している
timingFunctionプロパティを無視する
(timingFunctionsの利用が意図されている)
• timingFunctionsを指定...
• CAAnimationGroupを使う
• Using a Single Timing Function For a Keyframe
Animation
• Core Animation Cookbook
https://develope...
CAKeyframeAnimation *theAnimation =
[CAKeyframeAnimation animationWithKeyPath:@"position"];
theAnimation.path = path;
CAAn...
おわり
CAKeyframeAnimation
Upcoming SlideShare
Loading in …5
×

CAKeyframeAnimation

2,851 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. おわり

×