Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

How to implement material design animation

takahirom
March 09, 2017

How to implement material design animation

アニメーションがカットされているため、動画版のほうが分かりやすいかもしれません : https://goo.gl/photos/FofgyPrdokrjKtxVA
https://droidkaigi.github.io/2017/timetable.html#session-41

takahirom

March 09, 2017
Tweet

More Decks by takahirom

Other Decks in Programming

Transcript

  1. ˖ :BIPP+"1"/ך"OESPJEؒٝآص، ˖ 劤せכ嬁「䃨峔 ׭׿ׄױ׋ַמ׹  ˖ "OESPJEָ㥨ֹ ˖ UBLBIJSPN

    !OFX@SVOOBCMF  ˖ 2JJUBהַ׮剅ְגְ׷ךד״׹׃ֻ ֶ격ְ׃תׅ 荈䊹稱➜
  2. – Motion Lead @Google. John Schlemmer “one of the main

    components of what makes material, material. ”
  3. ˖ 3FTQPOTJWF
 ̔⽯䏟ח⿾䘔׃ג鸞䏝ָ鸞ְ ˖ /BUVSBM
 ̔荈搫ז⹛ֹ ˖ "XBSF
 ̔➭ךوذٔ،ٕה䓼锃⹛⡲ ˖

    *OUFOUJPOBM
 ̔䠐㔳ָ֮׷ ٌ٦ءّٝך⾱⵱ .BUFSJBM%FTJHO(VJEFMJOF״׶ %SPJE,BJHJPDJBM"OESPJEBQQ״׶
  4. ˖ وذٔ،ٕرؠ؎ٝ ˖ ٌ٦ءّٝ ˖ أة؎ٕ ˖ ٖ؎،ؐز ˖ ؝ٝه٦طٝز

    ˖ ػة٦ٝ ˖ 㷕统ה䞔㜠䲿⣘ ˖ ِ٦ؠؽٔذ؍ ˖ ٔا٦أ وذٔ،ٕرؠ؎ٝؖ؎سٓ؎ٝ אך畍ַ׵圓䧭ׁ׸׷
  5. ؖ؎سٓ؎ٝⰻך铡僇ׅ׷鿇ⴓ ˖ وذٔ،ٕرؠ؎ٝ ˖ 넝䏝הءٍسؐ ˖ ٌ٦ءّٝ ˖ 竰竲儗꟦ה؎٦آؚٝ ˖

    麊⹛ ˖ وذٔ،ٕך㢌䕎 ˖ ؝ؚٖؔٓؿ؍ ˖ ؙٔؒ؎ذ؍ـזؕأةو؎ؤ ˖ ػة٦ٝ ˖ 歗⫷ך铣׫鴥׫ ˖ 歗꬗鼂獳
  6. ˖ وذٔ،ٕرؠ؎ٝ ˖ 넝䏝הءٍسؐ ˖ ٌ٦ءّٝ ˖ 竰竲儗꟦ה؎٦آؚٝ ˖ 麊⹛

    ˖ وذٔ،ٕך㢌䕎 ˖ ؝ؚٖؔٓؿ؍ ˖ ؙٔؒ؎ذ؍ـזؕأةو؎ؤ ˖ ػة٦ٝ ˖ 歗⫷ך铣׫鴥׫ ˖ 歗꬗鼂獳 ؖ؎سٓ؎ٝⰻך铡僇ׅ׷鿇ⴓ
  7. ٖأهٝءـ넝䏝ה⹛涸넝䏝ؔؿإحز 㹋鄲 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:state_pressed="true"> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ"

    android:valueTo="@dimen/touch_raise" /> </item> <item> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0dp" /> </item> </selector> BOJNBUPS@SBJTFYNM
  8. ٖأهٝءـ넝䏝ה⹛涸넝䏝ؔؿإحز 㹋鄲 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:state_pressed="true"> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ"

    android:valueTo="@dimen/touch_raise" /> </item> <item> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0dp" /> </item> </selector> 䬃׃גְ׷הֹך،صً٦ءّٝ׾ 䭷㹀ׅ׷ BOJNBUPS@SBJTFYNM
  9. ٖأهٝءـ넝䏝ה⹛涸넝䏝ؔؿإحز 㹋鄲 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:state_pressed="true"> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ"

    android:valueTo="@dimen/touch_raise" /> </item> <item> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0dp" /> </item> </selector> USBOTJUJPO;׾EQחׅ׷ BOJNBUPS@SBJTFYNM
  10. ٖأهٝءـ넝䏝ה⹛涸넝䏝ؔؿإحز 㹋鄲 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="true" android:state_pressed="true"> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ"

    android:valueTo="@dimen/touch_raise" /> </item> <item> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0dp" /> </item> </selector> BOJNBUPS@SBJTFYNM EQ ׮ה׮הך&MFWBUJPO  EQ ⹛涸넝䏝ؔؿإحز EQ חז׷
  11. ؖ؎سٓ؎ٝⰻך铡僇ׅ׷鿇ⴓ ˖ وذٔ،ٕرؠ؎ٝ ˖ 넝䏝הءٍسؐ ˖ ٌ٦ءّٝ ˖ 竰竲儗꟦ה؎٦آؚٝ ˖

    麊⹛ ˖ وذٔ،ٕך㢌䕎 ˖ ؝ؚٖؔٓؿ؍ ˖ ؙٔؒ؎ذ؍ـזؕأةو؎ؤ ˖ ػة٦ٝ ˖ 歗⫷ך铣׫鴥׫ ˖ 歗꬗鼂獳
  12. ؖ؎سٓ؎ٝⰻך铡僇ׅ׷鿇ⴓ ˖ وذٔ،ٕرؠ؎ٝ ˖ 넝䏝הءٍسؐ ˖ ٌ٦ءّٝ ˖ 竰竲儗꟦ה؎٦آؚٝ ˖

    麊⹛ ˖ وذٔ،ٕך㢌䕎 ˖ ؝ؚٖؔٓؿ؍ ˖ ؙٔؒ؎ذ؍ـזؕأةو؎ؤ ˖ ػة٦ٝ ˖ 歗⫷ך铣׫鴥׫ ˖ 歗꬗鼂獳
  13. ٌ٦ءّٝ؎٦آؚٝ 㹋鄲 Ͳ͏࣮૷͢Δ͔ ඪ४Χʔϒ4UBOEBSEDVSWF 'BTU0VU4MPX*O*OUFSQPMBUPS ݮ଎Χʔϒ%FDFMFSBUJPODVSWF -JOFBS0VU4MPX*O*OUFSQPMBUPS Ճ଎Χʔϒ"DDFMFSBUJPODVSWF 'BTU0VU-JOFBS*O*OUFSQPMBUPS ٸΧʔϒ4IBSQDVSWF

    1BUI*OUFSQPMBUPS$PNQBU DSFBUF G  G   ViewPropertyAnimatorΛ࢖ͬͨࢦఆํ๏ view.animate() .translationX(100) .setDuration(290) .setInterpolator(new FastOutSlowInInterpolator()) .start(); "1*-FWFM
  14. وذٔ،ٕرؠ؎ٝؖ؎سٓ؎ٝ ➙㔐《׶♳־׷،صً٦ءّٝ鿇ⴓ ˖ وذٔ،ٕرؠ؎ٝ ˖ 넝䏝הءٍسؐ ˖ ٌ٦ءّٝ ˖ 竰竲儗꟦ה؎٦آؚٝ

    ˖ 麊⹛ ˖ وذٔ،ٕך㢌䕎 ˖ ؝ؚٖؔٓؿ؍ ˖ ؙٔؒ؎ذ؍ـזؕأةو؎ؤ ˖ ػة٦ٝ ˖ 歗⫷ך铣׫鴥׫ ˖ 歗꬗鼂獳
  15. 麊⹛ 㹋鄲 ext, TransformingActivity.class); nsCompat.makeSceneTransitionAnimation( iew,getString(R.string.transition_name)).toBundle(); ontext, intent, options); .BJO"DUJWJUZ

    5SBOTGPSNJOH"DUJWJUZ <ImageView android:layout_width="mat android:layout_height="wr android:transitionName="@ <style name="AppTheme.No ٖ؎،ؐز ذ٦و
  16. "DUJWJUZ0QUJPOT$PNQBUד 鼂獳⯋7JFXה鼂獳⯓ך7JFX׾
 穠ןאֽג"DUJWJUZ饯⹛ Intent intent = new Intent(context, TransformingActivity.class); Bundle

    options = ActivityOptionsCompat.makeSceneTransitionAnimation( context, fromView, getString(R.string.transition_name)).toBundle(); ActivityCompat.startActivity(context, intent, options); .BJO"DUJWJUZ
  17. <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:transitionName="@string/transition_name"/> <style name="AppTheme.NoActionBar.Detail"> <item name="android:windowSharedElementEnterTransition">@transition/ default_share</item> <item

    name="android:windowSharedElementReturnTransition">@transition/ default_share</item> </style> ٖ؎،ؐز ذ٦و 5SBOTJUJPO <?xml version="1.0" encoding="utf-8"?> <transitionSet .. android:duration="350" android:interpolator="..."> <changeBounds/> ذ٦وד5SBOTJUJPO׾䭷㹀
  18. android:layout_height="wrap_content" android:transitionName="@string/transition_name"/> <style name="AppTheme.NoActionBar.Detail"> <item name="android:windowSharedElementEnterTransition">@transition/ default_share</item> <item name="android:windowSharedElementReturnTransition">@transition/ default_share</item>

    </style> ذ٦و 5SBOTJUJPO <?xml version="1.0" encoding="utf-8"?> <transitionSet .. android:duration="350" android:interpolator="..."> <changeBounds/> <pathMotion class="**.GravityArcMotion" /> </transitionSet> QBUI.PUJPO׾䭷㹀 ֿ׸ח״׶嘴ⰼ䕎חז׷ DIBOHF#PVOETד獳⹛ 㣐ֹׁ㢌⻉
  19. ˖ 1MBJEח֮׷"SD.PUJPOؙٓأ׾
 䭁䓸׃׋(SBWJUZ"SD.PUJPOؙٓأָ
 ֮׷
 QMBJE(SBWJUZ"SD.PUJPOKBWB 荈搫ז䓜׾⡲׷חכ <?xml version="1.0" encoding="utf-8"?> <transitionSet

    … android:duration="350" android:interpolator=“…”> <changeBounds/> <pathMotion class=“**.GravityArcMotion” /> </transitionSet>
  20. ˖ 1MBJEח֮׷"SD.PUJPOؙٓأ׾
 䭁䓸׃׋(SBWJUZ"SD.PUJPOؙٓأָ
 ֮׷
 QMBJE(SBWJUZ"SD.PUJPOKBWB 荈搫ז䓜׾⡲׷חכ ˟1MBJEהכ(PPHMFךوذٔ،ٕرؠ؎ٝך ؔ٦فٝا٦أך⿫罋㹋鄲דַאرؠ؎ٝصُ٦أ،فٔ <?xml version="1.0"

    encoding="utf-8"?> <transitionSet … android:duration="350" android:interpolator=“…”> <changeBounds/> <pathMotion class=“**.GravityArcMotion” /> </transitionSet>
  21. ˖ 1MBJEח֮׷"SD.PUJPOؙٓأ׾
 䭁䓸׃׋(SBWJUZ"SD.PUJPOؙٓأָ
 ֮׷
 QMBJE(SBWJUZ"SD.PUJPOKBWB ˖ ׋׌ծك٦أה׃גְ׷
 ؿٖ٦يٙ٦ؙך؝٦سָ〢ֻծ
 暴㹀ך勴⟝ך儗ח
 ֲתֻ،صً٦ءّٝ׃זְ׋׭ծ

    ⡲׶湫׃׋
 NBUFSJBMFMFNFOU (SBWJUZ"SD.PUJPOKBWB 荈搫ז䓜׾⡲׷חכ ˟1MBJEהכ(PPHMFךوذٔ،ٕرؠ؎ٝך ؔ٦فٝا٦أך⿫罋㹋鄲דַאرؠ؎ٝصُ٦أ،فٔ <?xml version="1.0" encoding="utf-8"?> <transitionSet … android:duration="350" android:interpolator=“…”> <changeBounds/> <pathMotion class=“**.GravityArcMotion” /> </transitionSet>
  22. ؖ؎سٓ؎ٝⰻך铡僇ׅ׷鿇ⴓ ˖ وذٔ،ٕرؠ؎ٝ ˖ 넝䏝הءٍسؐ ˖ ٌ٦ءّٝ ˖ 竰竲儗꟦ה؎٦آؚٝ ˖

    麊⹛ ˖ وذٔ،ٕך㢌䕎 ˖ ؝ؚٖؔٓؿ؍ ˖ ؙٔؒ؎ذ؍ـזؕأةو؎ؤ ˖ ػة٦ٝ ˖ 歗⫷ך铣׫鴥׫ ˖ 歗꬗鼂獳
  23. 5SBOTGPSNJOH.BUFSJBM"DUJWJUZ -PHJO"DUJWJUZ ̔ <FrameLayout android:layout_width= android:layout_height= android:onClick="dism <LinearLayout android:id="@+id/co android:transitionNa

    …. 'BC5SBOTGPSNKBWB public class FabTransform extends Trans @Override final FabTransform sharedEnter = new Fa activity.getWindow().setSharedElementE -PHJO"DUJWJUZKBWB (context, LoginActivity.class); ptionsCompat = ActivityOptionsCompat onAnimation(context, g.transition_name_login)); 佝㼗㘗㢌䕎 㹋鄲⢽ "1*-FWFM 1MBJEך؝٦س״׶
  24. ̔ 'BC5SBOTGPSN public class F @Override public void captureV }

    @Override public void final FabTrans activity.getWi -PHJO"DUJWJUZ Intent intent = new Intent(context, LoginActivity.class); … ActivityOptionsCompat optionsCompat = ActivityOptionsCompat .makeSceneTransitionAnimation(context, fab, getString(R.string.transition_name_login)); ActivityCompat.startActivity(context, intent, optionsCompat.toBundle()); "DUJWJUZ0QUJPOT$PNQBUד 鼂獳⯋7JFXה鼂獳⯓ך7JFX׾
 穠ןאֽג"DUJWJUZ饯⹛ 5SBOTGPSNJOH.BUFSJBM"DUJWJUZ -PHJO"DUJWJU
  25. <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:onClick="dismiss"> <LinearLayout android:id="@+id/container" android:transitionName=“@string/transition_name_login"> …. 'BC5SBOTGPSNKBWB public

    class FabTransform extends Transition { @Override public void captureStartValues(TransitionValues transitionValues) { captureValues(transitionValues); } @Override public void captureEndValues(TransitionValues transitionValues) { final FabTransform sharedEnter = new FabTransform(color, icon); activity.getWindow().setSharedElementEnterTransition(sharedEnter); -PHJO"DUJWJUZKBWB ٖ؎،ؐزדUSBOTJUJPO/BNF׾䭷㹀 -PHJO"DUJWJUZ
  26. <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:onClick="dismiss"> <LinearLayout android:id="@+id/container" android:transitionName=“@string/transition_name_login"> …. 'BC5SBOTGPSNKBWB public

    class FabTransform extends Transition { @Override public void captureStartValues(TransitionValues transitionValues) { captureValues(transitionValues); } @Override public void captureEndValues(TransitionValues transitionValues) { final FabTransform sharedEnter = new FabTransform(color, icon); activity.getWindow().setSharedElementEnterTransition(sharedEnter); -PHJO"DUJWJUZKBWB 'BC5SBOTGPSNהְֲ $VTUPN5SBOTJUJPO׾䭷㹀 -PHJO"DUJWJUZ
  27. 'BC5SBOTGPSNKBWB public class FabTransform extends Transition { @Override public void

    captureStartValues(TransitionValues transitionValues) { captureValues(transitionValues); } @Override public void captureEndValues(TransitionValues transitionValues) { captureValues(transitionValues); } private void captureValues(TransitionValues transitionValues) { final View view = transitionValues.view; transitionValues.values.put(PROP_BOUNDS, new Rect(view.getLeft(), view.getTop(), view.getRight(), view.getBottom())); } @Override public Animator createAnimator(final ViewGroup sceneRoot, final TransitionValues startValues, final TransitionValues endValues) {
  28. 'BC5SBOTGPSNKBWB public class FabTransform extends Transition { @Override public void

    captureStartValues(TransitionValues transitionValues) { captureValues(transitionValues); } @Override public void captureEndValues(TransitionValues transitionValues) { captureValues(transitionValues); } private void captureValues(TransitionValues transitionValues) { final View view = transitionValues.view; transitionValues.values.put(PROP_BOUNDS, new Rect(view.getLeft(), view.getTop(), view.getRight(), view.getBottom())); } @Override public Animator createAnimator(final ViewGroup sceneRoot, final TransitionValues startValues, final TransitionValues endValues) { ⴱ׭ך⡘縧׾⥂㶷
  29. 'BC5SBOTGPSNKBWB public class FabTransform extends Transition { @Override public void

    captureStartValues(TransitionValues transitionValues) { captureValues(transitionValues); } @Override public void captureEndValues(TransitionValues transitionValues) { captureValues(transitionValues); } private void captureValues(TransitionValues transitionValues) { final View view = transitionValues.view; transitionValues.values.put(PROP_BOUNDS, new Rect(view.getLeft(), view.getTop(), view.getRight(), view.getBottom())); } @Override public Animator createAnimator(final ViewGroup sceneRoot, final TransitionValues startValues, final TransitionValues endValues) { USBOTJUJPO7BMVFTח⡘縧׾⥂㶷 ⴱ׭ך⡘縧׾⥂㶷
  30. 'BC5SBOTGPSNKBWB public class FabTransform extends Transition { @Override public void

    captureStartValues(TransitionValues transitionValues) { captureValues(transitionValues); } @Override public void captureEndValues(TransitionValues transitionValues) { captureValues(transitionValues); } private void captureValues(TransitionValues transitionValues) { final View view = transitionValues.view; transitionValues.values.put(PROP_BOUNDS, new Rect(view.getLeft(), view.getTop(), view.getRight(), view.getBottom())); } @Override public Animator createAnimator(final ViewGroup sceneRoot, final TransitionValues startValues, final TransitionValues endValues) { USBOTJUJPO7BMVFTח⡘縧׾⥂㶷 ⴱ׭ך⡘縧׾⥂㶷 穄׻׶ך⡘縧׾⥂㶷
  31. @Override public Animator createAnimator(final ViewGroup sceneRoot, final TransitionValues startValues, final

    TransitionValues endValues) { final Rect startBounds = (Rect) startValues.values.get(PROP_BOUNDS); final Rect endBounds = (Rect) endValues.values.get(PROP_BOUNDS); ... final View view = endValues.view; circularReveal = ViewAnimationUtils.createCircularReveal(view, view.getWidth() / 2, view.getHeight() / 2, startBounds.width() / 2, (float) Math.hypot(endBounds.width() / 2, endBounds.height() / 2)); ... final AnimatorSet transition = new AnimatorSet(); transition.playTogether(circularReveal, translate, colorFade, iconFade); transition.playTogether(fadeContents); ... return new AnimatorUtils.NoPauseAnimator(transition); } }
  32. @Override public Animator createAnimator(final ViewGroup sceneRoot, final TransitionValues startValues, final

    TransitionValues endValues) { final Rect startBounds = (Rect) startValues.values.get(PROP_BOUNDS); final Rect endBounds = (Rect) endValues.values.get(PROP_BOUNDS); ... final View view = endValues.view; circularReveal = ViewAnimationUtils.createCircularReveal(view, view.getWidth() / 2, view.getHeight() / 2, startBounds.width() / 2, (float) Math.hypot(endBounds.width() / 2, endBounds.height() / 2)); ... final AnimatorSet transition = new AnimatorSet(); transition.playTogether(circularReveal, translate, colorFade, iconFade); transition.playTogether(fadeContents); ... return new AnimatorUtils.NoPauseAnimator(transition); } } ⡲׏׋#PVOET׾《䖤
  33. @Override public Animator createAnimator(final ViewGroup sceneRoot, final TransitionValues startValues, final

    TransitionValues endValues) { final Rect startBounds = (Rect) startValues.values.get(PROP_BOUNDS); final Rect endBounds = (Rect) endValues.values.get(PROP_BOUNDS); ... final View view = endValues.view; circularReveal = ViewAnimationUtils.createCircularReveal(view, view.getWidth() / 2, view.getHeight() / 2, startBounds.width() / 2, (float) Math.hypot(endBounds.width() / 2, endBounds.height() / 2)); ... final AnimatorSet transition = new AnimatorSet(); transition.playTogether(circularReveal, translate, colorFade, iconFade); transition.playTogether(fadeContents); ... return new AnimatorUtils.NoPauseAnimator(transition); } } ⡲׏׋#PVOET׾《䖤 #PVOET׾⢪׏ג $JSDVMBS3FWFBM׾⡲䧭
  34. @Override public Animator createAnimator(final ViewGroup sceneRoot, final TransitionValues startValues, final

    TransitionValues endValues) { final Rect startBounds = (Rect) startValues.values.get(PROP_BOUNDS); final Rect endBounds = (Rect) endValues.values.get(PROP_BOUNDS); ... final View view = endValues.view; circularReveal = ViewAnimationUtils.createCircularReveal(view, view.getWidth() / 2, view.getHeight() / 2, startBounds.width() / 2, (float) Math.hypot(endBounds.width() / 2, endBounds.height() / 2)); ... final AnimatorSet transition = new AnimatorSet(); transition.playTogether(circularReveal, translate, colorFade, iconFade); transition.playTogether(fadeContents); ... return new AnimatorUtils.NoPauseAnimator(transition); } } 鼂獳⯋ך7JFXך#PVOEה鼂獳⯓ך#PVOE׾
 ⢪׏ג"OJNBUPS׾⡲׷ ⡲׏׋#PVOET׾《䖤 #PVOET׾⢪׏ג $JSDVMBS3FWFBM׾⡲䧭
  35. ؖ؎سٓ؎ٝⰻך铡僇ׅ׷鿇ⴓ ˖ وذٔ،ٕرؠ؎ٝ ˖ 넝䏝הءٍسؐ ˖ ٌ٦ءّٝ ˖ 竰竲儗꟦ה؎٦آؚٝ ˖

    麊⹛ ˖ وذٔ،ٕך㢌䕎 ˖ ؝ؚٖؔٓؿ؍ ˖ ؙٔؒ؎ذ؍ـזؕأةو؎ؤ ˖ ػة٦ٝ ˖ 歗⫷ך铣׫鴥׫ ˖ 歗꬗鼂獳
  36. ؝ؚٖؔٓؿ؍ 鸬竲䚍ؖ؎سٓ؎ٝ ։࢝࣌ؒ ऴྃ࣌ؒ $BSEͷԣ෯ NT NT $BSEͷॎ෯ NT NT

    4IBSFE&MFNFOUͷ
 YͷҐஔ NT NT 4IBSFE&MFNFOUͷ
 ZͷҐஔ NT NT දࣔ͞ΕΔ7JFXͷ ಁ໌౓ NT NT
  37. ؝ؚٖؔٓؿ؍ 鸬竲䚍㹋鄲 'BCָ䎢ָ׷،صً٦ءّٝהずׄ״ֲח 4IBSFE&MFNFOU5SBOTJUJPO׾ⵃ欽ׅ׷ 簚ה埆ך،صً٦ءّٝךꟚ㨣儗꟦ךؤٖ׾ 邌植ׅ׷׋׭ח$VTUPN5SBOTJUJPO׾⡲䧭 AnimatorSet animatorSet = new

    AnimatorSet(); … widthAnim.setDuration(275); heightAnim.setStartDelay(30); heightAnim.setDuration(345); animatorSet.playTogether(widthAnim, heightAnim); "1*-FWFM
  38. 5SBOTJUJPOךرغحؚ <transitionSet> <targets> <target android:targetId="@id/image" /> </targets> <transition class="**.BlinkDebugTransition" />

    </transitionSet> ˖ 7JFXָ5SBOTJUJPOך㼎韋חז׏גְ׷
 ךַ״ֻⴓַ׵זְ
 ̔#MJOL%FCVH5SBOTJUJPOؙٓأ׾
 ⡲׏׋ךד׉׸ד5SBOTJUJPOָ
 ⹛ְגְ׷ַ然钠׃ג׫׷ה葺ְ
  39. 5SBOTJUJPOָ ֲתֻ⹛ַזְהֹךثؑحؙٔأز ˖ 4IBSFE&MFNFOU5SBOTJUJPOך㜥さח7JTJCJMJUZ׾
 竰䪫׃גְזְ5SBOTJUJPOחז׏גְ׷
 'BEFؙٓأָ⹛ַזְ ✳鹈꟦䝢׿׌ ˖ 4IBSFדזְ8JOEPX5SBOTJUJPOך㜥さח7JTJCJMJUZַ 5SBOTJUJPO4FU׾竰䪫׃׋5SBOTJUJPOחז׏גְ׷

    ˖ ̔խ⯓玎铡僇׃׋#MJOL%FCVH5SBOTJUJPOװ
 ׉ך7JTJCJMJUZ׾竰䪫׃׋غ٦آّٝך
 #MJOL7JTJCJMJUZ%FCVH5SBOTJUJPO׾⢪׏גرغحؚ׃ג׫ג ֻ׌ְׁ 醱꧟זךדծ؟ٝفٕ،فٔד׮ ת׌㸣樴חכ⹛ְגֶ׵׆姻湫穠圓㣐㢌
  40. ؖ؎سٓ؎ٝⰻך铡僇ׅ׷鿇ⴓ ˖ وذٔ،ٕرؠ؎ٝ ˖ 넝䏝הءٍسؐ ˖ ٌ٦ءّٝ ˖ 竰竲儗꟦ה؎٦آؚٝ ˖

    麊⹛ ˖ وذٔ،ٕך㢌䕎 ˖ ؝ؚٖؔٓؿ؍ ˖ ؙٔؒ؎ذ؍ـזؕأةو؎ؤ ˖ ػة٦ٝ ˖ 歗⫷ך铣׫鴥׫ ˖ 歗꬗鼂獳
  41.  ⹛ַ׃׋ְ47(ؿ؋؎ٕ׾ "OESPJE*DPO"OJNBUPSח
 سٓحؚ٥،ٝس٥
 سٗحفׅ׷  ،صً٦ءׇׁّٝ׷ ˟ 1BUIך㢌刿ח״׷،صً٦ ءّٝ

    1BUI.PSUI כ㼎䘔 "1*-FWFMָחז׷ךד岣 䠐ׅ׷ ،؎؝ٝך⹛ַ׃倯 "OJNBUFE7FDUPS%SBXBCMF׾彊⪒ׅ׷ "1*-FWFM ،صً٦ءّٝ倯岀כ⟃♴ח֮׶תׅ
 2JJUB،صً٦ءّٝ،؎؝ָٝ⡲׸׷
 "OESPJE*DPO"OJNBUPS׾鍗׏ג׫׷
  42. "OJNBUFE7FDUPS%SBXBCMFךعو׶ וֿ׹ "1*-FWFM Android4.xͱAndroid5.xͱAndroid 7.xͰ
 ಈ͘ͷΛ֬ೝ͢Δ͜ͱ 
 startOffsetΛೖΕΔͱAndroid 4.xͰΞχϝʔγϣϯ
 ͠ͳ͘ͳΔͷͰɺ


    ରࡦͱͯ͠Կ΋͠ͳ͍ΞχϝʔγϣϯڬΜͰ͝·͔͢ ࢀߟ: Android Open Source Projctͷissue Ξχϝʔγϣϯͷࢦఆ͕ѱ͍ͱtargetSDK NҎ্ͩͱ Ϋϥογϡ͢ΔͷͰ஫ҙ ࢀߟ: Plaidͷissue
  43. ؖ؎سٓ؎ٝⰻך铡僇ׅ׷鿇ⴓ ˖ وذٔ،ٕرؠ؎ٝ ˖ 넝䏝הءٍسؐ ˖ ٌ٦ءّٝ ˖ 竰竲儗꟦ה؎٦آؚٝ ˖

    麊⹛ ˖ وذٔ،ٕך㢌䕎 ˖ ؝ؚٖؔٓؿ؍ ˖ ؙٔؒ؎ذ؍ـזؕأةو؎ؤ ˖ ػة٦ٝ ˖ 歗⫷ך铣׫鴥׫ ˖ 歗꬗鼂獳
  44. 歗⫷ך铣׫鴥׫ "1*-FWFM *NBHF7JFXTFU$PMPS'JMUFS׾⢪ֲ $PMPS'JMUFSחכTFU4BUVSBUJPO ًاحسָ֮׷ךדծ ׉׸׾،صً٦ءّٝךؿٖ٦ي׀החㄎן⳿ׅ final ObservableColorMatrix cm =

    new ObservableColorMatrix(); ObjectAnimator saturation = ObjectAnimator.ofFloat(cm, ObservableColorMatrix.SATURATION, 0f, 1f); saturation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { imageView.setColorFilter(new ColorMatrixColorFilter(cm)); } }); 1MBJEך؝٦س״׶ ؟ٝفٕⰻ"OJNBUPS6UJMTKBWB
  45. ؖ؎سٓ؎ٝⰻך铡僇ׅ׷鿇ⴓ ˖ وذٔ،ٕرؠ؎ٝ ˖ 넝䏝הءٍسؐ ˖ ٌ٦ءّٝ ˖ 竰竲儗꟦ה؎٦آؚٝ ˖

    麊⹛ ˖ وذٔ،ٕך㢌䕎 ˖ ؝ؚٖؔٓؿ؍ ˖ ؙٔؒ؎ذ؍ـזؕأةو؎ؤ ˖ ػة٦ٝ ˖ 歗⫷ך铣׫鴥׫ ˖ 歗꬗鼂獳
  46. 歗꬗鼂獳 "1*-FWFM ˖ ؕأةي5SBOTJUJPOⰻד&MFWBUJPO׾ 0CKFDU"OJNBUPSד㢌⻉ׇׁג֮־׸ל0, @Override public Animator createAnimator(ViewGroup sceneRoot,

    TransitionValues startValues, TransitionValues endValues) { return ObjectAnimator.ofFloat(endValues.view, View.TRANSLATION_Z, initialElevation, finalElevation); } ؟ٝفٕⰻ-JGU05SBOTJUJPOKBWB 1MBJEך؝٦س״׶
  47. ؖ؎سٓ؎ٝⰻך铡僇ׅ׷鿇ⴓ Ⰻ鿇鋅׸ת׃׋ ˖ وذٔ،ٕرؠ؎ٝ ˖ 넝䏝הءٍسؐ ˖ ٌ٦ءّٝ ˖ 竰竲儗꟦ה؎٦آؚٝ

    ˖ 麊⹛ ˖ وذٔ،ٕך㢌䕎 ˖ ؝ؚٖؔٓؿ؍ ˖ ؙٔؒ؎ذ؍ـזؕأةو؎ؤ ˖ ػة٦ٝ ˖ 歗⫷ך铣׫鴥׫ ˖ 歗꬗鼂獳
  48. "OESPJE劢弫׾镘׭׷ ˖ 嚊銲 ˖ NJO4EL7FSTJPOחׅ׷ ˖ "OESPJE劢弫דכ؎ٝأز٦ٕדֹזֻׅ׷ ˖ ًٔحز ˖

    㹋鄲׃װֻׅז׷ ˖ رًٔحز ˖ ׉׸ז׶חِ٦ؠ٦ָ㽿׷ 㛇劤涸ח植朐דכַז׶ꨇ׃ְ
  49. ؟٦سػ٦ذ؍ך ♴⡘✼䳔ٓ؎ـٓٔ׾ⵃ欽ׅ׷ ˖ 嚊銲 ˖ ؟٦سػ٦ذ؍ךٓ؎ـٓٔ׾⢪ֲ ˖ ًٔحز ˖ Ⰻגךِ٦ؠ٦ד،صً٦ءّٝ〳腉

    ˖ رًٔحز ˖ 稢ְַ⹛ָֹ殯ז׏׋׶ծزٓـٕחז׏׋׶ծ
 ׉ך㜥さח儗꟦׾《׵׸ג׃תֲֿהָ֮׷ غٓٝأ葺ֻ《׶Ⰵ׸גְֻה葺ׁ׉ֲ
  50. תה׭ ˖ ،صً٦ءّٝכꅾ銲דׅ ˖ ؖ؎سٓ؎ٝה㹋鄲׾鋅גְֹת׃׋ ˖ ؟ٝفٕ،فٔך؝٦س鋅ג׫גֻ׌ְׁ ˖ 4IBSFE&MFNFOU5SBOTJUJPOח״׷㹋鄲ָ㢳ְדׅ ˖

    عو׶וֿ׹ָ㢳ְדָׅծثٍٖٝآ׃ג׫גֻ׌ְׁ ˖ "OESPJE劢弫ך㼎䘔חאְגכծ搀椚׃גⰋגך04ד
 ⹛ַׁזֻג׮葺ְַ׮׃׸תׇ׿
  51. תה׭ ˖ ،صً٦ءّٝכꅾ銲דׅ ˖ ؖ؎سٓ؎ٝה㹋鄲׾鋅גְֹת׃׋ ˖ ؟ٝفٕ،فٔך؝٦س鋅ג׫גֻ׌ְׁ ˖ 4IBSFE&MFNFOU5SBOTJUJPOח״׷㹋鄲ָ㢳ְדׅ ˖

    عو׶וֿ׹ָ㢳ְדָׅծثٍٖٝآ׃ג׫גֻ׌ְׁ ˖ "OESPJE劢弫ך㼎䘔חאְגכծ搀椚׃גⰋגך04ד
 ⹛ַׁזֻג׮葺ְַ׮׃׸תׇ׿ ˖ وذٔ،ٕرؠ؎ٝך،صً٦ءّٝכדֹתׅ
  52. תה׭ ˖ ،صً٦ءّٝכꅾ銲דׅ ˖ ؖ؎سٓ؎ٝה㹋鄲׾鋅גְֹת׃׋ ˖ ؟ٝفٕ،فٔך؝٦س鋅ג׫גֻ׌ְׁ ˖ 4IBSFE&MFNFOU5SBOTJUJPOח״׷㹋鄲ָ㢳ְדׅ ˖

    عو׶וֿ׹ָ㢳ְדָׅծثٍٖٝآ׃ג׫גֻ׌ְׁ ˖ "OESPJE劢弫ך㼎䘔חאְגכծ搀椚׃גⰋגך04ד
 ⹛ַׁזֻג׮葺ְַ׮׃׸תׇ׿ ˖ وذٔ،ٕرؠ؎ٝך،صً٦ءّٝכדֹתׅ ˖ NBUFSJBMFMFNFOU IUUQHJUJPFMFNFOU ׾(JU)VCד
 4UBS׃גֻ׌ְׁ