Overview

从Drawable的类继承图上可以看到TransitionDrawable是LayerDrawable的子类,但是不像LayerDrawable可以有多层drawable,TransitionDrawable只能管理两层drawable,并且提供了一个透明度变化的动画,可以控制从一层drawable过度到另外一层drawable的渐变动画效果。

在xml文件中使用<transition>作为根节点来定义TransitionDrawable,通过item子节点定义两层使用的drawable。

创建和使用

TransitionDrawable同样可以使用xml文件或直接在代码中创建,但推荐使用xml文件的方式,除非你有特别的需求,需要在代码中设置或修改TransitionDrawable的属性等。 语法:

<?xml version="1.0" encoding="utf-8"?>
<transition
xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</transition>

元素: <transition> 必须的。 必须作为根节点,包含一个或多个<item>元素。我们上面介绍了TransitionDrawable只能管理两层drawable,这里又说一个或多个是否矛盾了。在<transition>节点下确实可以有多个<item>元素,但是只会显示前面的两个<item>,后面添加的<item>虽然不会出错,但不会显示。 <item> 定义一个TransitionDrawable中所使用的一个drawable。必须是子节点。也可以接受子节点。item的属性如下:

  • android:id 资源ID。drawable资源的唯一标识。
  • android:drawable Drawable 资源。 必须的。引用一个Drawable资源。
  • android:top Integer。 与顶部的距离
  • android:right Integer。与右边的距离
  • android:bottom Integer。 与下边的距离
  • android:left Integer。与左边的距离

使用举例: 新建一个xml文件保存为:res/drawable/transition.xml:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/onboarding_slide1"/>
    <item android:drawable="@drawable/onboarding_slide2"/>
</transition>

在layout中使用:

 <ImageView
       android:id="@+id/imageview"
       android:scaleType="centerCrop"
       android:src="@drawable/transition"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>

如下的代码会执行从第一个item到第二个item 5秒的过渡。

ImageView mImageView = (ImageView) findViewById(R.id.imageview);
TransitionDrawable trans = (TransitionDrawable) mImageView.getDrawable();
trans.startTransition(5000);

可重复渐变的TransitionDrawable

TransitionDrawable一般只能设置两张背景图片,而且动画效果不能重复。但是我们可以通过Handler+Thread实现TransitionDrawable循环渐变的效果。

public class MainActivity extends Activity {

	private ImageView mImageView;
	private TransitionDrawable trans;
	private int count;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setTheme(android.R.style.Theme_NoTitleBar_Fullscreen);

		setContentView(R.layout.activity_main);

		mImageView = (ImageView) findViewById(R.id.imageview);
		trans = (TransitionDrawable) mImageView.getDrawable();
		mHandler.post(splashThread);
	}

	Handler mHandler = new Handler(new Handler.Callback() {
		@Override
		public boolean handleMessage(Message msg) {

			if (msg.arg1 % 2 == 0) {
				trans.reverseTransition(msg.arg2);  // 反转动画,即从第二张过渡到第一张
			}else{
				trans.startTransition(msg.arg2); // 再从第一次过渡到第二张
			}
			mHandler.postDelayed(splashThread, msg.arg2);
			return false;
		}
	});

	Thread splashThread = new Thread(new Runnable() {
		@Override
		public void run() {
			Message msg = mHandler.obtainMessage();
			count++;
			msg.arg1 = count;
			msg.arg2 = 8000;  // 过渡时间为8秒
			mHandler.sendMessage(msg);
		}
	});

}

效果如下: