UIViewのアニメーションtotottiDate 2012/06/23
自己紹介
自己紹介✤   twitter : @tototti✤   iOSとかjQueryで何かをカチャカチャ...ッターンと作っ    てます。
アニメーション✤   UIをリッチに    ✤   iOS標準の種々のアニメーション    ✤   操作に対するレスポンス表現✤   簡単にアニメーションを実現    ✤   そう、UIViewならね
その1・アニメーション基礎
UIViewアニメーションメソッド+	 (void)animateWithDuration:(NSTimeInterval)duration	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 animations:(void	 ...
UIViewAnimationOptions・慣性ついてる系UIViewAnimationOptionCurveEaseInOutUIViewAnimationOptionCurveEaseInUIViewAnimationOptionCurv...
UIViewAnimationOptions・慣性ついてる系UIViewAnimationOptionCurveEaseInOutUIViewAnimationOptionCurveEaseInUIViewAnimationOptionCurv...
UIViewAnimationOptions・慣性ついてる系UIViewAnimationOptionCurveEaseInOutUIViewAnimationOptionCurveEaseInUIViewAnimationOptionCurv...
UIViewAnimationOptions・慣性ついてる系UIViewAnimationOptionCurveEaseInOutUIViewAnimationOptionCurveEaseInUIViewAnimationOptionCurv...
UIViewAnimationOptions・慣性ついてる系UIViewAnimationOptionCurveEaseInOutUIViewAnimationOptionCurveEaseInUIViewAnimationOptionCurv...
Animationできる対象✤   UIViewの位置系プロパティ    ✤   alpha    ✤   frame
サンプル1✤   サムネイル画像をクリックすると、大きい    画像を拡大表示するデモ
ちょっとひねりを加える✤   駅探アプリのリセット動作    ✤   Apple iPhone3G ad ekitan Japanese
その2・transformを使う
transformとは✤   UIViewのframeとは別に、回転や倍率や平    行移動を設定する    ✤   内部的にはアフィン変換の行列を保持していると思わ        れる
transform設定✤   transform    ✤   CGAffineTransformMakeRotation (回転)    ✤   CGAffineTransformMakeScale(x倍率, y倍率)    ✤   CGAffineTr...
サンプル2✤   UILabelViewを、回転させつつ下に落とす    アニメーション
その3・2つのviewを切替
UIView切り替えメソッド+	 (void)transitionFromView:(UIView	 *)fromView	 	     	  	  	  	  toView:(UIView	 *)toView	 	     	  	  	  ...
UIViewの切り替えアニメUIViewAnimationOptionTransitionFlipFromLeftUIViewAnimationOptionTransitionFlipFromRightUIViewAnimationOption...
ワンポイント✤   切り替える画像を、共通の親ビューの中に    入れておく。     親ビュー                  画像
サンプル3✤   2つのUIImageViewを、入れ替え表示する    アニメーション
まとめ✤   アニメーションリッチなUIを作ろう!✤   実装も難しくない!    ✤   そう、UIViewならね✤   ちょっとした工夫でかっこ良くなる!
Upcoming SlideShare
Loading in …5
×

SWWDC UIViewアニメーション 仙台iOS開発者勉強会 2012/06/23

2,228 views

Published on

2012/06/23 SWWDC仙台iOS開発者勉強会にて発表した「 UIViewアニメーション 」についての資料です。

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,228
On SlideShare
0
From Embeds
0
Number of Embeds
148
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • SWWDC UIViewアニメーション 仙台iOS開発者勉強会 2012/06/23

    1. 1. UIViewのアニメーションtotottiDate 2012/06/23
    2. 2. 自己紹介
    3. 3. 自己紹介✤ twitter : @tototti✤ iOSとかjQueryで何かをカチャカチャ...ッターンと作っ てます。
    4. 4. アニメーション✤ UIをリッチに ✤ iOS標準の種々のアニメーション ✤ 操作に対するレスポンス表現✤ 簡単にアニメーションを実現 ✤ そう、UIViewならね
    5. 5. その1・アニメーション基礎
    6. 6. UIViewアニメーションメソッド+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
    7. 7. UIViewAnimationOptions・慣性ついてる系UIViewAnimationOptionCurveEaseInOutUIViewAnimationOptionCurveEaseInUIViewAnimationOptionCurveEaseOut・慣性ついてない系UIViewAnimationOptionCurveLinear
    8. 8. UIViewAnimationOptions・慣性ついてる系UIViewAnimationOptionCurveEaseInOutUIViewAnimationOptionCurveEaseInUIViewAnimationOptionCurveEaseOut・慣性ついてない系UIViewAnimationOptionCurveLinear
    9. 9. UIViewAnimationOptions・慣性ついてる系UIViewAnimationOptionCurveEaseInOutUIViewAnimationOptionCurveEaseInUIViewAnimationOptionCurveEaseOut・慣性ついてない系UIViewAnimationOptionCurveLinear
    10. 10. UIViewAnimationOptions・慣性ついてる系UIViewAnimationOptionCurveEaseInOutUIViewAnimationOptionCurveEaseInUIViewAnimationOptionCurveEaseOut・慣性ついてない系UIViewAnimationOptionCurveLinear
    11. 11. UIViewAnimationOptions・慣性ついてる系UIViewAnimationOptionCurveEaseInOutUIViewAnimationOptionCurveEaseInUIViewAnimationOptionCurveEaseOut・慣性ついてない系UIViewAnimationOptionCurveLinear
    12. 12. Animationできる対象✤ UIViewの位置系プロパティ ✤ alpha ✤ frame
    13. 13. サンプル1✤ サムネイル画像をクリックすると、大きい 画像を拡大表示するデモ
    14. 14. ちょっとひねりを加える✤ 駅探アプリのリセット動作 ✤ Apple iPhone3G ad ekitan Japanese
    15. 15. その2・transformを使う
    16. 16. transformとは✤ UIViewのframeとは別に、回転や倍率や平 行移動を設定する ✤ 内部的にはアフィン変換の行列を保持していると思わ れる
    17. 17. transform設定✤ transform ✤ CGAffineTransformMakeRotation (回転) ✤ CGAffineTransformMakeScale(x倍率, y倍率) ✤ CGAffineTransformMakeTranslation(x移動, y移動) ✤ CGAffineTransformIdentity ←transformリセット
    18. 18. サンプル2✤ UILabelViewを、回転させつつ下に落とす アニメーション
    19. 19. その3・2つのviewを切替
    20. 20. UIView切り替えメソッド+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion
    21. 21. UIViewの切り替えアニメUIViewAnimationOptionTransitionFlipFromLeftUIViewAnimationOptionTransitionFlipFromRightUIViewAnimationOptionTransitionCurlUpUIViewAnimationOptionTransitionCurlDownUIViewAnimationOptionTransitionCrossDissolveUIViewAnimationOptionTransitionFlipFromTopUIViewAnimationOptionTransitionFlipFromBottom
    22. 22. ワンポイント✤ 切り替える画像を、共通の親ビューの中に 入れておく。 親ビュー 画像
    23. 23. サンプル3✤ 2つのUIImageViewを、入れ替え表示する アニメーション
    24. 24. まとめ✤ アニメーションリッチなUIを作ろう!✤ 実装も難しくない! ✤ そう、UIViewならね✤ ちょっとした工夫でかっこ良くなる!

    ×