今天使用SimpleImageView的时候发现没法使用共享元素效果,看到github上的issue:
Shared element transition · Issue #22 · facebook/fresco
https://github.com/facebook/fresco/issues/22
然后我在新的activity里加上这两行解决了(kotlin代码):
window.sharedElementEnterTransition = DraweeTransition.createTransitionSet(ScalingUtils.ScaleType.CENTER_CROP, ScalingUtils.ScaleType.FIT_CENTER) // 进入
window.sharedElementReturnTransition = DraweeTransition.createTransitionSet(ScalingUtils.ScaleType.FIT_CENTER, ScalingUtils.ScaleType.CENTER_CROP) // 返回
附上实现过程:
第一个activity的图片:
<com.longzhu.livearch.router.imageload.SimpleImageView
android:id="@+id/ivRealCenter"
android:layout_width="45dp"
android:layout_height="45dp"
android:transitionName="share"//注意这里,共享元素的字符串要一致
android:layout_centerHorizontal="true"
app:roundAsCircle="true" />
第二个activity的图片:
<com.longzhu.livearch.router.imageload.SimpleImageView
android:id="@+id/simg_head"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_gravity="center_horizontal"
android:layout_marginRight="24dp"
android:src="@mipmap/ic_launcher_round"
android:transitionName="share"//注意这里,共享元素的字符串要一致
app:actualImageScaleType="fitCenter"
app:roundAsCircle="true"
app:roundingBorderColor="@color/white"
app:roundingBorderWidth="1dp" />
第一个activity启动第二个activity:
ivRealCenter?.setOnClickListener {
// ToastUtil.showToast(context, "跳转个人中心")
var intent = Intent(context, PersonalCenterActivity::class.java)
intent.putExtra("head", mCurAvatarUrl)//传递图片的路径给下一个activity
context.startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(context as Activity?, Pair(ivRealCenter, "share")).toBundle())
}
第二个activity加载图片:
var avatar = intent.getStringExtra("head")
if (!TextUtils.isEmpty(avatar)) {
ImageLoadUtils.showImage(avatar, simgHead)
}
第二个activity的oncreate方法里要加上这两行:
window.sharedElementEnterTransition = DraweeTransition.createTransitionSet(ScalingUtils.ScaleType.CENTER_CROP, ScalingUtils.ScaleType.FIT_CENTER) // 进入
window.sharedElementReturnTransition = DraweeTransition.createTransitionSet(ScalingUtils.ScaleType.FIT_CENTER, ScalingUtils.ScaleType.CENTER_CROP) // 返回
效果图: