Android Tint着色与帧动画结合

• 需求

最近遇到一个需求:

要求根据后台接口给的色值 显示不同色值的帧动画(UI给了三张透明色的图)

正常的帧动画 是配置在xml里三张静态图片 然后加载一下就完事了
现有的静态图片是透明的 还没有填充颜色

•  Tint着色

 val drawableVoice = DrawableCompat.wrap(ContextCompat.getDrawable(mContext, R.drawable.default_ic_play3)!!)
 DrawableCompat.setTint(drawableVoice !!, Color.parseColor(mData!![positon].voiceRgb))

1.由于是一个由三张图片组成的序列帧, 那么需要分别对三张资源目录下的图片进行着色.

2.着色后得到的是3个Drawable对象 , 那么剩下的事情就是要把它们关联起来,形成一个帧动画展示出来就行了

• 帧动画

通常帧动画的实现步骤是这样的 :

利用xml文件的形式实现：
    （1）找一些图片放到drawable文件夹下
    （2）在drawable文件夹下通过xml文件生成动画 创建的就是一个animation_list的一个xml文件
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >//设置是否循环播放，默认的是循环播放，false为只播放一次
    <item
        android:drawable="@drawable/img1"
        android:duration="50"/>
    <item
        android:drawable="@drawable/img2"
        android:duration="50"/>
    <item
        android:drawable="@drawable/img3"
        android:duration="50"/>
</animation-list>
    （3）找到咱们写的那个动画xml
    （4）通过imageView设置一个背景图
    （5）通过动画对象的start(),stop()方法来开启或者是停止动画。

示例代码如下:

        iv_frame = (ImageView) findViewById(R.id.iv_frame);
        // 通过逐帧动画的资源文件获得AnimationDrawable示例
        frameAnim=(AnimationDrawable) getResources().getDrawable(R.drawable.bullet_anim);
        // 把AnimationDrawable设置为ImageView的背景
        iv_frame.setBackgroundDrawable(frameAnim);
　　　　　//开启动画
　　　　　//frameAnim.start()

　　　　　//停止动画
　　　　　//frameAnim.stop()

很明显 , 这种方式无法与代码中的Drawable对象关联起来 , 那么下面这种方式可以很好的帮到我们 :

利用代码的形式实现：
    （1）创建图片动画的对象
    （2）一帧一帧的添加图片，并且设置了显示时间
    （3）设置是否为循环播放 默认的就是只播放一次
    （4）开启动画，或者停止动画

示例代码如下:

　　　　 frameAnim1 = AnimationDrawable()
        //声音图标着色
        val drawableVoice11 = DrawableCompat.wrap(ContextCompat.getDrawable(container.context, R.drawable.default_ic_play1)!!)
        DrawableCompat.setTint(drawableVoice11, Color.parseColor(themeData!![positon].voices[0].voiceRgb))

        val drawableVoice12 = DrawableCompat.wrap(ContextCompat.getDrawable(container.context, R.drawable.default_ic_play2)!!)
        DrawableCompat.setTint(drawableVoice12, Color.parseColor(themeData!![positon].voices[0].voiceRgb))

        val drawableVoice13 = DrawableCompat.wrap(ContextCompat.getDrawable(container.context, R.drawable.default_ic_play3)!!)
        DrawableCompat.setTint(drawableVoice13!!, Color.parseColor(themeData!![positon].voices[0].voiceRgb))
        frameAnim1?.addFrame(drawableVoice11, 200)
        frameAnim1?.addFrame(drawableVoice12, 200)
        frameAnim1?.addFrame(drawableVoice13, 200)
　　　　　//设置循环播放(默认只播放一次)
        frameAnim1?.isOneShot = false
        voice1.setImageDrawable(frameAnim1)
        //开启动画
        //frameAnim1?.start()

        //停止动画
        //frameAnim1?.stop()

帧动画相关

有时候,我们需要帧动画停止时正好处在指定的那一帧 , 下面给出一种有效的方法:

if (frameAnim1 != null && frameAnim1!!.isRunning) {
                frameAnim1!!.selectDrawable(2)
                frameAnim1!!.stop()
}

AnimationDrawable#selectDrawable(int index)方法可以指定选中index处的帧图 , 然后调用stop方法就可以停留在此帧处, 并结束动画

•  小结

适当地使用Tint,可以有效的减少图片资源在apk体积的占用 , 并且给UI设计师节约了一些时间 , 最关键的还是当后台数据支持自动配置或者是数据量更改时 , 客户端依然能够支持自动着色填充并显示 , 无需修改客户端的代码.