Android--MaterialDesign动画之转场动画（Activity transitions）
Android--MaterialDesign动画之转场动画（Activity transitions）
aruba
发布于 2020-07-03 11:39:01
发布于 2020-07-03 11:39:01
以前的Activity之间跳转比较生硬，用户很明显的会感觉到跳转，MaterialDesign推出了新的转场动画，可以实现两个界面之间的共享元素，使跳转带来的体验感如德芙般丝滑
1.基本使用
效果如下：
我在上面效果中做了两个操作，点击小的图片，跳转到另一个Activity，然后按了后退键返回上一个Activity，接下来介绍使用方法
首先我们需要开启支持转场动画，有两种方式
1.在Activity的OnCreate方法中，在setContentView之前调用
getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);2.在style的AppTheme中增加item
<item name="android:windowActivityTransitions">true</item>下面是第一个Activity的布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".FristActivity">
<ImageView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="@drawable/f"
android:onClick="toSecond" />
</LinearLayout>第二个Activity的布局文件中，需要为共享元素的android:transitionName设置值
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="@drawable/f"
android:transitionName="@string/app_name" />
</LinearLayout>接下来就是跳转的代码
public void toSecond(View view) {
ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, view, getString(R.string.app_name));
ActivityCompat.startActivity(this, new Intent(this, SecondActivity.class), compat.toBundle());
}调用ActivityOptionsCompat的makeSceneTransitionAnimation方法，将需要共享的元素还有共享元素的transitionName传入，并最终调用ActivityCompat的startActivity方法
2.多个共享元素
如果想要共享多个元素，可以使用第二个makeSceneTransitionAnimation方法，需要传入Pair对象
下面是第一个Activity的布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".FristActivity">
<ImageView
android:id="@+id/imageview1"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:onClick="toSecond"
android:src="@drawable/f" />
<ImageView
android:id="@+id/imageview2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:adjustViewBounds="true"
android:onClick="toSecond"
android:src="@drawable/f" />
</LinearLayout>第二个Activity的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="@drawable/f"
android:transitionName="@string/app_name" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:adjustViewBounds="true"
android:src="@drawable/f"
android:transitionName="@string/transition2" />
</LinearLayout>跳转代码
public void toSecond(View view) {
Pair pair1 = new Pair(imageview1, getString(R.string.app_name));
Pair pair2 = new Pair(imageview2, getString(R.string.transition2));
ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, pair1, pair2);
ActivityCompat.startActivity(this, new Intent(this, SecondActivity.class), compat.toBundle());
}效果：
3.自定义共享元素跳转效果
如果觉得系统提供的共享元素转场动画不够酷炫，我们还可以自定义动画
首先需要新建transition目录，自定义共享元素动画xml
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<!--changeBounds - 为目标视图的布局布局边界的变化添加动画-->
<!--changeClipBounds - 为目标视图的裁剪边界的变化添加动画-->
<!--changeTransform - 为目标视图的缩放与旋转变化添加动画-->
<!--changeImageTransform - 为目标图像的大小与缩放变化添加动画-->
<changeImageTransform
android:duration="1000"
android:startDelay="0"
/>
</transitionSet>设置自定义共享元素转场动画，两种方式
1.在style的主题中设置自定义共享元素转场动画
<item name="android:windowSharedElementEnterTransition">@transition/enter</item>
<item name="android:windowSharedElementExitTransition">@transition/enter</item>2.在代码中设置自定义共享元素转场动画
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setSharedElementEnterTransition(TransitionInflater.from(this).inflateTransition(R.transition.enter));
}效果如下：
4.除了元素共享外，还可以使用内容过渡动画
首先开启支持内容过渡动画，两种方式
1.主题中新增
<item name="android:windowContentTransitions">true</item>2.代码调用
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);指定过渡动画，两种方式
1.主题中设置
<item name="android:windowEnterTransition">@android:transition/slide_left</item>
<item name="android:windowExitTransition">@android:transition/slide_left</item>2.代码调用
getWindow().setEnterTransition(TransitionInflater.from(this).inflateTransition(android.R.transition.fade));效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读