Android 动画总结(9) - 过渡动画

三流之路

发布于 2018-09-11 16:10:19

2.5K0

发布于 2018-09-11 16:10:19

文章被收录于专栏：三流程序员的挣扎

前面已经介绍过一部分 Activity 之间的过渡动画。现在讲的不是 Activity 转场，而是同一个页面的 View 之间的过渡。

基本概念：

Scene - 定义页面当前 UI 状态信息，
Transition - 定义界面之间切换的动画信息，根据两个 Scene 的区别创建一个 Animator。默认用 AutoTransition，作用是先隐藏对象变透明，然后移动指定对象。
TransitionManager - Scene 切换的控制器

TransitionManager.go()

要创建两个布局，分别是动画前的布局和动画后的布局。两个布局文件的根布局要有相同的 android:id 值。

layout_scene1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/transition_root"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TransitionActivity"
    android:padding="10dp">

    <ImageView
        android:layout_width="300dp"
        android:layout_height="150dp"
        android:background="@drawable/timg"/>

    <TextView
        android:layout_width="300dp"
        android:layout_height="80dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="@android:color/black"
        android:text="君子之才华玉蕴珠藏\n不可使人易知"
        android:textColor="@android:color/white"
        android:textSize="24sp"
        android:gravity="center"/>

</RelativeLayout>

layout_scene2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/transition_root"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TransitionActivity"
    android:padding="10dp"
    android:gravity="center_horizontal">

    <Button
        android:id="@+id/btn"
        android:text="切换"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Activity 的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TransitionActivity"
    android:padding="10dp"
    android:orientation="vertical"
    android:gravity="center_horizontal">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="过渡动画"/>

    <include
        layout="@layout/layout_scene1" />

</LinearLayout>

当然两个 Scene 也可以不要 id，Activity 布局的 include 用一个 id 就可以了。

private lateinit var scene1: Scene
private lateinit var scene2: Scene
private var isCurrentAtScene1: Boolean = true
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_transition)

    scene1 = Scene.getSceneForLayout(transition_root, R.layout.layout_scene1, ctx)
    scene2 = Scene.getSceneForLayout(transition_root, R.layout.layout_scene2, ctx)

    btn1.onClick {
        val toScene = if (isCurrentAtScene1) scene2 else scene1
        TransitionManager.go(toScene, Slide())
        isCurrentAtScene1 = !isCurrentAtScene1
    }
}

TransitionManager.go(toScene, Slide())，第二个参数是 Transition 是动画效果，如果不传第二个参数就是默认的淡入淡出动画。当然也可以通过 xml 创建 transition 效果。

transition1.gif

TransitionManager.beginDelayedTransition()

上一种方式需要创建多个 xml 布局文件，这种方式是不需要创建布局，而是直接修改代码。调用此方法后，它会在监听到 sceneRoot 的视图层级结构发生的变化时，使用传入的 transition 实现过渡动画。

TransitionManager.beginDelayedTransition(transition_root, Explode())

if (isCurrentAtScene1) {
    // 变化当前页面的 View
    tv.text = "质本洁来还洁去\n强于污淖陷渠沟"
    tv.backgroundColor = Color.BLUE
    image.visibility = View.GONE
} else {
    // 变化当前页面的 View
    tv.text = "君子之才华玉蕴珠藏\n不可使人易知"
    tv.backgroundColor = Color.BLACK
    image.visibility = View.VISIBLE
}
isCurrentAtScene1 = !isCurrentAtScene1