transitiondrawable ImageVIew切换动画

Posted 2020-06-08

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