本文首发于公众号“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查看更多精彩文章！
