実例で理解する Material Design Animation

by Ryo Sakaguchi

Slide 1

Slide 1 text

2018.2.8 ࣮ྫͰཧղ͢Δ Material Design Animation DroidKaigi 2018 Room2 Feb 8th, 2018 Ryo Sakaguchi (wakwak3125)

Slide 2

Slide 2 text

2018.2.8 Ryo Sakaguchi @wakwak3125 • Wantedly, Inc • Android application developer • Wantedly People • Music, Guitar, UI/UX About me

Slide 3

Slide 3 text

2018.2.8 Ryo Sakaguchi @wakwak3125 • Wantedly, Inc • Android application developer • Wantedly People • Music, Guitar, UI/UX About me

Slide 4

Slide 4 text

2018.2.8 Wantedly People

Slide 5

Slide 5 text

2018.2.8 Wantedly People • ໊ࢗ؅ཧΞϓϦ • ػցֶशΛ࢖༻͍ͯ͠Δ • ಡΈऔ໊ͬͨࢗ΍ɺࣗ෼ͷ৘ใΛݩ ʹʮ࿩୊ʯΛఏڙ͢Δ • ؾ໊͍͍࣋ͪࢗࡱӨମݧ

Slide 6

Slide 6 text

2018.2.8 Wantedly People • ໊ࢗ؅ཧΞϓϦ • ػցֶशΛ࢖༻͍ͯ͠Δ • ಡΈऔ໊ͬͨࢗ΍ɺࣗ෼ͷ৘ใΛݩ ʹʮ࿩୊ʯΛఏڙ͢Δ • ؾ໊͍͍࣋ͪࢗࡱӨମݧ

Slide 7

Slide 7 text

2018.2.8 Agenda

Slide 8

Slide 8 text

2018.2.8 Agenda • ʮ࿩୊ʯػೳͷΞχϝʔγϣϯͷ঺հ • ࣮૷ͷղઆ • Ξχϝʔγϣϯ࣮૷ͷצॴ • ΞχϝʔγϣϯͷDebug

Slide 9

Slide 9 text

2018.2.8 ʮ࿩୊ʯػೳͷΞχϝʔγϣϯ঺հ

Slide 10

Slide 10 text

2018.2.8 Article ࿩୊ͷهࣄΛදࣔ͢Δը໘ • ഑৴͞ΕΔ࿩୊Λදࣔ͢Δը໘ • Ϣʔβʔʹରͯ͠஫໨ͯ͠΄͍͠ʮը૾ʯ Λ࣠ʹΞχϝʔγϣϯ͢Δɻ • RecyclerViewʹΧʔυܕͷΞΠςϜΛฒ ΂ɺͦΕ͕Expand͢ΔΠϝʔδ • ΧʔυഎܠˠΧόʔΠϝʔδ • هࣄͷ֓ཁ/λΠτϧͷίϯςΩετ Λڞ༗Ͱ͖Δ ʮ࿩୊ʯػೳͷΞχϝʔγϣϯ঺հ Article

Slide 11

Slide 11 text

2018.2.8 Graphic contents ΠϯϑΥάϥϑΟοΫ • ΠϯϑΥάϥϑΟοΫ͕ϝΠϯͷهࣄΛ දࣔ͢Δ • ίϯςϯπࣗମ͸AfterEffectsΛ࢖༻͠ ͯ࡞੒͠ɺbodymovinΛ࢖༻ͯ͠ WebViewͰ࠶ੜ͍ͯ͠Δ • Χʔυͷഎܠը૾͕શ໘ʹ޿͕͍ͬͯ͘ • Χʔυˠهࣄৄࡉ΁ͷભҠͰੈք؍ ΛଛͳΘͳ͍ ʮ࿩୊ʯػೳͷΞχϝʔγϣϯ঺հ Graphic contents

Slide 12

Slide 12 text

2018.2.8 Timeline هࣄ͕දࣔ͞ΕΔTimeline • هࣄΛҰཡͰදࣔ͢ΔRecyclerView • Χʔυ͕എܠը૾Λ࣋ͭλΠϓͱ࣋ͨ ͳ͍λΠϓ͕͋Δ • എܠը૾Λ࣋ͭλΠϓͷ΋ͷͷ৔߹͸ɺ Timelineͷഎܠશମʹϒϥʔ͕͔͔ͬ ͨ΋ͷ͕هࣄͷग़ݱͱڞʹΫϩεϑΣʔ υ͢Δ • ࠓճϝΠϯͰ࿩Λ͢Δͭ΋Γͷɺ SharedElementTransitionͱ͸ҧ͏͚ ͲɺҰԠ঺հ ʮ࿩୊ʯػೳͷΞχϝʔγϣϯ঺հ Timeline

Slide 13

Slide 13 text

2018.2.8 ΞχϝʔγϣϯͬͯͳΜͰඞཁͳͷʁ

Slide 14

Slide 14 text

2018.2.8 ͔͍͍͔ͬ͜Β

Slide 15

Slide 15 text

2018.2.8 ͔͍͍͔ͬ͜Βʁ ͚ͩ͡Όͳ͍Ͱ͢ • ΞχϝʔγϣϯʹΑͬͯɺϢʔβʔʹ ஫໨ͯ͠΄͍͠΋ͷΛΞϐʔϧͰ͖Δ • ࢖͍ͬͯͯɺಥવίϯςϯπ͕ೖΕସ Θͬͨ෩ʹײͯ͡͠·͏Ϣʔβʔ΋ډ Δ͸ͣɻ • ΍Βͳ͍ΑΓ͸΍ͬͨ΄͏͕ઈରྑ͍ • ΍Γ͗͢͸ྑ͘ͳ͍ɻ͚Ͳɺ·ͣ ͸࡞͔ͬͯΒ࡟͍ͬͯ͘ͷ͕େࣄ • ΋ͪΖΜ͔͍͍ͬͬͯ͜΋ͷ͋Δʂ ΞχϝʔγϣϯͬͯͳΜͰඞཁͳͷʁ

Slide 16

Slide 16 text

2018.2.8 ࣮૷ͷղઆ

Slide 17

Slide 17 text

2018.2.8 ࣮૷ͷղઆ • Shared Element Transitionͷجຊͷ ͓͞Β͍ • ֤ػೳ(Article/Graphic contents) ʹґଘ͠ͳ͍෦෼ͷڞ௨࣮૷ͷ࿩ • ֤ػೳຖʹߦ͍ͬͯΔಛผͳ෦෼ͷ࿩ • Article • Graphic content

Slide 18

Slide 18 text

2018.2.8 ·ͣ͸جຊͷ͓͞Β͍

Slide 19

Slide 19 text

2018.2.8 Transition Name 1/3 ڞ༗͍ͨ͠Viewʹ໊લΛ͚ͭΔ ·ͣ͸جຊͷ͓͞Β͍ Shared Element Transition public class MainActivity extends AppCompatActivity { ActivityMainBinding binding; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); binding = DataBindingUtil.setContentView( this, R.layout.activity_main ); binding.button.setOnClickListener(v -> goToNextActivity()); } void goToNextActivity() { Bundle bundle = ActivityOptionsCompat.makeSceneTransitionAnimation( this, /*ભҠݩͷActivity*/ binding.imageView, /*ભҠݩͱભҠઌͰڞ༗͍ͨ͠View*/

Slide 20

Slide 20 text

2018.2.8 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); binding = DataBindingUtil.setContentView( this, R.layout.activity_main ); binding.button.setOnClickListener(v -> goToNextActivity()); } Transition Name 2/3 Transitionʹඞཁͳ৘ใΛBundleʹ٧Ίͯ౉͢ ·ͣ͸جຊͷ͓͞Β͍ Shared Element Transition void goToNextActivity() { Bundle bundle = ActivityOptionsCompat.makeSceneTransitionAnimation( this, /*ભҠݩͷActivity*/ binding.imageView, /*ભҠݩͱભҠઌͰڞ༗͍ͨ͠View*/ "transition:image" /*ڞ༗͍ͨ͠ViewͷTransition Name*/ ).toBundle(); ActivityCompat.startActivity( this, new Intent(this, NextActivity.class), bundle); }

Slide 21

Slide 21 text

2018.2.8 Transition Name 3/3 ભҠઌͷActivityͷڞ༗͍ͨ͠ViewʹTransition NameΛηοτ͢Δ ·ͣ͸جຊͷ͓͞Β͍ Shared Element Transition this, /*ભҠݩͷActivity*/ binding.imageView, /*ભҠݩͱભҠઌͰڞ༗͍ͨ͠View*/ "transition:image" /*ڞ༗͍ͨ͠ViewͷTransition Name*/ ).toBundle(); ActivityCompat.startActivity( this, new Intent(this, NextActivity.class), bundle); } public class NextActivity extends AppCompatActivity { ActivityNextBinding binding; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); binding = DataBindingUtil.setContentView(this, R.layout.activity_next); binding.imageView.setTransitionName("transition:image"); } }

Slide 22

Slide 22 text

2018.2.8

Slide 23

Slide 23 text

2018.2.8 Default animation theme_material.xmlͰ  σϑΥϧτͰҎԼͷΞχϝʔγϣϯ͕ηοτ͞Ε͍ͯΔ ·ͣ͸جຊͷ͓͞Β͍ Shared Element Transition move.xml

Slide 24

Slide 24 text

2018.2.8 Postpone Transition Transition animationΛ೚ҙͷλΠϛϯάͰ։࢝Ͱ͖Δ ·ͣ͸جຊͷ͓͞Β͍ Shared Element Transition public class NextActivity extends AppCompatActivity { static final Handler sHandler = new Handler(Looper.getMainLooper()); ActivityNextBinding binding; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); binding = DataBindingUtil.setContentView(this, R.layout.activity_next); binding.imageView.setTransitionName("transition:image"); ActivityCompat.postponeEnterTransition(this); sHandler.postDelayed(() -> ActivityCompat.startPostponedEnterTransition(this), 1000 ); } }

Slide 25

Slide 25 text

2018.2.8 ࣮૷ͷղઆ Wantedly PeopleͰ࢖͍ͬͯΔShared Element Transitionͷڞ௨ͳ෦෼

Slide 26

Slide 26 text

2018.2.8 ࣮૷ͷղઆ ڞ௨ͷ෦෼ .BJO"DUJWJUZ

Slide 27

Slide 27 text

2018.2.8 ࣮૷ͷղઆ ڞ௨ͷ෦෼ .BJO"DUJWJUZ 5JNFMJOF'SBHNFOU

Slide 28

Slide 28 text

2018.2.8 ࣮૷ͷղઆ ڞ௨ͷ෦෼ .BJO"DUJWJUZ 5JNFMJOF'SBHNFOU 1PTU"SUJDMF"DUJWJZ

Slide 29

Slide 29 text

2018.2.8 ࣮૷ͷղઆ ڞ௨ͷ෦෼ .BJO"DUJWJUZ 5JNFMJOF'SBHNFOU 1PTU"SUJDMF"DUJWJZ 1PTU"SUJDMF'SBHNFOU

Slide 30

Slide 30 text

2018.2.8 ࣮૷ͷղઆ ڞ௨ͷ෦෼ .BJO"DUJWJUZ 5JNFMJOF'SBHNFOU 1PTU"SUJDMF"DUJWJZ 1PTU"SUJDMF'SBHNFOU

Slide 31

Slide 31 text

2018.2.8 ͔͜͜ΒϓϩμΫγϣϯίʔυ ͍Ζ͍Ζͳྺ࢙తͳഎܠͰग़དྷ্͕ͬͯ·͢ɻ ࠓ೔͸େ໨ʹݟͯ΄͍͠ʂ Page Title Page Subtitle

Slide 32

Slide 32 text

2018.2.8 TimelineFragment ͜ͷFragment͔ΒTransitionΛ։࢝͢Δ /** * @param fragment ભҠݩͷFragment * @param postKey هࣄͷKey * @param provider TransitionʹඞཁͳViewΛViewHolder͔Βऔͬͯ͘Δ * adapterΛ࣋ͭ */ public void openPost(BaseFragment fragment, String postKey, PostLogic.ITransitionAdapterProvider provider) { PostArticleFragment nextFragment = PostArticleFragment.newInstance(postKey); TransitionExtra extra = new TransitionExtra.Builder().build(); ࣮૷ͷղઆ ڞ௨ͷ෦෼ // ର৅ͱͳΔViewͱTransition nameͷPairͷListΛ࡞Δ List> pairList = new ArrayList<>(); if (provider != null) { PostLogic.TransitionAdapter adapter = provider.getTransitionAdapter(); // Viewʹରͯ͠ Transition nameΛ༩͍͑ͯ͘

Slide 33

Slide 33 text

2018.2.8 TimelineFragment ͜ͷFragment͔ΒTransitionΛ։࢝͢Δ * @param provider TransitionʹඞཁͳViewΛViewHolder͔Βऔͬͯ͘Δ * adapterΛ࣋ͭ */ public void openPost(BaseFragment fragment, String postKey, PostLogic.ITransitionAdapterProvider provider) { PostArticleFragment nextFragment = PostArticleFragment.newInstance(postKey); TransitionExtra extra = new TransitionExtra.Builder().build(); ࣮૷ͷղઆ ڞ௨ͷ෦෼ // ର৅ͱͳΔViewͱTransition nameͷPairͷListΛ࡞Δ List> pairList = new ArrayList<>(); if (provider != null) { PostLogic.TransitionAdapter adapter = provider.getTransitionAdapter(); // Viewʹରͯ͠ Transition nameΛ༩͍͑ͯ͘ pairList.add(Pair.create( adapter.getCoverImage(), fragment.getString(R.string.transition_image_cover))); // ଞʹ΋View͕͋Ε͹͜͜Ͱηοτ͍ͯ͘͠... } //TransitionExtraʹpairListΛ౉͢ extra.setSharedElementPair(pairList); // BaseFragment͕ը໘ભҠΛߦ͏ؔ਺Λ͍࣋ͬͯΔͷͰͦΕΛݺͼग़͢ fragment.replaceFragment(nextFragment, extra);

Slide 34

Slide 34 text

2018.2.8 BaseFragment replaceFragment ࣮૷ͷղઆ ڞ௨ͷ෦෼ public void replaceFragment(@NonNull BaseFragment fragment, @Nullable TransitionExtra extra) { // BaseActivity͕listenerΛ࣮૷͍ͯ͠ΔͷͦͪΒʹϦϨʔ͢Δ getListener().replaceFragment(fragment, extra); }

Slide 35

Slide 35 text

2018.2.8 BaseActivity replaceFragment ࣮૷ͷղઆ ڞ௨ͷ෦෼ @Override public void replaceFragment(BaseFragment fragment, @Nullable TransitionExtra extra) { if (extra != null) { Intent intent = PostArticleActivity.createIntent(this); Pair[] sharedElements; if (!isEmpty(extra.getSharedElementPair())) { sharedElements = new Pair[extra.getSharedElementPair().size()]; for (int i = 0; i < extra.getSharedElementPair().size(); i++) { Pair pair = extra.getSharedElementPair().get(i); if (pair.first != null && pair.second != null) { sharedElements[i] = pair; } } } else { sharedElements = new Pair[0]; } if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) { ActivityOptionsCompat options =

Slide 36

Slide 36 text

2018.2.8 BaseActivity replaceFragment ࣮૷ͷղઆ ڞ௨ͷ෦෼ new Pair[extra.getSharedElementPair().size()]; for (int i = 0; i < extra.getSharedElementPair().size(); i++) { Pair pair = extra.getSharedElementPair().get(i); if (pair.first != null && pair.second != null) { sharedElements[i] = pair; } } } else { sharedElements = new Pair[0]; } if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) { ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(this, sharedElements); ActivityCompat.startActivity(this, intent, options.toBundle()); } else { startActivity(intent); } } else { /*͔͜͜ΒFragmentͰ։͘৔߹ͷॲཧ*/ }

Slide 37

Slide 37 text

2018.2.8 PostArticleActivity TransitionΛҰ࣌ఀࢭ͢Δ ࣮૷ͷղઆ ڞ௨ͷ෦෼ @Override protected void onCreate(Bundle savedInstanceState) { // ৭ʑͳॳظԽͷॲཧΛ͢Δ // FragmentͷView͕ग़དྷ্͕Δ·ͰɺTransitionΛҰ࣌ఀࢭ͢Δ // ࠶։͸Fragmentଆ͔ΒݺΜͰ͋͛Δ supportPostponeEnterTransition(); }

Slide 38

Slide 38 text

2018.2.8 PostArticleActivity ҎԼͷTransitionSet͕ద༻͞Ε͍ͯΔ ࣮૷ͷղઆ ڞ௨ͷ෦෼

Slide 39

Slide 39 text

2018.2.8 ࣮૷ͷղઆ Article

Slide 40

Slide 40 text

2018.2.8 Article Transition։࢝લ ࣮૷ͷղઆ Article • CardView • ImageView(Mark Zuckerberg) • ౤ߘऀΛදࣔ͢ΔϨΠΞ΢τ • Title • ͍͍Ͷ΍ίϝϯτϘλϯͷϨΠΞ΢τ

Slide 41

Slide 41 text

2018.2.8 Article Transition։࢝લ ࣮૷ͷղઆ Article • CardView • ImageView(Mark Zuckerberg) • ౤ߘऀΛදࣔ͢ΔϨΠΞ΢τ • Title • ͍͍Ͷ΍ίϝϯτϘλϯͷϨΠΞ΢τ

Slide 42

Slide 42 text

2018.2.8 Article Transition։࢝લ ࣮૷ͷղઆ Article • CardView • ImageView(Mark Zuckerberg) • ౤ߘऀΛදࣔ͢ΔϨΠΞ΢τ • Title • ͍͍Ͷ΍ίϝϯτϘλϯͷϨΠΞ΢τ

Slide 43

Slide 43 text

2018.2.8 Article Transition։࢝લ ࣮૷ͷղઆ Article • CardView • ImageView(Mark Zuckerberg) • ౤ߘऀΛදࣔ͢ΔϨΠΞ΢τ • Title • ͍͍Ͷ΍ίϝϯτϘλϯͷϨΠΞ΢τ

Slide 44

Slide 44 text

2018.2.8 Article Transition։࢝લ ࣮૷ͷղઆ Article • CardView • ImageView(Mark Zuckerberg) • ౤ߘऀΛදࣔ͢ΔϨΠΞ΢τ • Title • ͍͍Ͷ΍ίϝϯτϘλϯͷϨΠΞ΢τ

Slide 45

Slide 45 text

2018.2.8 Article Transition։࢝ޙং൫ ࣮૷ͷղઆ Article • CardView • ImageView(Mark Zuckerberg) • ౤ߘऀΛදࣔ͢ΔϨΠΞ΢τ • Title • ͍͍Ͷ΍ίϝϯτϘλϯͷϨΠΞ΢τ • CardViewͷSharedElementͱͯ͠ ഑ஔ͍ͯͨ͠ന͍͚ͩͷ FrameLayout

Slide 46

Slide 46 text

2018.2.8 Article Transition։࢝ޙऴ൫ ࣮૷ͷղઆ Article • CardView • ImageView(Mark Zuckerberg) • ౤ߘऀΛදࣔ͢ΔϨΠΞ΢τ • Title • ͍͍Ͷ΍ίϝϯτϘλϯͷϨΠΞ΢τ • CardViewͷSharedElementͱͯ͠ ഑ஔ͍ͯͨ͠ന͍͚ͩͷ FrameLayout

Slide 47

Slide 47 text

2018.2.8

Slide 48

Slide 48 text

2018.2.8 Article Shared Elements ࣮૷ͷղઆ Article 5JNFMJOF'SBNFOU 1PTU"SUJDMF'SBHNFOU 7JFX %FTDSJQUJPO 7JFX %FTDSJQUJPO *NBHF7JFX Χʔυഎܠ *NBHF7JFX ΧόʔΠϝʔδ $BSE7JFX Χʔυ 'SBNF-BZPVU μϛʔͷഎܠ -JOFBS-BZPVU ౤ߘऀͷϨΠΞ΢τ -JOFBS-BZPVU ౤ߘऀͷϨΠΞ΢τ 5FYU7JFX λΠτϧ 5FYU7JFX λΠτϧ 5FYU7JFX ϝσΟΞ 5FYU7JFX ϝσΟΞ $POTUSBJOU-BZPVU ίϝϯτϘλϯͳͲ $POTUSBJOU-BZPVU ίϝϯτϘλϯͳͲ

Slide 49

Slide 49 text

2018.2.8 PostArticleFragment ϨΠΞ΢τߏ଄ ࣮૷ͷղઆ Article fragment_post_article.xml

Slide 50

Slide 50 text

2018.2.8 ࣮૷ͷղઆ Article PostArticleFragment ϨΠΞ΢τߏ଄ fragment_post_article.xml

Slide 51

Slide 51 text

2018.2.8 ࣮૷ͷղઆ Article PostArticleFragment ϨΠΞ΢τߏ଄ fragment_post_article.xml

Slide 52

Slide 52 text

2018.2.8 ࣮૷ͷղઆ Article PostArticleFragment ϨΠΞ΢τߏ଄ fragment_post_article.xml

Slide 53

Slide 53 text

2018.2.8 ࣮૷ͷղઆ Article PostArticleFragment ϨΠΞ΢τߏ଄ fragment_post_article.xml

Slide 54

Slide 54 text

2018.2.8 ࣮૷ͷղઆ Article layout="@layout/item_post_user" /> PostArticleFragment ϨΠΞ΢τߏ଄ fragment_post_article.xml

Slide 55

Slide 55 text

2018.2.8 @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { mBinding = FragmentPostArticleBinding.inflate(inflater, container, false); ViewCompat.setTransitionName(mBinding.imageCover, getString(R.string.transition_image_cover)); ViewCompat.setTransitionName(mBinding.backgroundView, getString(R.string.transition_background)); ViewCompat.setTransitionName(mBinding.layoutPoster.getRoot(), getString(R.string.transition_item_user)); ViewCompat.setTransitionName(mBinding.textTitle, getString(R.string.transition_text_title)); ViewCompat.setTransitionName(mBinding.textSourceMedia, getString(R.string.transition_item_source_media)); ViewCompat.setTransitionName(mBinding.reaction, getString(R.string.transition_item_reactions)); return mBinding.getRoot(); } ࣮૷ͷղઆ Article PostArticleFragment TransitionपΓͷίʔυ

Slide 56

Slide 56 text

2018.2.8 @Override public void onStart() { super.onStart(); mPostAccessor.getObservable() .compose(this.bindToLifecycle()) .subscribe(post -> { refreshPost(post, mState); getActivity().supportStartPostponedEnterTransition(); }, e -> recordError(null, this, e, null)); } ࣮૷ͷղઆ Article PostArticleFragment Ωϟογϡʹ͋Δهࣄͷσʔλ(post)Λऔಘ͠ɺ׬ྃޙTransitionΛ࠶։

Slide 57

Slide 57 text

2018.2.8 ϙΠϯτ • Transition։࢝લͷλΠϛϯάͰҰ࣌ఀࢭ͢Δ • Viewͷ४උ͕Ͱ͖ͨΒ࠶։ • Χʔυ͕expand͢ΔΑ͏ͳΞχϝʔγϣϯ ͸ͪΐͬͱͨ͠τϦοΫΛ࢖͍ͬͯΔ͚ͩɻ ೉͘͠͸ͳ͍ ࣮૷ͷղઆ Article PostArticleFragment

Slide 58

Slide 58 text

2018.2.8 ࣮૷ͷղઆ Graphic contents

Slide 59

Slide 59 text

2018.2.8 Graphic contents Transition։࢝લ ࣮૷ͷղઆ Graphic contents • CardView • ImageView(Χʔυഎܠ) • ౤ߘऀΛදࣔ͢ΔϨΠΞ΢τ • Title

Slide 60

Slide 60 text

2018.2.8 Graphic contents ࣮૷ͷղઆ Graphic contents • CardView • ImageView(Χʔυഎܠ) • ౤ߘऀΛදࣔ͢ΔϨΠΞ΢τ • Title Transition։࢝લ

Slide 61

Slide 61 text

2018.2.8 Graphic contents ࣮૷ͷղઆ Graphic contents Transition։࢝લ • CardView • ImageView(Χʔυഎܠ) • ౤ߘऀΛදࣔ͢ΔϨΠΞ΢τ • Title

Slide 62

Slide 62 text

2018.2.8 Graphic contents ࣮૷ͷղઆ Graphic contents Transition։࢝લ • CardView • ImageView(Χʔυഎܠ) • ౤ߘऀΛදࣔ͢ΔϨΠΞ΢τ • Title

Slide 63

Slide 63 text

2018.2.8 Graphic contents Transition։࢝ޙং൫ • Χʔυશମ͕ը໘ΛຒΊΔ༻ʹ޿͕ͬͯ ͍͘ • ౤ߘऀ΍λΠτϧͳͲ΋ಉ͡Α͏ʹಈ͍ ͍ͯ͘ ࣮૷ͷղઆ Graphic contents

Slide 64

Slide 64 text

2018.2.8 Graphic contents Transition։࢝ޙத൫ • എܠʹઃఆ͍ͯͨ͠ImageView͕ը໘ ͍ͬͺ͍ʹ޿͕Δ ࣮૷ͷղઆ Graphic contents

Slide 65

Slide 65 text

2018.2.8 Graphic contents Transition։࢝ޙऴ൫1/2 • ίϯςϯπͷϩʔυ͕ऴྃ͠ɺϔομʔ ෦෼͕ϑΣʔυΞ΢τ&্ʹফ͍͑ͯ͘ ࣮૷ͷղઆ Graphic contents

Slide 66

Slide 66 text

2018.2.8 Graphic contents Transition։࢝ޙऴ൫2/2 • ίϯςϯπͱഎܠը૾͕ΫϩεϑΣʔυ ͢ΔܗͰೖΕସΘΔ ࣮૷ͷղઆ Graphic contents

Slide 67

Slide 67 text

2018.2.8

Slide 68

Slide 68 text

2018.2.8 Graphic contents Shared Elements ࣮૷ͷղઆ 5JNFMJOF'SBNFOU (SBQIJD$POUFOUT'SBHNFOU 7JFX %FTDSJQUJPO 7JFX %FTDSJQUJPO *NBHF7JFX Χʔυഎܠ *NBHF7JFX എܠը૾ -JOFBS-BZPVU ౤ߘऀͷϨΠΞ΢τ -JOFBS-BZPVU ౤ߘऀͷϨΠΞ΢τ 5FYU7JFX λΠτϧ 5FYU7JFX λΠτϧ 5FYU7JFX ϝσΟΞ 5FYU7JFX ϝσΟΞ Graphic contents