Android 动画总结(9) - 过渡动画
前面已经介绍过一部分 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
transition2.gif
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.04.01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录