Android学习笔记之Transition——Transition简单动画（1）

Transitions Framework 简介
Transition framework的基本原理就是view当前的状态被捕获在一个Scene对象中，然后用Transition对象决定Scene之间的动画。TransitionManager用于运行transition，同时维护在特定scene之间过渡时该使用什么transition的规则。

该框架帮助在布局改变的时候增加动画效果，它会在布局发生改变的时候应用一个或多个动画效果于布局中的每个控件。框架具有以下特点：

（1）分组动画：一个或多个动画会作用于每个控件
（2）基于变化的动画：动画是基于初始状态和最终状态的控件的属性值执行的
（3）内置动画：框架提供了一些预定义的动画，如淡入淡出动画
（4）支持资源文件：可以从资源文件加载布局和动画
（5）生命周期回调：定义了回调，可以更好地控制变换过程
框架由Scenes、Transitions和TransitionManager构成。关系图如下：

这里写图片描述

示例一
这里写图片描述

代码：
1 在drawable文件夹下创建4个资源文件，分别取名shape1.xml,shape2.xml,shape3.xml,shape4.xml。
shape1.xml如下：

<shape
    android:dither="true"
    android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:endColor="#66ff0000"
        android:gradientRadius="150"
        android:startColor="#ffffcc00"
        android:type="radial"
        android:useLevel="false" />

    <size
        android:height="100dp"
        android:width="100dp" />

</shape>

shape2.xml如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="oval" >

    <gradient
        android:endColor="#66ffcc00"
        android:gradientRadius="150"
        android:startColor="#ff00ff00"
        android:type="radial"
        android:useLevel="false" />

    <size
        android:height="100dp"
        android:width="100dp" />

</shape>

shape3.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="oval" >

    <gradient
        android:endColor="#6600ff00"
        android:gradientRadius="150"
        android:startColor="#ff0000ff"
        android:type="radial"
        android:useLevel="false" />

    <size
        android:height="100dp"
        android:width="100dp" />

</shape>

shape4.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="oval" >

    <gradient
        android:endColor="#660000ff"
        android:gradientRadius="150"
        android:startColor="#ffff0000"
        android:type="radial"
        android:useLevel="false" />

    <size
        android:height="100dp"
        android:width="100dp" />

</shape>

以上四个资源文件中，关于shape相关属性详解可以看看本人写的一篇博客。

2 然后是起始布局页面，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="#ff000000"
    android:id="@+id/base"
    tools:context=".MainActivity">
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:src="@drawable/shape1"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:onClick="changeScene"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:src="@drawable/shape2"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:onClick="changeScene"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:src="@drawable/shape3"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:onClick="changeScene"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn4"
        android:src="@drawable/shape4"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:onClick="changeScene"/>
</RelativeLayout>

3 然后是结束页面，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="#ff000000"
    android:id="@+id/base"
    tools:context=".MainActivity">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:src="@drawable/shape1"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:onClick="changeScene"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:src="@drawable/shape2"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:onClick="changeScene"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:src="@drawable/shape3"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:onClick="changeScene"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn4"
        android:src="@drawable/shape4"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:onClick="changeScene"/>

</RelativeLayout>

4 最后运行程序代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="#ff000000"
    android:id="@+id/base"
    tools:context=".MainActivity">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:src="@drawable/shape1"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:onClick="changeScene"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:src="@drawable/shape2"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:onClick="changeScene"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:src="@drawable/shape3"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:onClick="changeScene"/>

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn4"
        android:src="@drawable/shape4"
        android:background="#00000000"
        android:contentDescription="shape"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:onClick="changeScene"/>

</RelativeLayout>

本次文章，主要是借鉴了以下两篇博客：
Android 知识要点整理（11）—-Scenes and Transitions（场景和变换）
Android Transition框架介绍&使用

Android学习笔记之Transition——Transition简单动画（1）

Android学习笔记之Transition——Transition简单动画（1）

猜你喜欢