Android高阶转场动画-ShareElement完全攻略

本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

  看完本文你能学到什么：

1、ShareElement是什么以及基本用法
2、理解ShareElement是如何运作的
3、掌握ShareElement的进阶用法（Fresco、Glide、RecyclerView&ViewPager图片视频混合的情况下如何实现ShareElement动画）
4、一个封装好可以简单实现以上ShareElement动画的开源库 YcShareElement(https://github.com/yellowcath/YcShareElement)

 

• • 什么是ShareElement
  • ShareElement应用场景
  • 如何实现ShareElement
    • Activity A
    • Activity B
  • ShareElement完整流程
    • SharedElementCallback
    • 1、moveSharedElementsToOverlay()
    • 2、setSharedElementState()
    • 3、setOriginalSharedElementState()
    • 返回流程
  • 自定义Transition
  • YcShareElement
    • 普通页面使用步骤
      • 1、打开WindowContentTransition开关
      • 2、生成Bundle，然后startActivity
      • 3、新的页面里设置并启动Transition
    • 图片&视频页面使用步骤
      • 1、打开WindowContentTransition开关
      • 2、生成Bundle，然后startActivity
      • 3、Activity B设置Transtion动画
      • 4、Activity B的ViewPager加载好之后启动Transition
      • 5、Activity B实现finishAfterTransition()函数
      • 6、Activity A实现onActivityReenter()函数
    • 如何扩展支持自定义View的Transition动画
      • 1、确定所需参数
      • 2、继承ViewStateSaver，获取所需参数
      • 3、自定义Transition
      • 4、将自定义的Transition加入到YcShareElement
  • 广告时间

什么是ShareElement

ShareElement即两个Activity（或Fragment）之间切换时的共享元素，如下图，可以看到，选中的联系人头像和名字直接很自然地过渡到了下一页的位置，这两个就是本次切换动画的ShareElement

ShareElement这一套也能实现同一个Activity（Fragment）内部的复杂切换动画，不过因为在Activity内部做动画有太多现成的手段，所以本文不涉及这方面内容

ShareElement应用场景

以我个人的观点，ShareElement最好的应用场景之一就是现在的以图片、视频为主的内容流APP。下面是我司应用了ShareElement的app与某app的用户浏览体验对比

 

如何实现ShareElement

或许很多人第一次看到类似这种MaterialDesign里炫酷的界面切换效果时，也会有和我一样的疑惑， 这么炫酷的效果是怎么实现的？两个Activity之间怎么能切换的如此自然？ 实际上，这样的效果单凭开发者自己确实很难实现，幸运的是，在Api21之后，官方提供了一套现成的工具来帮我们实现这个功能，核心就是以下四个函数：

    Window.setEnterTransition()
    Window.setExitTransition()
    Window.setSharedElementEnterTransition()
    Window.setSharedElementExitTrans