如何在 activity 过渡时在共享元素上实现放大动画

Question

我希望在 activity 过渡的共享元素上实现放大动画，就像在这个 link 中一样。

但找不到任何关于此特定效果以及如何实现它的好的参考。这是自定义过渡还是默认过渡？也许任何人都可以提供帮助或 post 比官方文档更详细的教程。

Answer 1

在 xml 中创建动画并使用以下代码：

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    overridePendingTransition(animation_in, animation_out);
}

res/anim/in.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">

    <scale
        android:duration="700"
        android:fillBefore="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

res/anim/out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">

    <scale
        android:duration="700"
        android:fillBefore="false"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:toYScale="0.0" />
</set>

Answer 2

https://www.youtube.com/watch?v=CPxkoe2MraA

此视频说明了如何实现相同的结果。主要思想是

1) 覆盖自定义默认动画。这里0表示默认不播放动画。

overridePendingTransition(0, 0);

2) 将第二个 activity 图像转换并缩放到您的 GridView 图像，使其完全重叠，然后将动画应用到 activity 的图像视图以移动其原始位置和缩放。

另请参阅共享元素 Activity 过渡 - https://guides.codepath.com/android/Shared-Element-Activity-Transition

Answer 3

1：查找视图规格：

int[] location = new int[2];
view.getLocationOnScreen(location);

int viewHeight = view.getHeight();
int viewWidth = view.getWidth();

2 : 创建一个透明的 activity 并将最高值传递给新的 activity

3：将您的视图添加到新的 activity 并执行如下操作：

LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) yourView.getLayoutParams();
layoutParams.topMargin = location[1];
layoutParams.leftMargin = location[0];
layoutParams.height = viewHeight;
layoutParams.width = viewWidth;
yourView.setLayoutParams(layoutParams);

4 : 使用像@Neo answer 这样的动画来缩放你的视图以填满屏幕

Answer 4

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

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

启动时，新的 activity 将使其所有视图透明并定位共享视图。它改变它的属性以匹配那些从启动 activity 传入并使单个视图可见。然后它运行动画将共享视图从这个状态转换到它在布局中的自然位置。随着过渡的进行，window 背景和其余非共享元素慢慢淡入直到它们完全不透明。所有这些都是自动完成的。

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

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

在两种 activity 布局中。

现在从旧 activity 开始新的 activity 定义过渡动画：

 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

如何在 activity 过渡时在共享元素上实现放大动画

How to implement scale up animation on shared element on activity transition

android

android-animation

material-design

shared-element-transition