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

View Animation

satsukies
October 02, 2017

View Animation

View Animation in Android

satsukies

October 02, 2017
Tweet

More Decks by satsukies

Other Decks in Programming

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