Advanced 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

29. None

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 ʁ

36. None

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); } }); }
48. None

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

51. None

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