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.
DroidKaigi 2016 @cattaka_net
用途に合わせた
アニメーションの実装方法
Takao Sumitomo
@cattaka_net
DroidKaigi 2016 @cattaka_net
自己紹介
●
住友 孝郎(Takao Sumitomo)
●
Androidアプリ開発者
●
開発経歴
●
Androidアプリ
●
iOSアプリ(ちょっとだけ)
●
業務系Webアプリ...
DroidKaigi 2016 @cattaka_net
アプリに動きをつけていますか?
DroidKaigi 2016 @cattaka_net
必要なときにググれば
良いと思っていませんか
DroidKaigi 2016 @cattaka_net
実はアニメーションの仕組みは
AndroidのFWには沢山あります
DroidKaigi 2016 @cattaka_net
一口にアニメーションといっても
対象は何があるでしょう
●
Viewの中身を動かす
●
View自体を動かす
●
複数のViewを含むレイアウトを切り替える
DroidKaigi 2016 @cattaka_net
今のAndroidフレームワークの現状
●
それぞれに仕組みが準備されています。
●
でも新しいのや古いのやでそれぞれに複数あ
り、ややこしいことになっている
DroidKaigi 2016 @cattaka_net
今回はそれを
整理したいというお話です
DroidKaigi 2016 @cattaka_net
Viewの中身を動かす
DroidKaigi 2016 @cattaka_net
Viewの中身を動かす
●
2種類
●
Animation Drawable
●
Animated Vector Drawable
DroidKaigi 2016 @cattaka_net
Animation Drawable
●
要はパラパラアニメ
●
必要なもの:複数の画像 & xml
(1) (2)(3)
DroidKaigi 2016 @cattaka_net
Animation Drawable
<?xml version="1.0" encoding="utf-8"?>
<animation-list
xmlns:android="http...
DroidKaigi 2016 @cattaka_net
Animation Drawable
ImageView logoImage
= (ImageView) findViewById(R.id.image_logo);
logoImage...
DroidKaigi 2016 @cattaka_net
Animated Vector Drawable
●
SVGをアニメーションさせる
●
必要なもの:xml
DroidKaigi 2016 @cattaka_net
Animated Vector Drawable
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http:/...
DroidKaigi 2016 @cattaka_net
Animated Vector Drawable
<?xml version="1.0" encoding="utf-8"?>
<animated-vector
xmlns:androi...
DroidKaigi 2016 @cattaka_net
View自体を動かす
DroidKaigi 2016 @cattaka_net
View Animation
●
必要なもの:xml & code
DroidKaigi 2016 @cattaka_net
View Animation
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schema...
DroidKaigi 2016 @cattaka_net
View Animation
TranslateAnimation anim
= new TranslateAnimation(0, mTargetView.getWidth(),
0,...
DroidKaigi 2016 @cattaka_net
Property Animation
●
2通りの実装がFWにある
●
ObjectAnimatorクラス
●
必要なもの:xml or code
●
リフレクションを使っていて、属性の...
DroidKaigi 2016 @cattaka_net
ObjectAnimator
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android="http://s...
DroidKaigi 2016 @cattaka_net
ObjectAnimator
Viewクラスのメソッドを指している。
つまりリフレクションで叩いている。
DroidKaigi 2016 @cattaka_net
ObjectAnimator
ObjectAnimator animator
= ObjectAnimator.ofFloat(mTargetButton, "translationX"...
DroidKaigi 2016 @cattaka_net
ViewPropertyAnimator
mTargetView.animate()
.translationX(mTargetButton.getWidth())
.setDurati...
DroidKaigi 2016 @cattaka_net
複数のViewを含むレイアウト
DroidKaigi 2016 @cattaka_net
名前の整理
●
Activity Animation
●
Fragment Animation
●
Transition
●
Activity Transition
●
Fragment...
DroidKaigi 2016 @cattaka_net
Activity/Fragment Animation
DroidKaigi 2016 @cattaka_net
Activity Animation
●
必要なもの:xml & code
●
Viewを動かすのに使ったアニメーションと同
じものを使う
Intent intent = new Int...
DroidKaigi 2016 @cattaka_net
Fragment Animation
●
必要なもの:xml & code
●
Viewを動かすのに使ったアニメーションと同じもの
を使う
●
Support LibraryのFragm...
DroidKaigi 2016 @cattaka_net
Fragment Animation
Fragment fragment = Fa1Fragment.newInstance();
FragmentTransaction ft = ge...
DroidKaigi 2016 @cattaka_net
Transition
DroidKaigi 2016 @cattaka_net
3つのTransition共通の考え方
●
遷移前と遷移後のレイアウトに含まれるViewを
3つのグループに分けて考える
●
前後の画面と共通のView
●
前の画面のみのView
●
...
DroidKaigi 2016 @cattaka_net
3つのTransition共通の考え方
(1)
(2)
(3)
(4)
●
前後の画面と共通のView:(1)は移動させる
●
前の画面のみのView :(2)(3)はフェードアウトさ
...
DroidKaigi 2016 @cattaka_net
Transition
●
必要なもの:xml & code
●
ViewGroupの中身を入れ替えるときに使う
●
正直ViewGroupをコードから直接追加したり除
去したり余りしない...
DroidKaigi 2016 @cattaka_net
Transition
(1)
(2)
(3)
(4)
DroidKaigi 2016 @cattaka_net
Transition
Scene scene = Scene.getSceneForLayout(mContainerLayout,
R.layout.activity_ta_child...
DroidKaigi 2016 @cattaka_net
Transition
<?xml version="1.0" encoding="utf-8"?>
<transitionSet
xmlns:android="http://schema...
DroidKaigi 2016 @cattaka_net
指定できる動きの種類
Class Tag 動き
AutoTransition <autoTransition/> 自動
Fade <fade/> フェードイン/アウト
(オプションで指定...
DroidKaigi 2016 @cattaka_net
Activity Transition
●
必要なもの:xml or code
(1)
(2)
(3)
(4)
DroidKaigi 2016 @cattaka_net
Activity Transition
ActivityOptions options
= ActivityOptions.makeSceneTransitionAnimation(
t...
DroidKaigi 2016 @cattaka_net
Activity Transition
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="htt...
DroidKaigi 2016 @cattaka_net
Fragment Transition
●
必要なもの:xml or code
(1)
(2)
(3)
(4)
DroidKaigi 2016 @cattaka_net
Fragment Transition
Fragment fragment = Ft2Fragment.newInstance();
fragment.setEnterTransitio...
DroidKaigi 2016 @cattaka_net
Fragment Transition
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="htt...
DroidKaigi 2016 @cattaka_net
APIレベルについて
名前 API Level
Drawable Animation 1 (Android 1.0)
Animated Vector Drawable 21 (Andro...
DroidKaigi 2016 @cattaka_net
APIレベルについて
●
Android 5.0で一通り揃っている
●
Transitionが比較的新しいバージョンでないと
使えない
●
Support Libraryにメソッドはある...
DroidKaigi 2016 @cattaka_net
まとめ
●
アニメーションの仕組みは地味に多い
●
でもそれぞれ用途が異なる
●
用途に合わせたものを使おう
●
ユーザーにわかりやすい表現をしよう
DroidKaigi 2016 @cattaka_net
サンプルアプリ
https://github.com/cattaka/LearnAnimation
ほとんどのコードのSnippetが入ってます
DroidKaigi 2016 @cattaka_net
ご清聴ありがとうございました
Takao Sumitomo
@cattaka_net
Upcoming SlideShare
Loading in …5
×

用途に合わせたアニメーションの実装方法

14,104 views

Published on

Droidkaigi2016の発表資料です。

Published in: Technology
  • Hi All, We are planning to start Hadoop online training batch on this week... If any one interested to attend the demo please register in our website... For this batch we are also provide everyday recorded sessions with Materials. For more information feel free to contact us : siva@keylabstraining.com. For Course Content and Recorded Demo Click Here : http://www.keylabstraining.com/hadoop-online-training-hyderabad-bangalore
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

用途に合わせたアニメーションの実装方法

  1. 1. DroidKaigi 2016 @cattaka_net 用途に合わせた アニメーションの実装方法 Takao Sumitomo @cattaka_net
  2. 2. DroidKaigi 2016 @cattaka_net 自己紹介 ● 住友 孝郎(Takao Sumitomo) ● Androidアプリ開発者 ● 開発経歴 ● Androidアプリ ● iOSアプリ(ちょっとだけ) ● 業務系Webアプリケーション ● 業務系Windowsアプリ ● その他 ● 電子工作 ● OpenCV ● ウォンテッドリー株式会社所属 2014年12月〜
  3. 3. DroidKaigi 2016 @cattaka_net アプリに動きをつけていますか?
  4. 4. DroidKaigi 2016 @cattaka_net 必要なときにググれば 良いと思っていませんか
  5. 5. DroidKaigi 2016 @cattaka_net 実はアニメーションの仕組みは AndroidのFWには沢山あります
  6. 6. DroidKaigi 2016 @cattaka_net 一口にアニメーションといっても 対象は何があるでしょう ● Viewの中身を動かす ● View自体を動かす ● 複数のViewを含むレイアウトを切り替える
  7. 7. DroidKaigi 2016 @cattaka_net 今のAndroidフレームワークの現状 ● それぞれに仕組みが準備されています。 ● でも新しいのや古いのやでそれぞれに複数あ り、ややこしいことになっている
  8. 8. DroidKaigi 2016 @cattaka_net 今回はそれを 整理したいというお話です
  9. 9. DroidKaigi 2016 @cattaka_net Viewの中身を動かす
  10. 10. DroidKaigi 2016 @cattaka_net Viewの中身を動かす ● 2種類 ● Animation Drawable ● Animated Vector Drawable
  11. 11. DroidKaigi 2016 @cattaka_net Animation Drawable ● 要はパラパラアニメ ● 必要なもの:複数の画像 & xml (1) (2)(3)
  12. 12. DroidKaigi 2016 @cattaka_net Animation Drawable <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/roll_cat_1" android:duration="200"/> <item android:drawable="@drawable/roll_cat_2" android:duration="200"/> <item android:drawable="@drawable/roll_cat_1" android:duration="200"/> <item android:drawable="@drawable/roll_cat_3" android:duration="200"/> </animation-list> drawable/roll_cat.xml
  13. 13. DroidKaigi 2016 @cattaka_net Animation Drawable ImageView logoImage = (ImageView) findViewById(R.id.image_logo); logoImage.setBackgroundResource(R.drawable.roll_cat); AnimationDrawable rollCatDrawable = (AnimationDrawable) logoImage.getDrawable(); rollCatDrawable.start(); アニメーションを開始するコード
  14. 14. DroidKaigi 2016 @cattaka_net Animated Vector Drawable ● SVGをアニメーションさせる ● 必要なもの:xml
  15. 15. DroidKaigi 2016 @cattaka_net Animated Vector Drawable <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="characterGroup"> <path android:name="character" android:fillColor="#000000" android:pathData="M 80,0 24,24 0,80 l 24,56 56, -省略-” /> </group> <group android:name="feedGroup" android:translateX="80"> <path android:fillColor="#000000" android:pathData="M 72,64 l -8,8 0,16 8,8 16,0 8-省略-” /> /> </group> </vector> これは動きのないただのSVG
  16. 16. DroidKaigi 2016 @cattaka_net Animated Vector Drawable <?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vector_drawable" > <target android:name="feedGroup" android:animation="@anim/av_translation" /> <target android:name="character" android:animation="@anim/av_path_morph" /> </animated-vector> android:animationで動きを入れる
  17. 17. DroidKaigi 2016 @cattaka_net View自体を動かす
  18. 18. DroidKaigi 2016 @cattaka_net View Animation ● 必要なもの:xml & code
  19. 19. DroidKaigi 2016 @cattaka_net View Animation <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000" android:fromXDelta="0%" android:fromYDelta="0%" android:interpolator="@android:anim/bounce_interpolator" android:toXDelta="100%" android:toYDelta="100%"/> Animation anim = AnimationUtils.loadAnimation(this, R.anim.va_move); mTargetButton.startAnimation(anim); xmlでアニメーションを定義 コードからアニメーションを実行
  20. 20. DroidKaigi 2016 @cattaka_net View Animation TranslateAnimation anim = new TranslateAnimation(0, mTargetView.getWidth(), 0, mTargetView.getHeight()); anim.setDuration(3000); mTargetView.startAnimation(anim); コードからアニメーションを実行 コードでアニメーションを定義
  21. 21. DroidKaigi 2016 @cattaka_net Property Animation ● 2通りの実装がFWにある ● ObjectAnimatorクラス ● 必要なもの:xml or code ● リフレクションを使っていて、属性の名前でアニメーション させる ● ViewPropertyAnimatorクラス ● 必要なもの:code ● codeからしか使えないが、手軽に使える
  22. 22. DroidKaigi 2016 @cattaka_net ObjectAnimator <?xml version="1.0" encoding="utf-8"?> <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000" android:interpolator="@android:anim/bounce_interpolator" android:propertyName="translationX" android:valueFrom="0" android:valueTo="300" android:valueType="floatType"/> Animator anim = AnimatorInflater.loadAnimator(this, R.animator.pa_move); anim.setTarget(mTargetButton); anim.start(); このtranslationXは何処を指しているか? xmlでアニメーションを定義 コードからアニメーションを実行
  23. 23. DroidKaigi 2016 @cattaka_net ObjectAnimator Viewクラスのメソッドを指している。 つまりリフレクションで叩いている。
  24. 24. DroidKaigi 2016 @cattaka_net ObjectAnimator ObjectAnimator animator = ObjectAnimator.ofFloat(mTargetButton, "translationX", 0F, mTargetButton.getWidth()); animator.setDuration(3000); animator.start(); 他にも ofInt や ofObject や ofMultiFloat などがある コードからアニメーションを実行 コードでアニメーションを定義
  25. 25. DroidKaigi 2016 @cattaka_net ViewPropertyAnimator mTargetView.animate() .translationX(mTargetButton.getWidth()) .setDuration(3000) .start(); mTargetView.animate() .rotation(360f) .setDuration(3000) .start(); X方向に平行移動 360°回転 移動や回転以外に拡大縮小や透過も同じように書けます
  26. 26. DroidKaigi 2016 @cattaka_net 複数のViewを含むレイアウト
  27. 27. DroidKaigi 2016 @cattaka_net 名前の整理 ● Activity Animation ● Fragment Animation ● Transition ● Activity Transition ● Fragment Transition それぞれ異なる動きをする。 (正式名称が見当たらなものは仮の名前です)
  28. 28. DroidKaigi 2016 @cattaka_net Activity/Fragment Animation
  29. 29. DroidKaigi 2016 @cattaka_net Activity Animation ● 必要なもの:xml & code ● Viewを動かすのに使ったアニメーションと同 じものを使う Intent intent = new Intent(this, At2Activity.class); startActivity(intent); overridePendingTransition(R.anim.aa_slide_in, R.anim.aa_slide_out);
  30. 30. DroidKaigi 2016 @cattaka_net Fragment Animation ● 必要なもの:xml & code ● Viewを動かすのに使ったアニメーションと同じもの を使う ● Support LibraryのFragmentかどうかによって落と し穴がある ● Support Libraryを使うとき – View Animationを使う ● Support Libraryを使わないとき – Property Animationを使う
  31. 31. DroidKaigi 2016 @cattaka_net Fragment Animation Fragment fragment = Fa1Fragment.newInstance(); FragmentTransaction ft = getSupportFragmentManager().beginTransaction(); ft.setCustomAnimations(R.anim.aa_slide_in, R.anim.aa_slide_out); ft.replace(R.id.layout_fragment, fragment); ft.commit(); バックキーで戻る時のアニメーションを指定する 引数が4つのものも存在します。
  32. 32. DroidKaigi 2016 @cattaka_net Transition
  33. 33. DroidKaigi 2016 @cattaka_net 3つのTransition共通の考え方 ● 遷移前と遷移後のレイアウトに含まれるViewを 3つのグループに分けて考える ● 前後の画面と共通のView ● 前の画面のみのView ● 後の画面のみのView ● これら3グループについてそれぞれ動きを指定す る
  34. 34. DroidKaigi 2016 @cattaka_net 3つのTransition共通の考え方 (1) (2) (3) (4) ● 前後の画面と共通のView:(1)は移動させる ● 前の画面のみのView :(2)(3)はフェードアウトさ せる ● 後の画面のみのView :(4)はフェードインさせる
  35. 35. DroidKaigi 2016 @cattaka_net Transition ● 必要なもの:xml & code ● ViewGroupの中身を入れ替えるときに使う ● 正直ViewGroupをコードから直接追加したり除 去したり余りしないのでそもそも出番がすくな い
  36. 36. DroidKaigi 2016 @cattaka_net Transition (1) (2) (3) (4)
  37. 37. DroidKaigi 2016 @cattaka_net Transition Scene scene = Scene.getSceneForLayout(mContainerLayout, R.layout.activity_ta_child_rb, this); Transition transition = TransitionInflater.from(this).inflateTransition(R.transition.ta); TransitionManager.go(scene, transition); 対象となるViewGroup 遷移後のレイアウト どのように遷移するか (次ページ)実行
  38. 38. DroidKaigi 2016 @cattaka_net Transition <?xml version="1.0" encoding="utf-8"?> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <fade/> <changeBounds> <targets> <target android:excludeId="@id/button_excluded"/> </targets> </changeBounds> </transitionSet>
  39. 39. DroidKaigi 2016 @cattaka_net 指定できる動きの種類 Class Tag 動き AutoTransition <autoTransition/> 自動 Fade <fade/> フェードイン/アウト (オプションで指定) ChangeBounds <changeBounds/> 移動とリサイズ Javadocを見ると、この他にChangeClipBounds, ChangeImageTransform, ChangeScroll, ChangeTransform, TransitionSet, Visibility, Explode, Slide がある
  40. 40. DroidKaigi 2016 @cattaka_net Activity Transition ● 必要なもの:xml or code (1) (2) (3) (4)
  41. 41. DroidKaigi 2016 @cattaka_net Activity Transition ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation( this, new Pair<>(view.findViewById(R.id.image_logo), “transition:image_logo”) ); getWindow().setSharedElementEnterTransition(new ChangeBounds()); getWindow().setSharedElementReturnTransition(new ChangeBounds()); getWindow().setEnterTransition(new Fade()); getWindow().setExitTransition(new Explode()); Intent intent = new Intent(this, At2Activity.class); startActivity(intent, options.toBundle()); 遷移の前後で共通の要素を指定 それぞれの動きを指定する
  42. 42. DroidKaigi 2016 @cattaka_net Activity Transition <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/image_logo" android:layout_width="match_parent" android:layout_height="wrap_content" android:adjustViewBounds="true" android:src="@drawable/logo" android:transitionName=“transition:image_logo”/> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_gravity="center_horizontal" android:text="Button 3"/> </RelativeLayout>
  43. 43. DroidKaigi 2016 @cattaka_net Fragment Transition ● 必要なもの:xml or code (1) (2) (3) (4)
  44. 44. DroidKaigi 2016 @cattaka_net Fragment Transition Fragment fragment = Ft2Fragment.newInstance(); fragment.setEnterTransition(new Fade(Fade.IN)); fragment.setExitTransition(new Fade(Fade.OUT)); fragment.setSharedElementEnterTransition(new ChangeBounds()); fragment.setSharedElementReturnTransition(new ChangeBounds()); FragmentTransaction ft = getFragmentManager().beginTransaction(); ft.replace(R.id.layout_fragment, fragment); Fragment currentFragment = getFragmentManager().findFragmentById(R.id.layout_fragment); ft.addSharedElement(currentFragment.getView().findViewById(R.id.image_logo), "transition:image_logo"); ft.addSharedElement( currentFragment.getView().findViewById(R.id.button_a), "transition:button_a"); ft.addToBackStack(null); ft.commit(); 遷移の前後で共通の要素を指定 それぞれの動きを指定する
  45. 45. DroidKaigi 2016 @cattaka_net Fragment Transition <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- 省略 --> <ImageView android:id="@+id/image_logo" ~~~~~~ android:transitionName="transition:image_logo"/> <FrameLayout ~~~~~~ > <Button android:id="@+id/button_a" ~~~~~~ android:text="Button A" android:transitionName="transition:button_a"/> </FrameLayout> <!-- 省略 --> </RelativeLayout>
  46. 46. DroidKaigi 2016 @cattaka_net APIレベルについて 名前 API Level Drawable Animation 1 (Android 1.0) Animated Vector Drawable 21 (Android 5.0) View Animation 1 (Android 1.0) Property Animation 11 (Android 3.0.x) Transition 19 (Android 4.4) Activity Transition 21 (Android 5.0) Fragment Transition 21 (Android 5.0)
  47. 47. DroidKaigi 2016 @cattaka_net APIレベルについて ● Android 5.0で一通り揃っている ● Transitionが比較的新しいバージョンでないと 使えない ● Support Libraryにメソッドはあるけど肝心の Transitionのクラスが無いので使えない
  48. 48. DroidKaigi 2016 @cattaka_net まとめ ● アニメーションの仕組みは地味に多い ● でもそれぞれ用途が異なる ● 用途に合わせたものを使おう ● ユーザーにわかりやすい表現をしよう
  49. 49. DroidKaigi 2016 @cattaka_net サンプルアプリ https://github.com/cattaka/LearnAnimation ほとんどのコードのSnippetが入ってます
  50. 50. DroidKaigi 2016 @cattaka_net ご清聴ありがとうございました Takao Sumitomo @cattaka_net

×