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

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

基本概念:

  1. Scene - 定义页面当前 UI 状态信息,
  2. Transition - 定义界面之间切换的动画信息,根据两个 Scene 的区别创建一个 Animator。默认用 AutoTransition,作用是先隐藏对象变透明,然后移动指定对象。
  3. 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

未完,更详细的见 Android Transition Framework详解---超炫的动画框架

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏项勇

笔记20 | 学习整理开源APP(BaseAnimation)程序源码“中的通讯录效果(一)

17950
来自专栏Jack的Android之旅

淘宝开源库VLayout实践

最近淘宝出了vlayout,刚开始看淘宝的文档的时候还是有点懵,后来自己也总结规划了一下,写了一个比较好看的demo,顺便在这里总结一下。

25220
来自专栏Android点滴积累

Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)

Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 c...

37570
来自专栏青蛙要fly的专栏

项目需求讨论-自定义滚轮

大家好,这次又是到了实际的项目需求讨论时间,我的一些文章下面,有时候有人评论,求源码,求Demo,我的主张是仔细看文章,自己理解了再写一遍,会懂得更多。大部分人...

11720
来自专栏lzj_learn_note

Android TextView实现查看全部和收起功能

在工作遇到上图所示的一个小需求,将“查看全部”的提示连在原文的后面,使用一个textview显示。实现该功能大致步骤:

1.3K70
来自专栏developerHaoz 的安卓之旅

Android 带你撸一个好玩的 DoodleView(涂鸦)

可以看到这个这个自定义 View 的功能还是很丰富的,无论是设置画笔的形状、颜色、粗细,还是进行重置和保存,该有的 API,基本都已经实现了。有需要的读者直接 ...

12130
来自专栏Android知识点总结

2-VIII--ViewPager滑动监听与自定义滑动特效

14410
来自专栏Sorrower的专栏

Android绘制(一):来用shape绘出想要的图形吧!

24440
来自专栏郭霖

Android实现图片滚动控件,含页签功能

首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机。 如果你...

353100
来自专栏拂晓风起

Stage3d AGAL GPU处理照片 旧照片效果 sepia || pixelbender

12430

扫码关注云+社区

领取腾讯云代金券