View Animation

View Animation in Android

Transcript

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

   View Slide

2. 8IPJT
   

   View Slide

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

   View Slide

4. "OJNBUJPO
   

   View Slide

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

   View Slide

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

   })

   }
   

   View Slide

7. "OJNBUJPO
   7JFX"OJNBUJPO
   1SPQFSUZ"OJNBUJPO
   "1*͔Β࣮૷͞Εͨ৽͍͠BOJNBUPS
   ෳࡶͳΞχϝʔγϣϯΛදݱՄೳ
   ݟͨ໨͚ͩͰͳ࣮͘ࡍͷҐஔ΋มԽ
   android:ordering=“together">

   android:duration="3000"

   android:propertyName=“alpha"

   android:valueFrom="0f"

   android:valueTo="1f"/>

   android:duration="3000"

   android:propertyName="translationY"

   android:valueFrom="0dp"

   android:valueTo="100dp"/>

   
   %SBXBCMF"OJNBUJPO
   

   View Slide

8. "OJNBUJPO
   1SPQFSUZ"OJNBUJPO
   %SBXBCMF"OJNBUJPO
   ը૾ϦιʔεΛෳ਺ຕར༻ͯ͠
   ύϥύϥອըͷΑ͏ʹ࠶ੜͤ͞Δ
   7JFX"OJNBUJPO
   

   android:oneshot="false"

   android:visible="true" >

   

   

   

   

   

   

   

   
   

   View Slide

9. .BUFSJBM%FTJHO
   

   View Slide

10. .BUFSJBM%FTJHO
    w .BUFSJBMJTUIFNFUBQIPS
    w #PME HSBQIJD JOUFOUJPOBM
    w .PUJPOQSPWJEFTNFBOJOH
    ҙຯͷ͋Δಈ͖ΛϢʔβʹࣔ͢͜ͱͰ
    ɾࢹ֮తʹ஫ҙΛҾ͖͚ͭΔ
    ɾཁૉͷग़ݱ΍มܗɺҠಈΛ௨ͯ͡࿈ଓੑΛ఻͑Δ
    ը໘ભҠ͕࣌࠷΋࿈ଓੑ͕ࣦΘΕ΍ͦ͢͏
    

    View Slide

11. ը໘ભҠͷΧελϚΠζ
    

    View Slide

12. ը໘ભҠͷΧελϚΠζ
    https://developer.android.com/training/material/animations.html#Transitions
    (PPHMF%FWFMPQFSTͷ
    ʮΞΫςΟϏςΟભҠΛΧελϚΠζ͢ΔʯʹΑΕ͹
    ȜȄȨǠȩȅǴǢȱǠȕȨƵ!CTIVITYTRANSITIONS

    ᮊǠǭȄǡȑȄǡ៟ჟᮋƮƶųΒឬƠǒᖽᇽƵᣨƮƵ

    Ы˗NjدъǙឬƟƭų໇ओƵϜǑଖƏƲᗆᗉ࿯Ʊ

    ƫƱƓǑǙেƦƢDžƠŴ
    લޙͷΞΫςΟϏςΟͰڞ௨ͷΞΠίϯը૾΍ݟग़͠ςΩετͳͲ͕ଘࡏ͢Δ৔߹ʹ
    ڞ௨͢Δཁૉͷද͕ࣔҾ͖ܧ͕Ε͍ͯΔΑ͏ʹݟͤΔ͜ͱͰ࿈ଓੑΛදݱ͢Δ
    

    View Slide

13. "DUJWJUZ5SBOTJUJPOTͷछྨ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. (PPHMF1MBZ4UPSF
    

    View Slide

19. View Slide

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

    View Slide

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

    View Slide

22. "CFNB57ʹ΋
    

    View Slide

23. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. #BTJDJNQMFNFOU
    

    View Slide

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"
    

    View Slide

29. #BTJDJNQMFNFOU
    XJUIඇಉظ௨৴
    ભҠઌͱભҠݩͰผʑͷը૾Λ࢖͍ͬͯΔ৔߹ʜ
    ը૾ͷऔಘ͕Ξχϝʔγϣϯ։࢝ʹؒʹ߹Θͳ͍ʂ
    

    View Slide

30. "EWBODFEJNQMFNFOU
    

    View Slide

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

    View Slide

32. "EWBODFEJNQMFNFOU
    override fun onCreate(savedInstanceState: Bundle?) {

    super.onCreate(savedInstanceState)
    supportPostponeEnterTransition() // Ξχϝʔγϣϯ཈ࢭ
    ~~~~~~~~~~~~~~~
    fun startEnterTransition() {

    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) return

    

    supportStartPostponedEnterTransition(); // Ξχϝʔγϣϯ࠶։

    }
    

    View Slide

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()
    }
    });
    

    View Slide

34. ΫϦοΫ͔ͯ͠ΒΞχϝʔγϣϯ·Ͱͷ଴ػ͕࣌ؒࢥͬͨҎ্ʹ௕͍"
    

    View Slide

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

    View Slide

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

    View Slide

37. View Slide

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

    View Slide

39. 5SBOTJUJPOXJUIUIVNC
    

    View Slide

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

    View Slide

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);
    

    View Slide

42. 5SBOTJUJPOXJUIUIVNC
    ᶃ*OUFOUʹΩϟογϡࡁΈը૾ͷ63-Λ৐ͤΔ
    ᶄαϜωΠϧಡΈࠐΈʹ*OUFOUͷ63-Λ࢖͏
    //͢ͰʹMasterActivityͰऔಘࡁΈͰ͋Ζ͏ը૾ΛαϜωΠϧͱͯ͠ར༻͢Δ
    .thumbnail(
    Glide.with(imageView.getContext())
    .load(imageThumbURL)
    .listener(new RequestListener() {
    @Override public boolean onLoadFailed(@Nullable GlideException e,
    Object model, Target target, boolean isFirstResource)
    return false;
    }

    

    @Override public boolean onResourceReady(Drawable resource, Object model,
    Target target, DataSource dataSource, boolean isFirstResource) {
    supportStartPostponedEnterTransition(); // ಡΈࠐΈ׬ྃͰΞχϝʔγϣϯ࣮ߦ

    return false;
    }})
    .apply(new RequestOptions().skipMemoryCache(true)

    .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)))

    .into(imageView);
    

    View Slide

43. ରࡦલ ରࡦޙ
    

    View Slide

44. "CFNB57BQQ΁ʜ
    

    View Slide

45. ͦͷଞ5JQT
    

    View Slide

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

    View Slide

47. ͦͷଞ5JQT
    TUBUVTOBWJHBUJPOCBSʹඃͤͳ͍
    εςʔλεόʔ΍φϏήʔγϣϯόʔ΋
    4IBSFE&MFNFOU5SBOTJUJPOʹؚΊΔ
    // navigation bar
    View nav = findViewById(android.R.id.navigationBarBackground);
    // status bar
    View stat = findViewById(android.R.id.statusBarBackground);

    Pair navPair = new Pair<>(nav, "nav");

    Pair statPair = new Pair<>(stat, "stat");

    

    ActivityOptionsCompat.makeSceneTransitionAnimation(this, navPair, statPair);
    WJFX͕ݟ੾ΕͯͨΒΞχϝʔγϣϯ͠ͳ͍
    

    View Slide

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

    View Slide

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

    View Slide

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

    @Override

    public void onMapSharedElements(List names, Map sharedElements) {

    // Ξχϝʔγϣϯର৅view͕ݟ੾Ε͍ͯΔ৔߹͸ΞχϝʔγϣϯΛ࣮ߦ͠ͳ͍

    shouldClearSharedElements |= !Stream.of(sharedElements)

    .filter(item -> item.getValue() != null)

    .allMatch(item -> viewBehavior.checkViewContains(item.getValue()));

    

    if (shouldClearSharedElements) {

    names.clear();

    sharedElements.clear();

    }

    }

    });
    

    View Slide

51. ͦͷଞ5JQT
    TUBUVTOBWJHBUJPOCBSʹඃͤͳ͍
    ಈతͳΞχϝʔγϣϯ࣮ߦՄ൱ͷ੍ޚ
    ׬શදࣔ ݟ੾Ε
    

    View Slide

52. 4VNNBSZ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

58. 5IBOLZPV
    !TBUTVLJFT
    

    View Slide