Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to implement material design animation droi...

How to implement material design animation droid girls version

編集中です。

takahirom

May 07, 2017
Tweet

More Decks by takahirom

Other Decks in Programming

Transcript

  1. – Motion Lead @Google. John Schlemmer “one of the main

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

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

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

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

    ˖ ؝ؚٖؔٓؿ؍ ˖ ػة٦ٝ ˖ 歗⫷ך铣׫鴥׫ ˖ 歗꬗鼂獳 ؖ؎سٓ؎ٝⰻך铡僇ׅ׷鿇ⴓ
  6. ٖأهٝءـ넝䏝ה⹛涸넝䏝ؔؿإحز 㹋鄲 <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
  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> USBOTJUJPO;׾EQחׅ׷ 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> BOJNBUPS@SBJTFYNM EQ ׮ה׮הך&MFWBUJPO  EQ ⹛涸넝䏝ؔؿإحز EQ חז׷
  10. ٌ٦ءّٝ؎٦آؚٝ 㹋鄲 Ͳ͏࣮૷͢Δ͔ ඪ४Χʔϒ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
  11. 麊⹛ 㹋鄲 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 ٖ؎،ؐز ذ٦و
  12. "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
  13. <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׾䭷㹀
  14. 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ד獳⹛ 㣐ֹׁ㢌⻉
  15. ˖ 1MBJEח"SD.PUJPOؙٓأ׾
 䭁䓸׃׋(SBWJUZ"SD.PUJPOؙٓأָ
 ֮׷
 QMBJE(SBWJUZ"SD.PUJPOKBWB ˖ ׋׌ծك٦أה׃גְ׷
 ؿٖ٦يٙ٦ؙך؝٦سָ〢ֻծ
 暴㹀ך勴⟝ך儗ח
 ֲתֻ،صً٦ءّٝ׃זְ׋׭ծ⡲׶

    湫׃׋
 QMBJEחفؙٕٔؒأز׾鷏׶ת׃׋ 
 NBUFSJBMFMFNFOU (SBWJUZ"SD.PUJPOKBWB 荈搫ז䓜׾⡲׷חכ ˟1MBJEהכ(PPHMFךوذٔ،ٕرؠ؎ٝך ؔ٦فٝا٦أך⿫罋㹋鄲דַאرؠ؎ٝصُ٦أ،فٔ <?xml version="1.0" encoding="utf-8"?> <transitionSet … android:duration="350" android:interpolator=“…”> <changeBounds/> <pathMotion class=“**.GravityArcMotion” /> </transitionSet>
  16. ؝ؚٖؔٓؿ؍ 鸬竲䚍ؖ؎سٓ؎ٝ ։࢝࣌ؒ ऴྃ࣌ؒ $BSEͷԣ෯ NT NT $BSEͷॎ෯ NT NT

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

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

    </transitionSet> ˖ 7JFXָ5SBOTJUJPOך㼎韋חז׏גְ׷
 ךַ״ֻⴓַ׵זְ
 ̔#MJOL%FCVH5SBOTJUJPOؙٓأ׾
 ⡲׏׋ךד׉׸ד5SBOTJUJPOָ
 ⹛ְגְ׷ַ然钠׃ג׫׷ה葺ְ
  19. 5SBOTJUJPOָ ֲתֻ⹛ַזְהֹךثؑحؙٔأز ˖ UIFNFךXJOEPX"DUJWJUZ5SBOTJUJPOTָ剣⸬חז׏גְ׷ "QQ$PNQBU5IFNFזו鋵ךذ٦وָ5IFNF.BUFSJBMח ז׏גְ׸ל㉏겗ז׃  ˖ *NBHF7JFXךTDBMF5ZQFְׄ׏ג׫׋ ְׄ׏גְ׷הֹ

    כDIBOHF*NBHF5SBOTGPSNךUSBOTJUJPOָ֮׷הֲתְֻֻ ַ׮  ˖ 7JFXך胜兝ח׍ׯ׿ה葿אְגְ׷ <item name="android:windowContentTransitions">true</item>
  20. 5SBOTJUJPOָ ֲתֻ⹛ַזְהֹךثؑحؙٔأز ˖ 4IBSFE&MFNFOU5SBOTJUJPOך㜥さח7JTJCJMJUZ׾
 竰䪫׃גְזְ5SBOTJUJPOחז׏גְ׷
 'BEFؙٓأָ⹛ַזְ ✳鹈꟦䝢׿׌  ˖ 4IBSFדזְ8JOEPX5SBOTJUJPOך㜥さח7JTJCJMJUZַ

    5SBOTJUJPO4FU׾竰䪫׃׋5SBOTJUJPOחז׏גְ׷ ˖ ̔խ⯓玎铡僇׃׋#MJOL%FCVH5SBOTJUJPOװ
 ׉ך7JTJCJMJUZ׾竰䪫׃׋غ٦آّٝך
 #MJOL7JTJCJMJUZ%FCVH5SBOTJUJPO׾⢪׏גرغحؚ׃ג׫ג ֻ׌ְׁ 醱꧟זךדծ؟ٝفٕ،فٔד׮ ת׌㸣樴חכ⹛ְגֶ׵׆姻湫穠圓㣐㢌
  21. 歗⫷ך铣׫鴥׫ "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
  22. 歗꬗鼂獳 "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ך؝٦س״׶
  23. "OESPJE劢弫׾镘׭׷ ˖ 嚊銲 ˖ NJO4EL7FSTJPOחׅ׷ ˖ "OESPJE劢弫דכ؎ٝأز٦ٕדֹזֻׅ׷ ˖ ًٔحز ˖

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

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

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