如何使用TransitionDrawable实现背景切换渐变效果

使用TransitionDrawable为UI的背景切换添加交错渐变的过渡效果
上一篇介绍了如何使用RippleDrawable为UI添加点击水波纹效果
这一篇将作为介绍Drawable的第二篇，讲解如何使用TransitionDrawable来为UI背景切换设置交错渐变的过度效果。当你在加载显示一个ImageView或者更改一个UI的背景时，不希望切换的太过突然，希望添加一些类似于过渡效果的话，那么使用TransitionDrawable绝对是一个比较不错的选择，最起码比起在UI加载后强制使用一个动画要好一点，而且在代码上实现也更加简单。好了，废话不多说了，开始直接上代码。
首先在drawable目录下新建一个文件transition_drawable.xml
代码如下：

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

</transition>

这个用作TextView背景切换时从灰色渐变过度到红色。
主布局文件：
activity_main.xml:

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:weightSum="1"
    tools:context="com.example.transitiondrawable.MainActivity">

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal|center_vertical"
        android:text="Hello World!" />

    <ImageView
        android:id="@+id/iv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="40dp"
        android:layout_marginTop="30dp"
        android:contentDescription="null" />

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical|center_horizontal"
        android:text="@string/set_image" />
</LinearLayout>

这里的ImageView所使用的TransitionDrawable将使用java代码生成，通过点击button可以切换ImageView中显示的图片。
Activity代码如下：

package com.example.transitiondrawable;

import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.TransitionDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private TextView tv;
    private ImageView iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv = (TextView) findViewById(R.id.tv);
        TransitionDrawable transitionDrawable = (TransitionDrawable) getResources().getDrawable(R.drawable.transition_drawable, null);
        tv.setBackground(transitionDrawable);
        transitionDrawable.startTransition(3000);

        Resources res = getResources();
        TransitionDrawable imageTransitionDrawable = new TransitionDrawable(new Drawable[]{res.getDrawable(R.drawable.third,null),
                res.getDrawable(R.drawable.fourth,null)});
        iv = (ImageView)findViewById(R.id.iv);
        iv.setImageDrawable(imageTransitionDrawable);
        imageTransitionDrawable.startTransition(3000);

        Drawable a = iv.getDrawable();
        findViewById(R.id.btn).setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                if(iv.getDrawable() instanceof TransitionDrawable){
                    TransitionDrawable transitionDrawable = (TransitionDrawable) iv.getDrawable();
                    final Drawable first = transitionDrawable.getDrawable(1);
                    TransitionDrawable btnTransitionDrawable = new TransitionDrawable(new Drawable[]{first,getResources().getDrawable(R.drawable.fifth)});
                    iv.setImageDrawable(btnTransitionDrawable);
                    btnTransitionDrawable.startTransition(5000);
                }else{
                    final Drawable first = iv.getDrawable();
                    TransitionDrawable btnTransitionDrawable = new TransitionDrawable(new Drawable[]{first,getResources().getDrawable(R.drawable.fifth)});
                    iv.setImageDrawable(btnTransitionDrawable);
                    btnTransitionDrawable.startTransition(5000);
                }
            }
        });
    }
}

代码也很简单，我写的可能有点乱，通过set方法将TransitionDrawable设置为背景或者要显示的图画，然后调用TransitionDrawable中的startTransition方法，传入的参数为渐变过程的时间。
效果图如下：

基本上就是这些东西，涉及到东西不多，关于TransitionDrawable方面的东西就讲到这里，有兴趣的小伙伴可以追一下系统源码，看一下是如何实现的。
这是我的微信公众号，如果可以的话，希望您可以关注一下，这将是对我最大的鼓励，谢谢！！

源码已经上传至GitHub中，可以直接git clone获取源码！！！
源码地址，里面除了本篇blog的源码，还有其他的源码哦，不要弄错了！！！