如何在活动转换的共享元素上实现放大动画

Question

我希望在活动转换的共享元素上实现放大动画,就像在此链接中一样.

但是找不到任何关于这种特定效果的好参考以及如何实现它.这是自定义转换还是默认转换？也许任何人都可以帮助或发布更详细的教程,而不是官方文档.

Answer 1

我来这里给你一个简短的教程:)

您真正想要的是两个活动之间的共享元素转换.您实际上不会共享任何视图,这两个活动都将具有独立的视图树.但是我们会将有关共享元素的信息(例如视图和大小)传递给新活动.

启动时,新活动将使其所有视图都透明并找到共享视图.它改变其属性以匹配从启动活动传入的属性,并使该单个视图可见.然后运行动画以将共享视图从此状态转换为布局中的自然位置.随着转换的进行,窗口背景和其他非共享元素逐渐淡入,直到它们完全不透明.所有这些都是自动完成的.

现在将视图标记为共享集此属性:

<ImageView
...
android:transitionName="@string/transition_photo" />

在两个活动布局中.

现在,从旧活动开始新活动时,定义过渡动画:

 Bundle bundle = ActivityOptions.makeSceneTransitionAnimation(
                                  this, 
                                  sharedView,
                                  sharedView.getTransitionName())
                                 .toBundle();
startActivity(intent,bundle);

您还可以指定多个视图以进行转换.您甚至可以在不同应用程序之间转换共享视图

默认情况下,使用的动画是移动:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeBounds/>
<changeTransform/>
<changeClipBounds/>
<changeImageTransform/>
</transitionSet>

但您也可以在styles.xml中设置自定义动画:

<style name="AppTheme.Details">
    <item name="android:windowSharedElementEnterTransition">@transition/shared_photo</item>
</style>

以下是共享元素转换的工作示例,如上所示:https: //github.com/anshchauhan/SharedElementTransition