三步简单实现Android 共享元素转场动画

先上效果图

效果图

Step 1

在Activity主题style文件加入这行

<item name="android:windowContentTransitions">true</item>

或者在java文件中

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

Step 2 在启动的Activity绑定控件

代码如下

Intent intent = new Intent(getContext(),ImageDisplayActivity.class);
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP && getContext() != null) {  
    Pair<View,String> pair =new Pair<>(view,“key”); // 传入 view、标记的key
    Pair<View,String> pair2 =new Pair<>(view2,“key2”); // 传入 view、标记的key
    ActivityOptionsCompat optionsCompat = 
    ActivityOptionsCompat.makeSceneTransitionAnimation(getActivity(),pair,pair2 );   
    ActivityCompat.startActivity(getContext(),intent,optionsCompat.toBundle());
}else {
    startActivity(intent);
}

注意makeSceneTransitionAnimation()传入activity以及若干个Pair对象,一个Pair对象包括控件View以及这个控件的标识,这个标识可以自定位,跳转后会用到

并且这个Pair类 是 android.support.v4.util 包下的。

Step3 目标Activity绑定控件

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            postponeEnterTransition(); // 延缓动画启动
            ViewCompat.setTransitionName(targetView, “key”); // *关键* 对应的view 和相同的key
            startPostponedEnterTransition(); // 开始被延缓的动画
     }
     
     // 或者
     targetView.setTransitionName(“key”);
    // 在xml文件里面:
    android:transitionName="IMG_TRANSITION"

然后就可以实现基本的功能啦

拓展以及小问题

退出带动画api:

  finishAfterTransition(); // 直接finish会没有这个效果

结合Glide使用会出现Imageview、PhotoView自动放大、模糊等问题,

解决方法:去掉占位图即可

给动画添加监听器

transition = window.sharedElementEnterTransition
        transition?.addListener(object : Transition.TransitionListener {
            override fun onTransitionResume(p0: Transition?) {
            }

            override fun onTransitionPause(p0: Transition?) {
            }

            override fun onTransitionCancel(p0: Transition?) {
            }

            override fun onTransitionStart(p0: Transition?) {
            }

            override fun onTransitionEnd(p0: Transition?) {
               
            }

        })
发布了27 篇原创文章 · 获赞 6 · 访问量 1656

猜你喜欢

转载自blog.csdn.net/weixin_41802023/article/details/102471075