Download as PDF, PPTX
Recommended
![[potatotips #18] Android M Developer Preview & Wear 最新トピック](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fpotatotipskenichikambara20150616-150616104300-lva1-app6892-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More Related Content
What's hot
Similar to 用途に合わせたアニメーションの実装方法
More from Takao Sumitomo
用途に合わせたアニメーションの実装方法
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.DroidKaigi 2016 @cattaka_netAnimation Drawable<?xml version="1.0"encoding="utf-8"?><animation-listxmlns:android="http://schemas.android.com/apk/res/android"android:oneshot="false"><itemandroid:drawable="@drawable/roll_cat_1"android:duration="200"/><itemandroid:drawable="@drawable/roll_cat_2"android:duration="200"/><itemandroid:drawable="@drawable/roll_cat_1"android:duration="200"/><itemandroid:drawable="@drawable/roll_cat_3"android:duration="200"/></animation-list>drawable/roll_cat.xml
- 13.DroidKaigi 2016 @cattaka_netAnimation DrawableImageView logoImage=(ImageView) findViewById(R.id.image_logo);logoImage.setBackgroundResource(R.drawable.roll_cat);AnimationDrawable rollCatDrawable= (AnimationDrawable) logoImage.getDrawable();rollCatDrawable.start();アニメーションを開始するコード
- 14.
- 15.DroidKaigi 2016 @cattaka_netAnimated Vector Drawable<?xmlversion="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"><pathandroid: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"><pathandroid:fillColor="#000000"android:pathData="M 72,64 l -8,8 0,16 8,8 16,0 8-省略-” />/></group></vector>これは動きのないただのSVG
- 16.DroidKaigi 2016 @cattaka_netAnimated Vector Drawable<?xmlversion="1.0" encoding="utf-8"?><animated-vectorxmlns:android="http://schemas.android.com/apk/res/android"android:drawable="@drawable/vector_drawable" ><targetandroid:name="feedGroup"android:animation="@anim/av_translation" /><targetandroid:name="character"android:animation="@anim/av_path_morph" /></animated-vector>android:animationで動きを入れる
- 17.
- 18.
- 19.DroidKaigi 2016 @cattaka_netView Animation<?xml version="1.0"encoding="utf-8"?><translatexmlns: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.DroidKaigi 2016 @cattaka_netView AnimationTranslateAnimation anim=new TranslateAnimation(0, mTargetView.getWidth(),0, mTargetView.getHeight());anim.setDuration(3000);mTargetView.startAnimation(anim);コードからアニメーションを実行コードでアニメーションを定義
- 21.DroidKaigi 2016 @cattaka_netProperty Animation●2通りの実装がFWにある●ObjectAnimatorクラス●必要なもの：xml orcode●リフレクションを使っていて、属性の名前でアニメーションさせる●ViewPropertyAnimatorクラス●必要なもの：code●codeからしか使えないが、手軽に使える
- 22.DroidKaigi 2016 @cattaka_netObjectAnimator<?xml version="1.0" encoding="utf-8"?><objectAnimatorxmlns: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"/>Animatoranim= AnimatorInflater.loadAnimator(this, R.animator.pa_move);anim.setTarget(mTargetButton);anim.start();このtranslationXは何処を指しているか？xmlでアニメーションを定義コードからアニメーションを実行
- 23.
- 24.DroidKaigi 2016 @cattaka_netObjectAnimatorObjectAnimator animator= ObjectAnimator.ofFloat(mTargetButton,"translationX",0F, mTargetButton.getWidth());animator.setDuration(3000);animator.start();他にも ofInt や ofObject や ofMultiFloat などがあるコードからアニメーションを実行コードでアニメーションを定義
- 25.
- 26.
- 27.DroidKaigi 2016 @cattaka_net名前の整理●Activity Animation●Fragment Animation●Transition●ActivityTransition●Fragment Transitionそれぞれ異なる動きをする。（正式名称が見当たらなものは仮の名前です）
- 28.
- 29.DroidKaigi 2016 @cattaka_netActivity 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.DroidKaigi 2016 @cattaka_netFragment Animation●必要なもの：xml &code●Viewを動かすのに使ったアニメーションと同じものを使う●Support LibraryのFragmentかどうかによって落とし穴がある●Support Libraryを使うとき– View Animationを使う●Support Libraryを使わないとき– Property Animationを使う
- 31.DroidKaigi 2016 @cattaka_netFragment AnimationFragment 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();バックキーで戻る時のアニメーションを指定する引数が４つのものも存在します。
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.DroidKaigi 2016 @cattaka_netTransitionScene 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.DroidKaigi 2016 @cattaka_netTransition<?xml version="1.0" encoding="utf-8"?><transitionSetxmlns:android="http://schemas.android.com/apk/res/android"><fade/><changeBounds><targets><targetandroid:excludeId="@id/button_excluded"/></targets></changeBounds></transitionSet>
- 39.DroidKaigi 2016 @cattaka_net指定できる動きの種類Class Tag 動きAutoTransition<autoTransition/> 自動Fade <fade/> フェードイン/アウト(オプションで指定)ChangeBounds <changeBounds/> 移動とリサイズJavadocを見ると、この他にChangeClipBounds, ChangeImageTransform,ChangeScroll, ChangeTransform, TransitionSet, Visibility, Explode, Slideがある
- 40.DroidKaigi 2016 @cattaka_netActivity Transition●必要なもの：xml orcode(1)(2)(3)(4)
- 41.DroidKaigi 2016 @cattaka_netActivity TransitionActivityOptions 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_netActivity 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"><ImageViewandroid: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”/><Buttonandroid: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.DroidKaigi 2016 @cattaka_netFragment Transition●必要なもの：xml orcode(1)(2)(3)(4)
- 44.DroidKaigi 2016 @cattaka_netFragment TransitionFragment 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_netFragment Transition<?xml version="1.0"encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><!-- 省略 --><ImageViewandroid:id="@+id/image_logo"~~~~~~android:transitionName="transition:image_logo"/><FrameLayout~~~~~~><Buttonandroid:id="@+id/button_a"~~~~~~android:text="Button A"android:transitionName="transition:button_a"/></FrameLayout><!-- 省略 --></RelativeLayout>
- 46.DroidKaigi 2016 @cattaka_netAPIレベルについて名前 API LevelDrawableAnimation 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.
- 48.
- 49.
- 50.