[Android]多层波纹扩散动画——自定义View绘制

之前整理过一些属性动画的基本操作，这一段时间的动画相关需求都安然度过了。直到这次……

一、另一种动画需求

多数交互中的动画都是让单个页面元素动起来，这种就很适合用属性动画实现。但是对于 多个元素、非页面内元素 的动画需求，就不方便用View+属性动画实现了。

举个例子，也就是这次做的：

波纹效果需要同时绘制 多个 同心圆，而且这些圆 不是页面内的元素，未触发之前不需要显示。如果用属性动画实现，至少需要在xml布局文件中添加多个ImageView画圆，效率低还不易复用。

二、WaveView分析

使用自定义View绘制动画的主要思路是这样的：

1. 分解动画成帧，考虑如何在onDraw中绘制每一帧
2. 提取出绘制所需参数，分为随时间变化和不可变两种，不可变参数可以暴露出去（setter方法／attribute设置）
3. 总结随时间变化的参数变化规律，实现时间轴
4. 按需求提供出播放，暂停，停止，重置等等方法

按照这个思路，一步步实现一下WaveView吧。

第一步： 在onDraw中画圆需要用到canvas.drawCircle方法，四个参数：圆心x、y坐标，半径和Paint。WaveView绘制的每一帧都是圆，区别是圆的半径，数量，透明度。还需要设置圆的最小半径和最大半径，以及扩散的时候两个圆的半径差。

每次绘制只需要把所有的圆画出来：

第二步： 扩散过程中随时间变化的参数只有半径和透明度。圆的数量，最小最大半径和半径差则是不可变参数。所有的都加了默认值，防止

第三步： 最艰难的一步，时间轴。我们需要一个定时触发的机制去改变mWaveList中的每一个值，还要同时修改paint的alpha值。这个变量嘛，还是越少越方便，波纹的效果是半径越大alpha越小，只要控制半径变化就可以计算出alpha。然后便是循环的问题，当波纹半径大于最大半径波纹就会消失，此时便可循环使用，再从最小半径扩散一次。

我这里的时间轴用了CountDownTimer，应该不是一种很好的选择，只是个人习惯写起来顺手了…

第四步： 最后这个就简单了，直接控制CountDownTimer的start和cancel就可以了。

三、再完善一下？

内部功能已经实现了，还要提取参数的设置方法，方便其他地方使用呀。java中需要添加setter／getter方法，用模版代码生成就好，kotlin的话直接把需要暴露的field改为public即可。

如果需要在xml布局文件中设置默认参数，还需要添加对应的attribute，现在这样已经够用了，我就不加了🤣

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.os.CountDownTimer
import android.util.AttributeSet
import android.view.View


class WaveView@JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {


    private val paint:Paint = Paint()
    public var mBgColor = Color.TRANSPARENT
    public var mWaveColor = Color.WHITE

    public var mRadiusMin = 0f
    public var mRadiusMax = 1080f
    public var mWaveInterval = 240f
    //用每次扩散半径增加的值作为速度参数
    public var speed = 10f

    private val mWaveList = ArrayList<Float>()

    private val timeline = object:CountDownTimer(300000,16){

        override fun onTick(millisUntilFinished: Long) {

            // 每个时间间隔都把正在扩散的波纹半径增加
            for (i in 0 until mWaveList.size){
                mWaveList[i] = mWaveList[i] + speed
                if (mWaveList[i] < mRadiusMin + mWaveInterval){
                    break
                }
            }

            //最外层波纹超过最大值时，重新把它添加到波纹队列末尾
            if (mWaveList[0] > mRadiusMax){
                mWaveList[0] = mRadiusMin
                val newList = transList(mWaveList)
                mWaveList.clear()
                mWaveList.addAll(newList)
            }

            invalidate()
        }

        override fun onFinish() {
            //尽量保证手动调用waveStop，就不会执行到这里
            reset()
        }
    }

    init {
        initWave(mWaveList)
        paint.color = mWaveColor
    }


    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas!!.drawColor(mBgColor)
        val centerX = canvas.width.div(2).toFloat()
        val centerY = canvas.height.div(2).toFloat()

        for (i in 0 until mWaveList.size){
            paint.alpha = calcAlpha(mWaveList[i])
            canvas.drawCircle(centerX, centerY, mWaveList[i], paint)
        }
    }

    fun wave(){
        timeline.start()
    }

    fun stopWave(){
        timeline.cancel()
    }

    fun reset(){
        timeline.cancel()
        mWaveList.clear()
        initWave(mWaveList)
    }

    private fun initWave(waveList: ArrayList<Float>){
        val waveNum = ((mRadiusMax-mRadiusMin)/mWaveInterval).toInt() + 2
        for (i in 1..waveNum){
            waveList.add(mRadiusMin)
        }
    }

    private fun transList(list: ArrayList<Float>):ArrayList<Float>{
        val newList = ArrayList<Float>()

        (1 until list.size).mapTo(newList) { list[it] }
        newList.add(list[0])
        return newList
    }

    // 通过半径计算透明度，趋势是半径越大越透明，直到看不见
    private fun calcAlpha(r:Float):Int = ((mRadiusMax - r)/ mRadiusMax * 120).toInt()
}

最终得到的就是这样的一个View啦，使用方法大概是这样的：

1. 在xml中放一个WaveView
2. findViewById之后，set基本参数
3. 在需要的时机执行wave()方法

四、后记

做成这样应该可以满足设计师dalao们的需求了，呼～

自定义View是一个涵盖内容很广泛的课题，除了完全实现一个可展示、可交互的控件，还能优化布局的绘制效率，实现迷之交互，以及这特别的动画效果，需要深入学习的内容还有很多呀。

近期在恶补Kotlin，打算进入实践了，所以写Demo的时候都用的Kotlin。但是目前的项目都是Java的，所以又翻译了一版Java的。完整代码见Github吧。

前往github

如有问题或是建议，欢迎留言评论。