Material Animations 2：Shared Element Transition_Android开发_移动开发

Material Animations 2：Shared Element Transition

2016-10-07 0

核心提示：元素共享变换（shared element transition）决定了共享的view元素从一个Activity/Fragment 到另一个Activity/Fragment的切换中是如何动画变化的。请记住，共享元素变换并不是真正实现了两个Activity或者Fragment之间元素的共享，界面还是两个不同界面，只不

元素共享变换（shared element transition）决定了共享的view元素从一个Activity/Fragment 到另一个Activity/Fragment的切换中是如何动画变化的。

请记住，共享元素变换并不是真正实现了两个Activity或者Fragment之间元素的共享，界面还是两个不同界面，只不过Framework采用了不同的方法来达到相同的视觉效果。

二、效果图

Material Animations 2：Shared Element Transition

三、实现方法

在主题中启用窗口内容转换

values-v21/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...  
	<item name="android:windowContentTransitions">true</item>
</style>

在styles.xml文件中指定一个共享元素转换

values-v21/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
	<item name="android:windowSharedElementExitTransition">@transition/def_transition</item>
	<item name="android:windowSharedElementReenterTransition">@transition/def_transition</item>
	
	<item name="android:windowSharedElementEnterTransition">@transition/def_transition</item>
	<item name="android:windowSharedElementReturnTransition">@transition/def_transition</item>
</style>

此处也可以直接使用系统默认自带的转换效果，如果这么做，则下一步 将转换效果定义为XML资源 可省略

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
	<item name="android:windowSharedElementExitTransition">@android:transition/move</item>
	<item name="android:windowSharedElementReenterTransition">@android:transition/move</item>

	<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
	<item name="android:windowSharedElementReturnTransition">@android:transition/move</item>
</style>

将转换效果定义为XML资源（可选）

transition-v21/def_transition.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds/>
    <changeTransform/>
    <changeClipBounds/>
    <changeImageTransform/>
</transitionSet>

changeBounds - 为目标视图的布局边界的变化添加动画。
changeClipBounds - 为目标视图的裁剪边界的变化添加动画。
changeTransform - 为目标视图的缩放与旋转变化添加动画。
changeImageTransform - 为目标图像的大小与缩放变化添加动画。

详细文档可参考 Transition类或具体某一属性的API文档。

为共享元素指定transitionName

利用 android:transitionName 属性对两个布局中的共享元素指定一个通用名称：

layout/activity_main.xml

<ImageView
    android:id="@+id/iv_square_blue"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/circle_blue"
    android:transitionName="@string/transition_name_square_blue"/>

<TextView
    android:id="@+id/tv_element_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/activity_main_shared_elements"
    android:transitionName="@string/transition_name_element_title"/>

activity_shared_elements.xml

<ImageView
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:src="@drawable/circle_blue"
    android:transitionName="@string/transition_name_square_blue"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/activity_main_shared_elements"
    android:transitionName="@string/transition_name_element_title"/>

要点：共享元素尽量设置固定值或wrap_content，否则在界面过渡的开始、结束位置容易出现闪屏。

分析原因可能为：由于元素的居中等显示属性的不同导致，如设置文本居中显示，则元素从起始位置开始移动，到达结束位置时，先移动到结束时的居中位置，然后瞬间变到结束位置，如果这时候两个位置不一致，会造成闪屏。

使用 makeSceneTransitionAnimation() 方法

MainActivity.java

View ivSquareBlue = findViewById(R.id.iv_square_blue);
String squareBlueTransitionName = getString(R.string.transition_name_square_blue);

// only one shared elements
ActivityOptionsCompat activityOptionsCompat = 
        ActivityOptionsCompat.makeSceneTransitionAnimation(this, ivSquareBlue, squareBlueTransitionName);
startActivity(intent, activityOptionsCompat.toBundle());

如果有多个共享元素，则使用以下方法：

View ivSquareBlue = findViewById(R.id.iv_square_blue);
String squareBlueTransitionName = getString(R.string.transition_name_square_blue);

View tvElementTitle = findViewById(R.id.tv_element_title);
String elementTitleTransitionName = getString(R.string.transition_name_element_title);

// multiple shared elements
ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this,
        Pair.create(ivSquareBlue, squareBlueTransitionName),
        Pair.create(tvElementTitle, elementTitleTransitionName));

startActivity(intent, activityOptionsCompat.toBundle());

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.