使用过渡动画化布局更改

尝试 Compose 方法
Jetpack Compose 是 Android 推荐的 UI 工具包。了解如何在 Compose 中使用动画。

Android 的转换框架通过提供起始布局和结束布局,让您能够为 UI 中的所有类型的运动设置动画。您可以选择所需的动画类型(例如淡出或淡入视图,或更改视图大小),转换框架将确定如何从起始布局动画到结束布局。

转换框架包含以下功能

  • 组级动画:将动画效果应用于视图层次结构中的所有视图。
  • 内置动画:对淡出或移动等常见效果使用预定义动画。
  • 资源文件支持:从布局资源文件加载视图层次结构和内置动画。
  • 生命周期回调:接收提供对动画和层次结构更改过程控制的回调。

有关在布局更改之间设置动画的示例代码,请参阅 BasicTransition

在两个布局之间设置动画的基本过程如下

  1. 为起始布局和结束布局创建一个 Scene 对象。但是,起始布局的场景通常会根据当前布局自动确定。
  2. 创建一个 Transition 对象来定义所需的动画类型。
  3. 调用 TransitionManager.go(),系统将运行动画以交换布局。

图 1 中的图表说明了布局、场景、转换和最终动画之间的关系。

图 1. 转换框架如何创建动画的基本说明。

创建场景

场景存储视图层次结构的状态,包括其所有视图及其属性值。转换框架可以在起始场景和结束场景之间运行动画。

您可以从布局资源文件或代码中的视图组创建场景。但是,转换的起始场景通常会根据当前 UI 自动确定。

场景还可以定义在进行场景更改时运行的自身操作。此功能对于在转换到场景后清理视图设置很有用。

从布局资源创建场景

您可以直接从布局资源文件创建 Scene 实例。当文件中的视图层次结构大部分是静态的时,使用此技术。生成的场景表示您创建 Scene 实例时的视图层次结构状态。如果更改了视图层次结构,请重新创建场景。框架从文件中的整个视图层次结构创建场景。您不能从布局文件的一部分创建场景。

要从布局资源文件创建 Scene 实例,请从布局中检索场景根作为 ViewGroup。然后,使用场景根和包含场景视图层次结构的布局文件的资源 ID,调用 Scene.getSceneForLayout() 函数。

定义场景的布局

本节其余部分中的代码片段演示了如何使用相同的场景根元素创建两个不同的场景。这些代码片段还演示了您可以在不暗示它们相互关联的情况下加载多个不相关的 Scene 对象。

示例包含以下布局定义

  • 活动的`主布局`,其中包含一个文本标签和一个子 FrameLayout
  • 第一个场景的 ConstraintLayout,其中包含两个文本字段。
  • 第二个场景的 ConstraintLayout,其中包含相同的两个文本字段,但顺序不同。

示例的设计目的是使所有动画都在活动主布局的子布局内发生。主布局中的文本标签保持静态。

活动的`主布局`定义如下

res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/master_layout">
    <TextView
        android:id="@+id/title"
        ...
        android:text="Title"/>
    <FrameLayout
        android:id="@+id/scene_root">
        <include layout="@layout/a_scene" />
    </FrameLayout>
</LinearLayout>

此布局定义包含一个文本字段和一个用于场景根的子 FrameLayout。第一个场景的布局包含在`主布局`文件中。这使应用程序能够将其作为初始用户界面的一部分进行显示,并将其加载到场景中,因为框架只能将整个布局文件加载到场景中。

第一个场景的布局定义如下

res/layout/a_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    
</androidx.constraintlayout.widget.ConstraintLayout>

第二个场景的布局包含相同的两个文本字段(具有相同的 ID),但放置顺序不同。其定义如下

res/layout/another_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    
</androidx.constraintlayout.widget.ConstraintLayout>

从布局生成场景

创建完两个约束布局的定义后,您可以为它们中的每一个获取一个场景。这使您能够在两种 UI 配置之间进行转换。要获取场景,您需要一个对场景根的引用和布局资源 ID。

以下代码片段展示了如何获取对场景根的引用,以及如何从布局文件创建两个 Scene 对象

Kotlin

val sceneRoot: ViewGroup = findViewById(R.id.scene_root)
val aScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this)
val anotherScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this)

Java

Scene aScene;
Scene anotherScene;

// Create the scene root for the scenes in this app.
sceneRoot = (ViewGroup) findViewById(R.id.scene_root);

// Create the scenes.
aScene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this);
anotherScene =
    Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this);

现在,应用程序中有两个基于视图层次结构的 Scene 对象。两个场景都使用由 res/layout/activity_main.xml 中的 FrameLayout 元素定义的场景根。

在代码中创建场景

您也可以从代码中的 ViewGroup 对象创建 Scene 实例。当您直接在代码中修改视图层次结构或动态生成视图层次结构时,使用此技术。

要从代码中的视图层次结构创建场景,请使用 Scene(sceneRoot, viewHierarchy) 构造函数。调用此构造函数等效于调用 Scene.getSceneForLayout() 函数时,您已膨胀了布局文件。

以下代码片段演示了如何在代码中从场景根元素和场景的视图层次结构创建 Scene 实例

Kotlin

val sceneRoot = someLayoutElement as ViewGroup
val viewHierarchy = someOtherLayoutElement as ViewGroup
val scene: Scene = Scene(sceneRoot, viewHierarchy)

Java

Scene mScene;

// Obtain the scene root element.
sceneRoot = (ViewGroup) someLayoutElement;

// Obtain the view hierarchy to add as a child of
// the scene root when this scene is entered.
viewHierarchy = (ViewGroup) someOtherLayoutElement;

// Create a scene.
mScene = new Scene(sceneRoot, mViewHierarchy);

创建场景操作

框架允许您定义自定义场景操作,系统在进入或退出场景时运行这些操作。在许多情况下,定义自定义场景操作是不必要的,因为框架会自动对场景之间的更改设置动画。

场景操作对于处理以下情况很有用

  • 要对不在同一个层次结构中的视图进行动画。您可以使用退出和进入场景操作对起始场景和结束场景的视图进行动画。
  • 要对转换框架无法自动设置动画的视图进行动画,例如 ListView 对象。有关详细信息,请参阅关于 限制 的部分。

要提供自定义场景操作,请将操作定义为 Runnable 对象,并将它们传递给 Scene.setExitAction()Scene.setEnterAction() 函数。框架在运行转换动画之前调用起始场景的 setExitAction() 函数,并在运行转换动画之后调用结束场景的 setEnterAction() 函数。

应用转换

过渡框架通过一个 Transition 对象表示场景之间的动画风格。您可以使用内置子类(例如 AutoTransitionFade)来实例化一个 Transition,或者 定义您自己的过渡。然后,您可以通过将结束 SceneTransition 传递给 TransitionManager.go() 来运行场景之间的动画。

过渡生命周期类似于活动生命周期,它表示框架在动画开始和完成之间监控的过渡状态。在重要的生命周期状态下,框架会调用您可以实现的回调函数,以便在过渡的不同阶段调整您的用户界面。

创建过渡

上一节介绍了如何创建表示不同视图层次结构状态的场景。在定义好要切换的开始场景和结束场景后,创建一个 Transition 对象,该对象定义了一个动画。框架允许您在资源文件中指定内置过渡并在代码中加载它,或者直接在代码中创建内置过渡的实例。

表 1. 内置过渡类型。

标签 效果
AutoTransition <autoTransition/> 默认过渡。按顺序淡出、移动和调整大小,以及淡入视图。
ChangeBounds <changeBounds/> 移动和调整视图大小。
ChangeClipBounds <changeClipBounds/> 在场景更改之前和之后捕获 View.getClipBounds(),并在过渡期间对这些更改进行动画处理。
ChangeImageTransform <changeImageTransform/> 在场景更改之前和之后捕获 ImageView 的矩阵,并在过渡期间对其进行动画处理。
ChangeScroll <changeScroll/> 在场景更改之前和之后捕获目标的滚动属性,并对任何更改进行动画处理。
ChangeTransform <changeTransform/> 在场景更改之前和之后捕获视图的缩放比例和旋转,并在过渡期间对这些更改进行动画处理。
Explode <explode/> 跟踪开始场景和结束场景中目标视图的可见性变化,并将视图从场景的边缘移入或移出。
Fade <fade/> fade_in 淡入视图。
fade_out 淡出视图。
fade_in_out(默认)执行 fade_out,然后执行 fade_in
Slide <slide/> 跟踪开始场景和结束场景中目标视图的可见性变化,并将视图从场景的某个边缘移入或移出。

从资源文件创建过渡实例

此技术允许您修改过渡定义,而无需更改活动的代码。此技术还有助于将复杂的过渡定义与应用程序代码分离,如有关 指定多个过渡 的部分所示。

要在资源文件中指定内置过渡,请按照以下步骤操作

  • res/transition/ 目录添加到您的项目中。
  • 在此目录中创建一个新的 XML 资源文件。
  • 添加一个用于内置过渡之一的 XML 节点。

例如,以下资源文件指定了 Fade 过渡

res/transition/fade_transition.xml

<fade xmlns:android="http://schemas.android.com/apk/res/android" />

以下代码片段演示了如何在活动中从资源文件加载一个 Transition 实例

Kotlin

var fadeTransition: Transition =
    TransitionInflater.from(this)
                      .inflateTransition(R.transition.fade_transition)

Java

Transition fadeTransition =
        TransitionInflater.from(this).
        inflateTransition(R.transition.fade_transition);

在代码中创建过渡实例

如果您在代码中修改用户界面,以及创建参数很少或没有参数的简单内置过渡实例,此技术非常有用。

要创建内置过渡的实例,请调用 Transition 类子类中的公共构造函数之一。例如,以下代码片段创建了 Fade 过渡的实例

Kotlin

var fadeTransition: Transition = Fade()

Java

Transition fadeTransition = new Fade();

应用转换

您通常会应用过渡来响应事件(例如用户操作)在不同的视图层次结构之间进行切换。例如,考虑一个搜索应用程序:当用户输入搜索词并点击搜索按钮时,应用程序会切换到一个场景,该场景表示结果布局,同时应用一个过渡,该过渡会淡出搜索按钮并淡入搜索结果。

要在活动中响应事件应用过渡时进行场景切换,请使用结束场景和要用于动画的过渡实例调用 TransitionManager.go() 类函数,如以下代码片段所示

Kotlin

TransitionManager.go(endingScene, fadeTransition)

Java

TransitionManager.go(endingScene, fadeTransition);

框架使用结束场景中的视图层次结构更改场景根节点内的视图层次结构,同时运行由过渡实例指定的动画。开始场景是上次过渡的结束场景。如果没有之前的过渡,则会根据用户界面的当前状态自动确定开始场景。

如果您没有指定过渡实例,则过渡管理器可以应用一个自动过渡,该过渡在大多数情况下都能起到合理的作用。有关详细信息,请参阅 TransitionManager 类的 API 参考。

选择特定的目标视图

默认情况下,框架会将过渡应用于开始场景和结束场景中的所有视图。在某些情况下,您可能只想将动画应用于场景中的一部分视图。框架允许您选择要进行动画处理的特定视图。例如,框架不支持对 ListView 对象的更改进行动画处理,因此请不要尝试在过渡期间对其进行动画处理。

过渡进行动画处理的每个视图都称为目标。您只能选择与场景关联的视图层次结构的一部分的目标。

要从目标列表中删除一个或多个视图,请在启动过渡之前调用 removeTarget() 方法。要仅将您指定的视图添加到目标列表中,请调用 addTarget() 函数。有关详细信息,请参阅 Transition 类的 API 参考。

指定多个过渡

要从动画中获得最大的影响,请将其与场景之间发生的更改类型匹配。例如,如果您要在场景之间删除一些视图并添加其他视图,则淡出或淡入动画会提供一个明显的指示,表明一些视图不再可用。如果您将视图移动到屏幕上的不同位置,最好对移动进行动画处理,以便用户注意到视图的新位置。

您不必只选择一个动画,因为过渡框架允许您在过渡集中组合动画效果,该过渡集包含一组单独的内置或自定义过渡。

要从过渡集合中定义一个 XML 过渡集,请在 res/transitions/ 目录中创建一个资源文件,并在 TransitionSet 元素下列出过渡。例如,以下代码片段演示了如何指定一个过渡集,该过渡集具有与 AutoTransition 类相同的行为

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="sequential">
    <fade android:fadingMode="fade_out" />
    <changeBounds />
    <fade android:fadingMode="fade_in" />
</transitionSet>

要在代码中将过渡集加载到 TransitionSet 对象中,请在活动中调用 TransitionInflater.from() 函数。 TransitionSet 类继承自 Transition 类,因此您可以像使用任何其他 Transition 实例一样使用它和过渡管理器。

应用不带场景的过渡

更改视图层次结构不是修改用户界面的唯一方法。您还可以通过在当前层次结构中添加、修改和删除子视图来进行更改。

例如,您可以使用单个布局实现搜索交互。从显示搜索条目字段和搜索图标的布局开始。要将用户界面更改为显示结果,请在用户点击搜索按钮时通过调用 ViewGroup.removeView() 函数删除搜索按钮,并通过调用 ViewGroup.addView() 函数添加搜索结果。

如果另一个方法是使用两个几乎相同的层次结构,那么您可以使用这种方法。与其为用户界面的微小差异创建和维护两个单独的布局文件,不如使用一个布局文件,其中包含一个视图层次结构,您可以在代码中修改该层次结构。

如果您以这种方式在当前视图层次结构中进行更改,则不需要创建场景。相反,您可以使用延迟过渡来创建和应用视图层次结构的两种状态之间的过渡。过渡框架的此功能从当前视图层次结构状态开始,记录您对其视图所做的更改,并在系统重新绘制用户界面时应用一个动画处理这些更改的过渡。

要在单个视图层次结构中创建延迟过渡,请按照以下步骤操作

  1. 当触发过渡的事件发生时,请调用 TransitionManager.beginDelayedTransition() 函数,并提供要更改的所有视图的父视图以及要使用的过渡。框架会存储子视图的当前状态及其属性值。
  2. 根据您的用例对子视图进行必要的更改。框架会记录您对子视图及其属性所做的更改。
  3. 当系统根据您的更改重新绘制用户界面时,框架会对从原始状态到新状态的更改进行动画处理。

以下示例演示了如何使用延迟过渡对向视图层次结构添加文本视图进行动画处理。第一个代码片段显示了布局定义文件

res/layout/activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <EditText
        android:id="@+id/inputText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

下一个代码片段显示了对添加文本视图进行动画处理的代码

MainActivity

Kotlin

setContentView(R.layout.activity_main)
val labelText = TextView(this).apply {
    text = "Label"
    id = R.id.text
}
val rootView: ViewGroup = findViewById(R.id.mainLayout)
val mFade: Fade = Fade(Fade.IN)
TransitionManager.beginDelayedTransition(rootView, mFade)
rootView.addView(labelText)

Java

private TextView labelText;
private Fade mFade;
private ViewGroup rootView;
...
// Load the layout.
setContentView(R.layout.activity_main);
...
// Create a new TextView and set some View properties.
labelText = new TextView(this);
labelText.setText("Label");
labelText.setId(R.id.text);

// Get the root view and create a transition.
rootView = (ViewGroup) findViewById(R.id.mainLayout);
mFade = new Fade(Fade.IN);

// Start recording changes to the view hierarchy.
TransitionManager.beginDelayedTransition(rootView, mFade);

// Add the new TextView to the view hierarchy.
rootView.addView(labelText);

// When the system redraws the screen to show this update,
// the framework animates the addition as a fade in.

定义过渡生命周期回调

过渡生命周期类似于活动生命周期。它表示框架在调用 TransitionManager.go() 函数和动画完成之间监控的过渡状态。在重要的生命周期状态下,框架会调用 TransitionListener 接口定义的回调函数。

过渡生命周期回调非常有用,例如,在场景更改期间将视图属性值从起始视图层次结构复制到结束视图层次结构。您不能简单地将值从起始视图复制到结束视图层次结构中的视图,因为结束视图层次结构直到过渡完成才会膨胀。相反,您需要将值存储在变量中,然后在框架完成过渡后将其复制到结束视图层次结构。要接收过渡完成时的通知,请在您的活动中实现 TransitionListener.onTransitionEnd() 函数。

有关更多信息,请参阅 TransitionListener 类的 API 参考。

限制

本节列出了过渡框架的一些已知限制。

  • 应用于 SurfaceView 的动画可能无法正常显示。 SurfaceView 实例从非 UI 线程更新,因此更新可能与其他视图的动画不同步。
  • 某些特定类型的过渡在应用于 TextureView 时可能无法产生预期的动画效果。
  • 扩展 AdapterView 的类(如 ListView)以与过渡框架不兼容的方式管理其子视图。如果您尝试基于 AdapterView 动画视图,设备显示可能停止响应。
  • 如果您尝试使用动画调整 TextView 的大小,文本将在对象完全调整大小之前弹到新位置。要避免此问题,请不要动画包含文本的视图的大小调整。