Android动画之共享元素动画简单实践

本文首发于公众号“AntDream”，欢迎微信搜索“AntDream”或扫描文章底部二维码关注，和我一起每天进步一点点

共享元素动画（Shared Element Transition）是Android中引入的一种过渡动画效果，目的是在两个Activity或Fragment之间切换时，更平滑地过渡和转移特定的UI元素。在共享元素过渡中，两个界面共享一个或多个元素，这些元素在过渡过程中会从源Activity/Fragment平滑地移动到目标Activity/Fragment。

以下是详细解释以及一个具体的代码示例：

1. 配置Activity的过渡动画

首先，在两个Activity中的onCreate方法中，设置过渡动画。

// MainActivity.java
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageView = findViewById(R.id.sharedImageView);
        imageView.setOnClickListener(new View.OnClickListener() {
   
            @Override
            public void onClick(View v) {
   
                Intent intent = new Intent(MainActivity.this, DetailActivity.class);

                // 创建ActivityOptions
                ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(
                        MainActivity.this, imageView, "sharedImage");

                // 启动目标Activity
                startActivity(intent, options.toBundle());
            }
        });
    }
}

// DetailActivity.java
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class DetailActivity extends AppCompatActivity {
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);
    }
}

2. 为共享元素设置transitionName

在布局文件中，为共享元素指定唯一的transitionName属性。

<!-- activity_main.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/sharedImageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/your_image_resource"
        android:transitionName="sharedImage" />
</RelativeLayout>

<!-- activity_detail.xml -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/your_image_resource"
        android:transitionName="sharedImage" />
</RelativeLayout>

3. 配置转场动画（可选）

在res文件夹中创建transition目录，并在其中创建XML文件定义具体的动画效果。例如：

<!-- res/transition/change_image_transform.xml -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeImageTransform>
        <duration android:value="300" />
    </changeImageTransform>
</transitionSet>

在Activity的onCreate方法中设置这些动画（通常可省略，系统会自动处理基础动画）：

SharedElementTransition sharedElementTransition = new ChangeImageTransform();
sharedElementTransition.setDuration(300);

getWindow().setSharedElementEnterTransition(sharedElementTransition);
getWindow().setSharedElementExitTransition(sharedElementTransition);

总结

这个示例展示了如何在两个Activity之间实现共享元素过渡动画。关键步骤包括在布局文件中设置transitionName属性，在代码中通过ActivityOptions创建动画选项，并启动目标Activity。如果需要更精细的动画效果，还可以通过自定义过渡动画文件来配置。

共享元素动画可以显著提升用户体验，尤其是当你需要在界面间平滑过渡具体元素（如图片、文本）时，可以提供更自然和清晰的视觉反馈。

欢迎关注我的公众号AntDream查看更多精彩文章！