Weitere ähnliche Inhalte
Ähnlich wie 用途に合わせたアニメーションの実装方法 (20)
Mehr von Takao Sumitomo (20)
用途に合わせたアニメーションの実装方法
- 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
- 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. 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で動きを入れる
- 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でアニメーションを定義
コードからアニメーションを実行
- 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つのものも存在します。
- 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
遷移後のレイアウト
どのように遷移するか
(次ページ)実行
- 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. 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>
- 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. 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>