transitiondrawable ImageVIew切换动画

一个TransitionDrawable是一个特殊的Drawable对象，可以实现两个drawable资源之间淡入淡出的效果。

<transition>节点下的每个<item>代表一个drawable资源。只能有两个<item>。先前转换调用startTransition()。向后，调用 reverseTransition()。

文件位于：

res/drawable/filename.xml
文件名作为资源ID

编译资源类型：

指向 TransitionDrawable的指针

资源引用：

In Java: R.drawable.filename
In XML: @[package:]drawable/filename

语法：

<?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>元素。

属性：

xmlns:android

字符串类型，必须的。定义XML文件的命名空间，必须是 "http://schemas.android.com/apk/res/android".

<item>

定义一个TransitionDrawable中所使用的一个drawable。必须是<transition>子节点。可以接受<bitmap>子节点。

属性：

android:drawable

Drawable 资源。 必须的。引用一个Drawable资源。

android:id

资源ID。drawable资源的唯一标识。使用"@+id/name"方式来给这个item定义一个新的资源ID。可以使用View.findViewById()或者 Activity.findViewById()等方式检索和修改这个item。

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/on" />
    <item android:drawable="@drawable/off" />
</transition>

在layout文件中使用：

<ImageButton
    android:id="@+id/button"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/transition" />

And the following code performs a 500ms transition from the first item to the second:

ImageButton button = (ImageButton) findViewById(R.id.button);
TransitionDrawable drawable = (TransitionDrawable) button.getDrawable();
drawable.startTransition(500);

参考

• TransitionDrawable

下面是实例：

1、xml方式使用

transition.xml：

[java] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <transition xmlns:android="http://schemas.android.com/apk/res/android" >
3. <item android:drawable="@drawable/image01"/>
4. <item android:drawable="@drawable/image02"/>
5. </transition>

在layout中使用：

[java] view plain copy

1. <ImageView
2. android:id="@+id/imgView"
3. android:src="@drawable/transition"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content"/>

在代码中控制：

[java] view plain copy

1. ImageView imageView = (ImageView) findViewById(R.id.imgView);
2. TransitionDrawable transitionDrawable = (TransitionDrawable) imageView.getDrawable();
3. transitionDrawable.startTransition(3000);

下面是一个实例：实现多张图片循环的淡入淡出的效果。

[java] view plain copy

1. package com.example.drawabletest;
2. import android.app.Activity;
3. import android.graphics.Bitmap;
4. import android.graphics.BitmapFactory;
5. import android.graphics.drawable.BitmapDrawable;
6. import android.graphics.drawable.Drawable;
7. import android.graphics.drawable.TransitionDrawable;
8. import android.os.Bundle;
9. import android.os.Handler;
10. import android.os.Message;
11. import android.widget.ImageView;
12. public class MainActivity extends Activity {
13. private int change=0;
14. private int[] ids = new int[] { R.drawable.image1, R.drawable.image2, R.drawable.image3,
15. R.drawable.image4, R.drawable.image5 };
16. private Drawable[] drawables;
17. private ImageView imageView;
18. @Override
19. public void onCreate(Bundle savedInstanceState) {
20. super.onCreate(savedInstanceState);
21. setContentView(R.layout.activity_main);
22. imageView = (ImageView) findViewById(R.id.imgView);
23. /*获得合适的drawable资源*/
24. BitmapFactory.Options opts = new BitmapFactory.Options();
25. opts.inJustDecodeBounds = true;
26. BitmapFactory.decodeResource(getResources(), R.drawable.image1, opts);
27. opts.inSampleSize = computeSampleSize(opts, -1, 500 * 500);
28. opts.inJustDecodeBounds = false;
29. drawables=new Drawable[ids.length];
30. try {
31. for (int i = 0; i < ids.length; i++) {// for循环，加载5个drawable资源
32. Bitmap bmp = BitmapFactory.decodeResource(getResources(), ids[i], opts);
33. drawables[i] = new BitmapDrawable(bmp);
34. }
35. } catch (Exception e) {
36. e.printStackTrace();
37. }
38. //开启线程，改变transition
39. new Thread(new MyRunnable()).start();
40. }
41. //处理transition的改变
42. private Handler handler=new Handler(new Handler.Callback() {
43. public boolean handleMessage(Message msg) {
44. int duration=msg.arg1;
45. TransitionDrawable transitionDrawable=null;
46. transitionDrawable= new TransitionDrawable(new Drawable[] {
47. drawables[change%ids.length],//实现从0 1 2 3 4 5 0 1 2.。。这样的不停转变
48. drawables[(change+1)%ids.length] });
49. change++;
50. imageView.setImageDrawable(transitionDrawable);
51. transitionDrawable.startTransition(duration);
52. return false;
53. }
54. });
55. //线程，去发送消息，让transition一直改变
56. private class MyRunnable implements Runnable{
57. public void run() {
58. while (true) {
59. int duration=3000;//改变的间隔
60. Message message=handler.obtainMessage();
61. message.arg1=duration;
62. handler.sendMessage(message);
63. try {
64. Thread.sleep(duration);
65. } catch (InterruptedException e) {
66. e.printStackTrace();
67. }
68. }
69. }
70. }
71. //计算合适的图片大小
72. public static int computeSampleSize(BitmapFactory.Options options, int minSideLength,
73. int maxNumOfPixels) {
74. int initialSize = computeInitialSampleSize(options, minSideLength, maxNumOfPixels);
75. int roundedSize;
76. if (initialSize <= 8) {
77. roundedSize = 1;
78. while (roundedSize < initialSize) {
79. roundedSize <<= 1;
80. }
81. } else {
82. roundedSize = (initialSize + 7) / 8 * 8;
83. }
84. return roundedSize;
85. }
86. //计算合适的图片大小
87. private static int computeInitialSampleSize(BitmapFactory.Options options, int minSideLength,
88. int maxNumOfPixels) {
89. double w = options.outWidth;
90. double h = options.outHeight;
91. int lowerBound = (maxNumOfPixels == -1) ? 1 : (int) Math.ceil(Math.sqrt(w * h
92. / maxNumOfPixels));
93. int upperBound = (minSideLength == -1) ? 128 : (int) Math.min(
94. Math.floor(w / minSideLength), Math.floor(h / minSideLength));
95. if (upperBound < lowerBound) {
96. // return the larger one when there is no overlapping zone.
97. return lowerBound;
98. }
99. if ((maxNumOfPixels == -1) && (minSideLength == -1)) {
100. return 1;
101. } else if (minSideLength == -1) {
102. return lowerBound;
103. } else {
104. return upperBound;
105. }
106. }
107. }