Advanced Shared Element Transition

Shared Element Transitionをいい感じに実装にするためのあれこれ。

Transcript

1. Advanced Shared Element Transition 3ZPUB
   /JJOPNJ "8"
2. !SOPNJ SOPNJ ৽ Ո ɹ ྄ ଠ /JJOPNJɹ3ZPUB $"ೖࣾ
   ίϛϡχςΟαʔϏεͷϑϩϯτΤϯυ։ൃ ೥ ೥ʙ "8"Ͱ"OESPJE։ൃ
3. Shared Element Transition?
4. ɾ̎ը໘ؒͷΪϟοϓΛͳ͘͢
   ɾࢹઢΛ༠ಋ͢Δ
   ɾಡΈࠐΈॲཧ͔ΒҙࣝΛͦΒ͢
   ɾ৺஍Α͞
5. IUUQTNBUFSJBMJPHVJEFMJOFTNPUJPODIPSFPHSBQIZIUNMDIPSFPHSBQIZDPOUJOVJUZ
6. Activity Transitions
7. Activity Transitions ɾ4IBSFE
   &MFNFOU
   5SBOTJUJPOΛ࣮ݱ͢Δ"1*
   ɾ"1*
   -FWFM
   ʙ
8. Basic Implementation .BJO"DUJWJUZ
   
   %FUBJM"DUJWJUZ
9. Intent intent = new Intent(this, DetailActivity.class); Bundle options = ActivityOptionsCompat.makeSceneTransitionAnimation( context, sharedElementView, “shared_element_view” ).toBundle(); startActivity(intent, options); .BJO"DUJWJUZKBWB
10. @Override protected void onCreate(Bundle savedInstanceState){ ... View view = findViewById(R.id.animationView); ViewCompat.setTransitionName(view, "shared_element_view"); } %FUBJM"DUJWJUZKBWB
11. Activity Transitions Using Adapter 4IBSFE
    &MFNFOUͷର৅͕"EBQUFS಺ͷ7JFX
12. postponeEnterTransition(); // 待機 startPostponedEnterTransition(); // 再開
13. private ItemDetailAdapter.Listener mListener = new ItemDetailAdapter.Listener() { @Override public void onSharedElementViewPrepared() { startPostponedEnterTransition(); } }; @Override protected void onCreate(Bundle savedInstanceState) { ... postponeEnterTransition(); adapter.setListner(mListener); } %FUBJM"DUJWJUZKBWB
14. private ItemDetailAdapter.Listener mListener = new ItemDetailAdapter.Listener() { @Override public void onSharedElementViewPrepared() { startPostponedEnterTransition(); } }; @Override protected void onCreate(Bundle savedInstanceState) { ... postponeEnterTransition(); adapter.setListner(mListener); } %FUBJM"DUJWJUZKBWB
15. *UFN"EBQUFSKBWB @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()) .inflate(R.layout.item_viewholder, parent, false); final ViewHolder vh = new ViewHolder(view); ViewCompat.setTransitionName(vh.thumb, "shared_element_view"); vh.thumb.getViewTreeObserver() .addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { vh.thumb.getViewTreeObserver().removeOnPreDrawListener(this); mListener.onSharedElementViewPrepared(); return true; } }); return vh; }
16. @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()) .inflate(R.layout.item_viewholder, parent, false); final ViewHolder vh = new ViewHolder(view); ViewCompat.setTransitionName(vh.thumb, "shared_element_view"); vh.thumb.getViewTreeObserver() .addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { vh.thumb.getViewTreeObserver().removeOnPreDrawListener(this); mListener.onSharedElementViewPrepared(); return true; } }); return vh; } *UFN"EBQUFSKBWB
17. @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()) .inflate(R.layout.item_viewholder, parent, false); final ViewHolder vh = new ViewHolder(view); ViewCompat.setTransitionName(vh.thumb, "shared_element_view"); vh.thumb.getViewTreeObserver() .addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { vh.thumb.getViewTreeObserver().removeOnPreDrawListener(this); mListener.onSharedElementViewPrepared(); return true; } }); return vh; } *UFN"EBQUFSKBWB
18. Layout Problem
19. 4UBUVT#BS
    /BWJHBUJPO#BSͷલ໘ʹදࣔ
20. 4IBSFE
    &MFNFOU
    5BSHFUT 4UBUVT#BS 4IBSFE
    &MFNFOU
    7JFX /BWJHBUJPO#BS
21. View statusBar = activity.findViewById(android.R.id.statusBarBackground); View navigationBar = activity.findViewById(android.R.id.navigationBarBackground); List<Pair<View, String>> pairs = new ArrayList<>(); pairs.add(Pair.create(statusBar, statusBar.getTransitionName())); pairs.add(Pair.create(navigationBar, navigationBar.getTransitionName())); pairs.add(Pair.create(sharedElementView, "shared_element_view")); Bundle options = ActivityOptionsCompat.makeSceneTransitionAnimation( this, pairs.toArray(new Pair[pairs.size()]) ).toBundle(); startActivity(intent, options); .BJO"DUJWJUZKBWB
22. View statusBar = activity.findViewById(android.R.id.statusBarBackground); View navigationBar = activity.findViewById(android.R.id.navigationBarBackground); List<Pair<View, String>> pairs = new ArrayList<>(); pairs.add(Pair.create(statusBar, statusBar.getTransitionName())); pairs.add(Pair.create(navigationBar, navigationBar.getTransitionName())); pairs.add(Pair.create(sharedElementView, "shared_element_view")); Bundle options = ActivityOptionsCompat.makeSceneTransitionAnimation( this, pairs.toArray(new Pair[pairs.size()]) ).toBundle(); startActivity(intent, options); .BJO"DUJWJUZKBWB
23. View statusBar = activity.findViewById(android.R.id.statusBarBackground); View navigationBar = activity.findViewById(android.R.id.navigationBarBackground); List<Pair<View, String>> pairs = new ArrayList<>(); pairs.add(Pair.create(statusBar, statusBar.getTransitionName())); pairs.add(Pair.create(navigationBar, navigationBar.getTransitionName())); pairs.add(Pair.create(sharedElementView, "shared_element_view")); Bundle options = ActivityOptionsCompat.makeSceneTransitionAnimation( this, pairs.toArray(new Pair[pairs.size()]) ).toBundle(); startActivity(intent, options); .BJO"DUJWJUZKBWB
24. 4UBUVT#BS
    /BWJHBUJPO#BSͷഎ໘ʹදࣔ
25. Set callback of Transition
26. Detect animationEnd 5SBOTJUJPO5SBOTJUJPO-JTUFOFS "DUJWJUZTFU&OUFS4IBSFE&MFNFOU$BMMCBDL "DUJWJUZPO&OUFS"OJNBUJPO$PNQMFUF ✖ ˕ ✖
27. getWindow() .getSharedElementEnterTransition() .addListener(new Transition.TransitionListener() { @Override public void onTransitionEnd(Transition transition) { // Do something after shared element transition end. } … });
28. Interpolator
30. &910@*/@065 #"$,@065 &-"45*$@065
31. @Override protected void onCreate(Bundle savedInstanceState){ … Interpolator interpolator = new FastOutSlowInInterpolator(); Transition transition = new ChangeBounds().setInterpolator(interpolator); getWindow().setSharedElementEnterTransition(transition); }
32. IUUQSPCFSUQFOOFSDPNFBTJOH Robert Penner's Easing Functions
33. IUUQTHJUIVCDPNSOPNJ"OESPJE31*OUFSQPMBUPS AndroidRPInterpolator
34. Activity Transitions Using ViewPager
35. .BJO"DUJWJUZKBWB %FUBJM"DUJWJUZKBWB 3FDZDMFS7JFX 7JFX1BHFS qJDL
    ˎ
    O ʁ
37. 4IBSFE
    &MFNFOU
    7JFXΛೖΕସ͑ SharedElementCallback.onMapSharedElements()
38. setEnterSharedElementCallback(new SharedElementCallback() { @Override public void onMapSharedElements(List<String> names, Map<String, View> sharedElements) { int position = mViewPager.getCurrentItem(); View view = mViewPager.findViewWithTag(ItemPagerAdapter.getTag(position)); sharedElements.clear(); sharedElements.put("shared_element_view", view); } }); %FUBJM"DUJWJUZKBWB
39. setEnterSharedElementCallback(new SharedElementCallback() { @Override public void onMapSharedElements(List<String> names, Map<String, View> sharedElements) { int position = mViewPager.getCurrentItem(); View view = mViewPager.findViewWithTag(ItemPagerAdapter.getTag(position)); sharedElements.clear(); sharedElements.put("shared_element_view", view); } }); %FUBJM"DUJWJUZKBWB
40. %FUBJM"DUJWJUZKBWB postponeEnterTransition(); mViewPager.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { mViewPager.getViewTreeObserver().removeOnPreDrawListener(this); startPostponedEnterTransition(); return true; } }); 7JFX1BHFSͷඳը४උ׬ྃΛ଴ͭ
41. %FUBJM"DUJWJUZKBWB postponeEnterTransition(); mViewPager.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { mViewPager.getViewTreeObserver().removeOnPreDrawListener(this); startPostponedEnterTransition(); return true; } }); 7JFX1BHFSͷඳը४උ׬ྃΛ଴ͭ
42. %FUBJM"DUJWJUZKBWB qJDLͰ.BJO"DUJWJUZʹ௨஌͢ΔQPTJUJPOΛߋ৽ mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { Intent intent = new Intent(); Bundle bundle = new Bundle(); bundle.putInt("position", position); intent.putExtras(bundle); setResult(Activity.RESULT_OK, intent); } … });
43. %FUBJM"DUJWJUZKBWB qJDLͰ.BJO"DUJWJUZʹ௨஌͢ΔQPTJUJPOΛߋ৽ mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { Intent intent = new Intent(); Bundle bundle = new Bundle(); bundle.putInt("position", position); intent.putExtras(bundle); setResult(Activity.RESULT_OK, intent); } … });
44. 4IBSFE&MFNFOU5SBOTJUJPOͷόοΫ࣌ʹEBUBͱڞʹݺ͹ΕΔ Activity.onActivityReenter(…, Intent data)
45. .BJO"DUJWJUZKBWB @Override public void onActivityReenter(int resultCode, Intent data) { super.onActivityReenter(resultCode, data); int position = data.getIntExtra("position", 0); ItemAdapter.ViewHolder viewHolder = (ItemAdapter.ViewHolder) mRecyclerView.findViewHolderForAdapterPosition(position); final View sharedElementView = (viewHolder == null) ? null : viewHolder.thumb; setExitSharedElementCallback(new SharedElementCallback() { @Override public void onMapSharedElements(List<String> names, Map<String, View> sharedElements) { sharedElements.clear(); sharedElements.put("shared_element_view", sharedElementView); setExitSharedElementCallback((SharedElementCallback) null); } }); }
46. .BJO"DUJWJUZKBWB @Override public void onActivityReenter(int resultCode, Intent data) { super.onActivityReenter(resultCode, data); int position = data.getIntExtra("position", 0); ItemAdapter.ViewHolder viewHolder = (ItemAdapter.ViewHolder) mRecyclerView.findViewHolderForAdapterPosition(position); final View sharedElementView = (viewHolder == null) ? null : viewHolder.thumb; setExitSharedElementCallback(new SharedElementCallback() { @Override public void onMapSharedElements(List<String> names, Map<String, View> sharedElements) { sharedElements.clear(); sharedElements.put("shared_element_view", sharedElementView); setExitSharedElementCallback((SharedElementCallback) null); } }); }
47. .BJO"DUJWJUZKBWB @Override public void onActivityReenter(int resultCode, Intent data) { super.onActivityReenter(resultCode, data); int position = data.getIntExtra("position", 0); ItemAdapter.ViewHolder viewHolder = (ItemAdapter.ViewHolder) mRecyclerView.findViewHolderForAdapterPosition(position); final View sharedElementView = (viewHolder == null) ? null : viewHolder.thumb; setExitSharedElementCallback(new SharedElementCallback() { @Override public void onMapSharedElements(List<String> names, Map<String, View> sharedElements) { sharedElements.clear(); sharedElements.put("shared_element_view", sharedElementView); setExitSharedElementCallback((SharedElementCallback) null); } }); }
49. Summary ɾ4IBSFE
    &MFNFOUͷର৅ʹ͸4UBUVT#BSɺ/BWJHBUJPO#BSΛؚΊΔ
    ɾదٓɺQPTUQPOF&OUFS5SBOTJUJPOͰΞχϝʔγϣϯΛ஗Ԇͤ͞Δ
    ɾ0O1SF%SBX-JTUFOFSPO1SF%SBXΛ࢖͏
    ɾదٓɺPO.BQ4IBSFE&MFNFOUTͰ4IBSFE
    &MFNFOUର৅ΛೖΕସ͑
50. Self Implementation for Shared Element Transition
52. .BJO"DUJWJUZ  WJFXͷTJ[F
    QPTJUJPOΛ%FUBJM"DUJWJUZʹ౉͢ %FUBJM"DUJWJUZ  4IBSFE
    FMFNFOU
    WJFXʹTJ[F
    QPTJUJPOΛઃఆ
     Ξχϝʔγϣϯ
53. int[] location = new int[2]; view.getLocationOnScreen(location); location[0]; // left location[1]; // top .BJO"DUJWJUZ  WJFXͷTJ[F
    QPTJUJPOΛ%FUBJM"DUJWJUZʹ౉͢
54. public class Position implements Parcelable { int left; int top; int width; int height; public Position(View view) { int[] location = new int[2]; view.getLocationOnScreen(location); left = location[0]; top = location[1]; width = view.getWidth(); height = view.getHeight(); } ... } .BJO"DUJWJUZ  WJFXͷTJ[F
    QPTJUJPOΛ%FUBJM"DUJWJUZʹ౉͢
55. // Set size ViewGroup.LayoutParams param = view.getLayoutParams(); param.width = position.getWidth(); param.height = position.getHeight(); view.setLayoutParams(param); %FUBJM"DUJWJUZ  4IBSFE
    &MFNFOU
    7JFXʹTJ[F
    QPTJUJPOΛઃఆ
56. // Wait for view preparing view.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { view.getViewTreeObserver().removeOnPreDrawListener(this); float top = position.getTop() - getStatusBarheight(); // Use setX / setY to set absolute position. view.setX(position.getLeft()); view.setY(top); startEnterAnimation(); return true; } }); %FUBJM"DUJWJUZ  4IBSFE
    &MFNFOU
    7JFXʹTJ[F
    QPTJUJPOΛઃఆ
57. // Wait for view preparing view.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { view.getViewTreeObserver().removeOnPreDrawListener(this); float top = position.getTop() - getStatusBarheight(); // Use setX / setY to set absolute position. view.setX(position.getLeft()); view.setY(top); startEnterAnimation(); return true; } }); %FUBJM"DUJWJUZ  4IBSFE
    &MFNFOU
    7JFXʹTJ[F
    QPTJUJPOΛઃఆ
58. 4IBSFE
    &MFNFOU
    7JFXͷUPQ
    ʔ
    TUBUVT#BSͷߴ͞
59. QPTJUJPOHFU5PQ
    ͭ·Γ
    MPDBUJPO<>
    ͸TUBUVT
    CBSͷߴ͞ΛؚΉ Point
60. // Wait for view preparing view.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { view.getViewTreeObserver().removeOnPreDrawListener(this); float top = position.getTop() - getStatusBarheight(); // Use setX / setY to set absolute position. view.setX(position.getLeft()); view.setY(top); startEnterAnimation(); return true; } }); %FUBJM"DUJWJUZ  4IBSFE
    &MFNFOU
    7JFXʹTJ[F
    QPTJUJPOΛઃఆ
61. view.setY(top); ˕ ✖ view.setTranslationY(top);
62. view.setY(top); ˕ ✖ view.setTranslationY(top); 
    ݩͷҐஔ͔Βܭࢉ 
    ج४఺͔Βܭࢉ
63. private void startEnterAnimation() { int targetWidth = getTargetWidth(); int targetHeight = targetWidth * position.getWidth() / position.getHeight(); AnimatorSet animSet = new AnimatorSet(); animSet.playTogether( view.getToRectAnimator(), // Use translationX / translationY to translate to relative position. ObjectAnimator.ofFloat(view, "translationX", 0), ObjectAnimator.ofFloat(view, "translationY", 0), ValueAnimator.ofObject(new WidthEvaluator(view), position.getWidth(), targetWidth), ValueAnimator.ofObject(new HeightEvaluator(view), position.getHeight(), targetHeight) ); animSet.start(); } %FUBJM"DUJWJUZ 
    Ξχϝʔγϣϯ
64. private void startEnterAnimation() { int targetWidth = getTargetWidth(); int targetHeight = targetWidth * position.getWidth() / position.getHeight(); AnimatorSet animSet = new AnimatorSet(); animSet.playTogether( view.getToRectAnimator(), // Use translationX / translationY to translate to relative position. ObjectAnimator.ofFloat(view, "translationX", 0), ObjectAnimator.ofFloat(view, "translationY", 0), ValueAnimator.ofObject(new WidthEvaluator(view), position.getWidth(), targetWidth), ValueAnimator.ofObject(new HeightEvaluator(view), position.getHeight(), targetHeight) ); animSet.start(); } %FUBJM"DUJWJUZ 
    Ξχϝʔγϣϯ
65. “translationY" == setTranslationY() %FUBJM"DUJWJUZ 
    Ξχϝʔγϣϯ
66. %FUBJM"DUJWJUZ 
    Ξχϝʔγϣϯ “translationY” ˕ ✖ “y”
67. private void startEnterAnimation() { int targetWidth = getTargetWidth(); int targetHeight = targetWidth * position.getWidth() / position.getHeight(); AnimatorSet animSet = new AnimatorSet(); animSet.playTogether( view.getToRectAnimator(), // Use translationX / translationY to translate to relative position. ObjectAnimator.ofFloat(view, "translationX", 0), ObjectAnimator.ofFloat(view, "translationY", 0), ValueAnimator.ofObject(new WidthEvaluator(view), position.getWidth(), targetWidth), ValueAnimator.ofObject(new HeightEvaluator(view), position.getHeight(), targetHeight) ); animSet.start(); } %FUBJM"DUJWJUZ 
    Ξχϝʔγϣϯ
68. private void startEnterAnimation() { int targetWidth = getTargetWidth(); int targetHeight = targetWidth * position.getWidth() / position.getHeight(); AnimatorSet animSet = new AnimatorSet(); animSet.playTogether( view.getToRectAnimator(), // Use translationX / translationY to translate to relative position. ObjectAnimator.ofFloat(view, "translationX", 0), ObjectAnimator.ofFloat(view, "translationY", 0), ValueAnimator.ofObject(new WidthEvaluator(view), position.getWidth(), targetWidth), ValueAnimator.ofObject(new HeightEvaluator(view), position.getHeight(), targetHeight) ); animSet.start(); } %FUBJM"DUJWJUZ 
    Ξχϝʔγϣϯ
69. 8JEUI&WBMVBUPS Ξχϝʔγϣϯ஋ΛXJEUIʹઃఆ
70. public class WidthEvaluator extends IntEvaluator { private View mView; public WidthEvaluator(View view) { mView = view; } @Override public Integer evaluate(float fraction, Integer startValue, Integer endValue) { Integer num = super.evaluate(fraction, startValue, endValue); ViewGroup.LayoutParams params = mView.getLayoutParams(); params.width = num; mView.setLayoutParams(params); return num; } }
71. Summary ɾ7JFXHFU-PDBUJPO0O4DSFFO JOU<>
    PVU-PDBUJPO ͰҐஔΛऔಘ
    ɾ0O1SF%SBX-JTUFOFSPO1SF%SBXͰ7JFXͷܭࢉ׬ྃΛ଴ͭ
    ɾॳظҐஔͷઃఆ͸TFU: Ͱ
    ɾ:࠲ඪͷઃఆʹ͸TUBUVT
    
    CBSΛߟྀ͢Δ
72. Thank you !SOPNJ SOPNJ