使用过渡动画布局变化

尝试 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 的活动的main布局。
  • 第一个场景的ConstraintLayout,其中包含两个文本字段。
  • 第二个场景的ConstraintLayout,其中包含相同顺序不同的两个文本字段。

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

活动的main布局定义如下

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。第一个场景的布局包含在main布局文件中。这允许应用将其显示为用户界面的初始部分,并将其加载到场景中,因为框架只能将整个布局文件加载到场景中。

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

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.

定义过渡生命周期回调

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

例如,过渡生命周期回调可用于在场景更改期间将视图属性值从起始视图层次结构复制到结束视图层次结构。您不能简单地将其起始视图中的值复制到结束视图层次结构中的视图,因为直到过渡完成才会加载结束视图层次结构。相反,您需要将该值存储在一个变量中,然后在框架完成过渡后将其复制到结束视图层次结构中。要获得过渡完成的通知,请在您的 Activity 中实现 TransitionListener.onTransitionEnd() 函数。

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

限制

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

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