View Animation

2c4cb677e0a076b96f8edfba71b46aeb?s=47 satsukies
October 02, 2017

View Animation

View Animation in Android

2c4cb677e0a076b96f8edfba71b46aeb?s=128

satsukies

October 02, 2017
Tweet

Transcript

  1. 7JFX"OJNBUJPO 4BUPTIJ5BLFEB "CFNB57*OD

  2. 8IPJT

  3. 8IPJT ஛ాɹஐ 5BLFEBɹ4BUPTIJ ˡTBUTVLJFT ɹɹ$ZCFS"HFOUʹ৽ଔೖࣾ ʙɹ"CFNB57ʹ"OESPJEΤϯδχΞͰ഑ଐ

  4. "OJNBUJPO

  5. "OJNBUJPO 7JFX"OJNBUJPO 1SPQFSUZ"OJNBUJPO %SBXBCMF"OJNBUJPO

  6. "OJNBUJPO 7JFX"OJNBUJPO 1SPQFSUZ"OJNBUJPO %SBXBCMF"OJNBUJPO BMQIB SPUBUF TDBMF USBOTMBUF ࢖͍΍͍͢ɾ؆୯ ݟͨ໨͚͕ͩมԽ͢ΔΞχϝʔγϣϯ

    // viewͷalpha஋͕0͔Β1΁3ඵ͔͚ͯมԽ͢ΔΞχϝʔγϣϯ
 (findViewById(R.id.image_view) as? ImageView)?.apply {
 startAnimation(AlphaAnimation(0f, 1f).apply {
 duration = 3000
 })
 }
  7. "OJNBUJPO 7JFX"OJNBUJPO 1SPQFSUZ"OJNBUJPO "1*͔Β࣮૷͞Εͨ৽͍͠BOJNBUPS ෳࡶͳΞχϝʔγϣϯΛදݱՄೳ ݟͨ໨͚ͩͰͳ࣮͘ࡍͷҐஔ΋มԽ <set xmlns:android="http://schemas.android.com/apk/res/android"
 android:ordering=“together">
 <objectAnimator


    android:duration="3000"
 android:propertyName=“alpha"
 android:valueFrom="0f"
 android:valueTo="1f"/>
 <objectAnimator
 android:duration="3000"
 android:propertyName="translationY"
 android:valueFrom="0dp"
 android:valueTo="100dp"/>
 </set> %SBXBCMF"OJNBUJPO
  8. "OJNBUJPO 1SPQFSUZ"OJNBUJPO %SBXBCMF"OJNBUJPO ը૾ϦιʔεΛෳ਺ຕར༻ͯ͠ ύϥύϥອըͷΑ͏ʹ࠶ੜͤ͞Δ 7JFX"OJNBUJPO <?xml version="1.0" encoding="utf-8"?>
 <animation-list

    xmlns:android="http://schemas.android.com/apk/res/android"
 android:oneshot="false"
 android:visible="true" >
 
 <item android:drawable=“@drawable/pict0" android:duration="300" />
 <item android:drawable="@drawable/pict1" android:duration="300" />
 <item android:drawable="@drawable/pict2" android:duration="300" />
 <item android:drawable="@drawable/pict3" android:duration="300" />
 <item android:drawable="@drawable/pict4" android:duration="300" />
 
 </animation-list>
  9. .BUFSJBM%FTJHO

  10. .BUFSJBM%FTJHO w .BUFSJBMJTUIFNFUBQIPS w #PME HSBQIJD JOUFOUJPOBM w .PUJPOQSPWJEFTNFBOJOH ҙຯͷ͋Δಈ͖ΛϢʔβʹࣔ͢͜ͱͰ

    ɾࢹ֮తʹ஫ҙΛҾ͖͚ͭΔ ɾཁૉͷग़ݱ΍มܗɺҠಈΛ௨ͯ͡࿈ଓੑΛ఻͑Δ ը໘ભҠ͕࣌࠷΋࿈ଓੑ͕ࣦΘΕ΍ͦ͢͏
  11. ը໘ભҠͷΧελϚΠζ

  12. ը໘ભҠͷΧελϚΠζ https://developer.android.com/training/material/animations.html#Transitions (PPHMF%FWFMPQFSTͷ ʮΞΫςΟϏςΟભҠΛΧελϚΠζ͢ΔʯʹΑΕ͹ ȜȄȨǠȩȅǴǢȱǠȕȨƵ!CTIVITYTRANSITIONS
 ᮊǠǭȄǡȑȄǡ៟ჟᮋƮƶųΒឬƠǒᖽᇽƵᣨƮƵ
 Ы˗NjدъǙឬƟƭų໇ओƵϜǑଖƏƲᗆᗉ࿯Ʊ
 ƫƱƓǑǙেƦƢDžƠŴ લޙͷΞΫςΟϏςΟͰڞ௨ͷΞΠίϯը૾΍ݟग़͠ςΩετͳͲ͕ଘࡏ͢Δ৔߹ʹ ڞ௨͢Δཁૉͷද͕ࣔҾ͖ܧ͕Ε͍ͯΔΑ͏ʹݟͤΔ͜ͱͰ࿈ଓੑΛදݱ͢Δ

  13. "DUJWJUZ5SBOTJUJPOTͷछྨ

  14. "DUJWJUZ5SBOTJUJPOTͷछྨ &OUFS &YJU 4IBSFE&MFNFOUT

  15. "DUJWJUZ5SBOTJUJPOTͷछྨ &OUFS &YJU 4IBSFE&MFNFOUT "DUJWJUZͷWJFX͕ͲͷΑ͏ʹը໘΁ೖͬͯ͘Δ͔Λܾఆ

  16. "DUJWJUZ5SBOTJUJPOTͷछྨ &OUFS &YJU 4IBSFE&MFNFOUT "DUJWJUZͷWJFX͕ͲͷΑ͏ʹը໘͔Βग़ͯߦ͔͘Λܾఆ

  17. "DUJWJUZ5SBOTJUJPOTͷछྨ &OUFS &YJU 4IBSFE&MFNFOUT ը໘্ʹ͋Δڞ௨ͷཁૉʢྫ͑͹*NBHF7JFXͱ͔ʣΛ ͲͷΑ͏ʹΞχϝʔγϣϯͤ͞Δ͔ɻ "1*͔Β࣮૷͞Εར༻Մೳʂ αϙʔτϥΠϒϥϦʹೖ͍ͬͯͳ͍ͷ͕ͪΐͬͱ࢒೦

  18. (PPHMF1MBZ4UPSF

  19. None
  20. Ґͩͱಈ͖͕গͳͯ͘ Α͘෼͔Βͳ͍ʁ!

  21. Ξχϝʔγϣϯ εέʔϧY

  22. "CFNB57ʹ΋

  23. None
  24. ͳΒ͹͜͜ʹ ΞχϝʔγϣϯΛʂ

  25. 7JFX"OJNBUJPO 4BUPTIJ5BLFEB "CFNB57*OD

  26. 7JFX"OJNBUJPO 4BUPTIJ5BLFEB "CFNB57*OD 5SBOTJUJPO

  27. #BTJDJNQMFNFOU

  28. #BTJDJNQMFNFOU /PSNBM.BTUFS"DUJWJUZLU val intent = Intent(context, SharedMasterActivity::class.java)
 val optionsCompat =

    ActivityOptionsCompat.makeSceneTransitionAnimation( this, targetView,
 targetView.transitionName) startActivity(intent, optionsCompat.toBundle()) Ξχϝʔγϣϯର৅ͷWJFX //viewͷΠϯελϯεϝιου targetView.setTransitionName("hogehoge") //ViewCompatΫϥεͷΫϥεϝιου ViewCompat.setTransitionName(targetView, "hogehoge") android:transitionName="hogehoge"
  29. #BTJDJNQMFNFOU XJUIඇಉظ௨৴ ભҠઌͱભҠݩͰผʑͷը૾Λ࢖͍ͬͯΔ৔߹ʜ ը૾ͷऔಘ͕Ξχϝʔγϣϯ։࢝ʹؒʹ߹Θͳ͍ʂ

  30. "EWBODFEJNQMFNFOU

  31. "EWBODFEJNQMFNFOU ݺͼग़ͨ͠λΠϛϯάͰ5SBOTJUJPO"OJNBUJPOΛ։࢝ͤ͞Δ QPTUQPOF&OUFS5SBOTJUJPO TUBSU1PTUQPOFE&OUFS5SBOTJUJPO 5SBOTJUJPO"OJNBUJPOͷ։࢝Λ཈ࢭ͢Δ Ξχϝʔγϣϯͷ։࢝λΠϛϯάΛ ίʔυଆͰίϯτϩʔϧՄೳ

  32. "EWBODFEJNQMFNFOU override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState) supportPostponeEnterTransition() // Ξχϝʔγϣϯ཈ࢭ

    ~~~~~~~~~~~~~~~ fun startEnterTransition() {
 if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) return
 
 supportStartPostponedEnterTransition(); // Ξχϝʔγϣϯ࠶։
 }
  33. "EWBODFEJNQMFNFOU (MJEF΍1JDBTTPͷ$BMMCBDLʹ࢓ࠐΜͰΈΔ ImageView targetImageView = (ImageView)findViewById(R.id.image_header); //Glideͷ৔߹(4.0-RC0) Glide.with(this) .load("http://hogehoge.com/fugafuga") .listener(new

    RequestListener() { @Override public boolean onResourceReady(Object resource, Object model, Target target, DataSource dataSource, boolean isFirstResource) { startPostponedEnterTransition() return false; } }) .into(targetImageView); //Picassoͷ৔߹ Picasso.with(this) .load("http://hogehoge.com/fugafuga").into(targetImageView, new Callback(){ @Override public void onSuccess() { startPostponedEnterTransition() } });
  34. ΫϦοΫ͔ͯ͠ΒΞχϝʔγϣϯ·Ͱͷ଴ػ͕࣌ؒࢥͬͨҎ্ʹ௕͍"

  35. ϢʔβମݧΛҡ͍࣋ͨ͠

  36. ϢʔβମݧΛҡ͍࣋ͨ͠ ಛʹߟ͑ͣγϯϓϧʹΞχϝʔγϣϯͤ͞Δͱ ɾΞϓϦ͕ϑϦʔζ͍ͯ͠ΔΑ͏ʹݟ͑ͯ͠·͏ ɾը૾͕ϩʔυ͞ΕΔ·ͰCBDLHSPVOE͕ݟ͑ݟ͑ ը૾ͷಡΈࠐΈΛ଴ͬͯΞχϝʔγϣϯ͢Δͱ ɾ్தͰը૾͕ϩʔυ͞Εͯද͕ࣔมʹͳΔ͜ͱ Ͳ͏ʹ͔ͯ͠ը૾Λૉૣ͘ϩʔυ͍ͨ͠ʜ"

  37. None
  38. ϢʔβମݧΛҡ͍࣋ͨ͠ (MJEFͷαϜωΠϧදࣔػೳΛ׆༻ ɾಉ͡WJFXͰෳ਺ͷը૾Λಉ࣌ʹಡΈࠐΊΔ ɾαϜωΠϧը૾ͷMPBEʹରͯ͠DBMMCBDL͕͚ͭΒΕΔ αϜωΠϧදࣔ Ξχϝʔγϣϯ։࢝ ݩը૾දࣔ

  39. 5SBOTJUJPOXJUIUIVNC

  40. 5SBOTJUJPOXJUIUIVNC ᶃ*OUFOUʹΩϟογϡࡁΈը૾ͷ63-Λ৐ͤΔ ᶄαϜωΠϧಡΈࠐΈʹ*OUFOUͷ63-Λ࢖͏

  41. 5SBOTJUJPOXJUIUIVNC ᶃ*OUFOUʹΩϟογϡࡁΈը૾ͷ63-Λ৐ͤΔ ᶄαϜωΠϧಡΈࠐΈʹ*OUFOUͷ63-Λ࢖͏ binding.getRoot().setOnClickListener(v -> episodeSelectListener.action( ep, ep.getEpisodeListThumbnail().with(options).url(), // ΩϟογϡࡁΈͷը૾URL


    binding.episodeThumbnail, binding.vdSeriesThumbnailFreeMark,
 binding.episodePlayMark)); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Intent intent = new Intent(this, DstActivity.class); intent.putExtra(“extra_url”, thumbnailUrlString);
  42. 5SBOTJUJPOXJUIUIVNC ᶃ*OUFOUʹΩϟογϡࡁΈը૾ͷ63-Λ৐ͤΔ ᶄαϜωΠϧಡΈࠐΈʹ*OUFOUͷ63-Λ࢖͏ //͢ͰʹMasterActivityͰऔಘࡁΈͰ͋Ζ͏ը૾ΛαϜωΠϧͱͯ͠ར༻͢Δ .thumbnail( Glide.with(imageView.getContext()) .load(imageThumbURL) .listener(new RequestListener<Drawable>() {

    @Override public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) return false; }
 
 @Override public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) { supportStartPostponedEnterTransition(); // ಡΈࠐΈ׬ྃͰΞχϝʔγϣϯ࣮ߦ
 return false; }}) .apply(new RequestOptions().skipMemoryCache(true)
 .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)))
 .into(imageView);
  43. ରࡦલ ରࡦޙ

  44. "CFNB57BQQ΁ʜ

  45. ͦͷଞ5JQT

  46. ͦͷଞ5JQT TUBUVTOBWJHBUJPOCBSʹඃͤͳ͍ WJFX͕ݟ੾ΕͯͨΒΞχϝʔγϣϯ͠ͳ͍

  47. ͦͷଞ5JQT TUBUVTOBWJHBUJPOCBSʹඃͤͳ͍ εςʔλεόʔ΍φϏήʔγϣϯόʔ΋ 4IBSFE&MFNFOU5SBOTJUJPOʹؚΊΔ // navigation bar View nav =

    findViewById(android.R.id.navigationBarBackground); // status bar View stat = findViewById(android.R.id.statusBarBackground);
 Pair<View, String> navPair = new Pair<>(nav, "nav");
 Pair<View, String> statPair = new Pair<>(stat, "stat");
 
 ActivityOptionsCompat.makeSceneTransitionAnimation(this, navPair, statPair); WJFX͕ݟ੾ΕͯͨΒΞχϝʔγϣϯ͠ͳ͍
  48. ͦͷଞ5JQT TUBUVTOBWJHBUJPOCBSʹඃͤͳ͍ WJFX͕ݟ੾ΕͯͨΒΞχϝʔγϣϯ͠ͳ͍

  49. ͦͷଞ5JQT TUBUVTOBWJHBUJPOCBSʹඃͤͳ͍ ಈతͳΞχϝʔγϣϯ࣮ߦՄ൱ͷ੍ޚ ɾը໘ճస͕ൃੜͨ͠ΒΞχϝʔγϣϯΛ͠ͳ͍ ɾαϜωΠϧ͕ݟ੾Ε͍ͯΔͱ͖͸Ξχϝʔγϣϯ͠ͳ͍ 4IBSFE&MFNFOU$BMMCBDLͰ ΞχϝʔγϣϯͷΩϟϯηϧॲཧΛ࣮૷

  50. ͦͷଞ5JQT TUBUVTOBWJHBUJPOCBSʹඃͤͳ͍ ಈతͳΞχϝʔγϣϯ࣮ߦՄ൱ͷ੍ޚ 4IBSFE&MFNFOU$BMMCBDLͰ ΞχϝʔγϣϯͷΩϟϯηϧॲཧΛ࣮૷ setEnterSharedElementCallback(new SharedElementCallback() {
 @Override
 public

    void onMapSharedElements(List<String> names, Map<String, View> sharedElements) {
 // Ξχϝʔγϣϯର৅view͕ݟ੾Ε͍ͯΔ৔߹͸ΞχϝʔγϣϯΛ࣮ߦ͠ͳ͍
 shouldClearSharedElements |= !Stream.of(sharedElements)
 .filter(item -> item.getValue() != null)
 .allMatch(item -> viewBehavior.checkViewContains(item.getValue()));
 
 if (shouldClearSharedElements) {
 names.clear();
 sharedElements.clear();
 }
 }
 });
  51. ͦͷଞ5JQT TUBUVTOBWJHBUJPOCBSʹඃͤͳ͍ ಈతͳΞχϝʔγϣϯ࣮ߦՄ൱ͷ੍ޚ ׬શදࣔ ݟ੾Ε

  52. 4VNNBSZ

  53. 4VNNBSZ "OJNBUJPOʹ͸छྨ͕͍Ζ͍Ζ "DUJWJUZ5SBOTJUJPO͸࿈ଓੑΛ఻͑ΔͷʹޮՌత গ͠ͷίʔυमਖ਼Ͱ"OJNBUJPOͷద༻͕Մೳ ඇಉظॲཧͱซ༻͢Δ࣌͸஫ҙΛ෷͏ඞཁ͋Γ

  54. 4VNNBSZ "OJNBUJPOʹ͸छྨ͕͍Ζ͍Ζ "DUJWJUZ5SBOTJUJPO͸࿈ଓੑΛ఻͑ΔͷʹޮՌత গ͠ͷίʔυमਖ਼Ͱ"OJNBUJPOͷద༻͕Մೳ ඇಉظॲཧͱซ༻͢Δ࣌͸஫ҙΛ෷͏ඞཁ͋Γ 7JFX"OJNBUJPO 1SPQFSUZ"OJNBUJPO %SBXBCMF"OJNBUJPO "DUJWJUZ5SBOTJUJPOT

  55. 4VNNBSZ "OJNBUJPOʹ͸छྨ͕͍Ζ͍Ζ "DUJWJUZ5SBOTJUJPO͸࿈ଓੑΛ఻͑ΔͷʹޮՌత લޙͷΞΫςΟϏςΟͰҎԼͷΑ͏ͳڞ௨ཁૉ͕ଘࡏ͢Δ৔߹ ɾΞΠίϯը૾ ɾݟग़͠ςΩετ ͜ΕΒͷද͕ࣔҾ͖ܧ͕Ε͍ͯΔΑ͏ʹݟͤΔ͜ͱͰ࿈ଓੑΛදݱ͢Δ গ͠ͷίʔυमਖ਼Ͱ"OJNBUJPOͷద༻͕Մೳ ඇಉظॲཧͱซ༻͢Δ࣌͸஫ҙΛ෷͏ඞཁ͋Γ

  56. 4VNNBSZ "OJNBUJPOʹ͸छྨ͕͍Ζ͍Ζ গ͠ͷίʔυमਖ਼Ͱ"OJNBUJPOͷద༻͕Մೳ ඇಉظॲཧͱซ༻͢Δ࣌͸஫ҙΛ෷͏ඞཁ͋Γ "DUJWJUZ5SBOTJUJPO͸࿈ଓੑΛ఻͑ΔͷʹޮՌత USBOTJUJPO/BNFͷ ෇༩ 4IBSFE&MFNFOU 5SBOTJUJPOͷ࣮ߦڐՄ "DUJWJUZ0QUJPOT෇͖Ͱ

    "DUJWJUZ࣮ߦ
  57. 4VNNBSZ "OJNBUJPOʹ͸छྨ͕͍Ζ͍Ζ "DUJWJUZ5SBOTJUJPO͸࿈ଓੑΛ఻͑ΔͷʹޮՌత গ͠ͷίʔυमਖ਼Ͱ"OJNBUJPOͷద༻͕Մೳ ඇಉظॲཧͱซ༻͢Δ࣌͸஫ҙΛ෷͏ඞཁ͋Γ ඞཁʹԠͯ͡Ξχϝʔγϣϯͷ࣮ߦλΠϛϯάΛ੍ޚ QPTUQPOF&OUFS5SBOTJUJPO TUBSU1PTUQPOFE&OUFS5SBOTJUJPO Ξχϝʔγϣϯͷ ࠶։

    Ξχϝʔγϣϯͷ ։࢝཈ࢭ αϜωΠϧಡΈࠐΈ
  58. 5IBOLZPV !TBUTVLJFT