在Android实现光影移动效果【流光效果】

说明

本文是在Android实现光影移动效果【流光效果】

效果如下

图1 ShimmerView

图2 ShimmerTextView

ShimmerView.kt


import android.animation.ValueAnimator
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.LinearGradient
import android.graphics.Paint
import android.graphics.Path
import android.graphics.Point
import android.graphics.RectF
import android.graphics.Shader
import android.util.AttributeSet
import android.view.View
import android.view.animation.LinearInterpolator

class ShimmerView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    private var mWidth = -1
    private var mSlope: Float = -1F
    private var mAnimMode = 0
    private var mDuration = 1600L
    private var mRepeatCount = 0
    private var mColors = intArrayOf(0x00FFFFFF, 0x5AFFFFFF, 0x5AFFFFFF, 0x00FFFFFF)
    private var mPositions = floatArrayOf(0f, 0.5f, 0.51f, 1f)
    private var mRadius = 0

    private var mPaint: Paint = Paint()
    private var mPath: Path? = null
    private var mClipPath: Path? = null

    private var mValueAnimator: ValueAnimator? = null

    init {
        attrs?.let {
            context.obtainStyledAttributes(attrs, R.styleable.ShimmerView).apply {
                try {
                    mWidth = getDimensionPixelSize(R.styleable.ShimmerView_csWidth, mWidth)
                    mSlope = getFloat(R.styleable.ShimmerView_csSlope, mSlope)
                    mRadius = getDimensionPixelSize(R.styleable.ShimmerView_csRadius, mRadius)
                    mAnimMode = getInt(R.styleable.ShimmerView_csAnimMode, mAnimMode)
                    mDuration =
                        getInt(R.styleable.ShimmerView_csDuration, mDuration.toInt()).toLong()
                    mRepeatCount = getInt(R.styleable.ShimmerView_csRepeat, mRepeatCount)
                    val colorsStr = getString(R.styleable.ShimmerView_csColors)
                    val positionsStr = getString(R.styleable.ShimmerView_csPositions)
                    if (!colorsStr.isNullOrBlank() && !positionsStr.isNullOrBlank()) {
                        val colorArr =
                            colorsStr.split(",".toRegex()).dropLastWhile { it.isEmpty() }
                                .toTypedArray()
                        val positionArr =
                            positionsStr.split(",".toRegex()).dropLastWhile { it.isEmpty() }
                                .toTypedArray()
                        val size = colorArr.size
                        if (size == positionArr.size) {
                            mColors = IntArray(size)
                            mPositions = FloatArray(size)
                            for (i in 0 until size) {
                                mColors[i] = Color.parseColor(colorArr[i])
                                mPositions[i] = positionArr[i].toFloat()
                            }
                        }
                    }
                } finally {
                    recycle()
                }
            }
        }
    }


    public override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        val widthSize = MeasureSpec.getSize(widthMeasureSpec)
        val heightSize = MeasureSpec.getSize(heightMeasureSpec)
        initSetup(widthSize, heightSize)
        if (mAnimMode == 0) {
            showAnimation(widthSize, heightSize, mRepeatCount, mDuration)
        }
    }

    private fun initSetup(width: Int, height: Int) {
        if (mRepeatCount < 0) {
            mRepeatCount = -1
        }
        if (mWidth < 0) {
            mWidth = width / 3
        }
        if (mSlope < 0) {
            mSlope = height / width.toFloat()
        }

        val point1 = Point(0, 0)
        val point2 = Point(width, 0)
        val point3 = Point(width, height)
        val point4 = Point(0, height)
        mPath = Path()
        mPath?.moveTo(point1.x.toFloat(), point1.y.toFloat())
        mPath?.lineTo(point2.x.toFloat(), point2.y.toFloat())
        mPath?.lineTo(point3.x.toFloat(), point3.y.toFloat())
        mPath?.lineTo(point4.x.toFloat(), point4.y.toFloat())
        mPath?.close()



        mClipPath = Path()
        val mRect = RectF()
        mRect[0f, 0f, width.toFloat()] = height.toFloat()
        mClipPath?.addRoundRect(mRect, mRadius.toFloat(), mRadius.toFloat(), Path.Direction.CW)

    }


    public override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        //绘制圆角
        mClipPath?.let { canvas.clipPath(it) }
        //绘制流光
        mPath?.let { canvas.drawPath(it, mPaint) }
    }

    private fun showAnimation(width: Int, height: Int, repeatCount: Int, duration: Long) {
        val offset = mWidth.toFloat()
        mValueAnimator?.cancel()
        mValueAnimator = ValueAnimator.ofFloat(0f - offset * 2, width + offset * 2)
        mValueAnimator?.repeatCount = repeatCount
        mValueAnimator?.interpolator = LinearInterpolator()
        mValueAnimator?.duration = duration
        mValueAnimator?.addUpdateListener { animation: ValueAnimator ->
            val value = animation.animatedValue as Float
            mPaint.shader = LinearGradient(
                value,
                mSlope * value,
                value + offset,
                mSlope * (value + offset),
                mColors,
                mPositions,
                Shader.TileMode.CLAMP
            )
            invalidate()
        }
        mValueAnimator?.start()
    }

    public override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()
        mValueAnimator?.cancel()
        mValueAnimator = null
    }

    fun setColorAndPositions(colors: IntArray, positions: FloatArray) {
        if (colors.size != positions.size) {
            throw RuntimeException("colors&positions的Array.size必须一致")
        }
        this.mColors = colors
        this.mPositions = positions
    }

    fun setSlope(mSlope: Float) {
        this.mSlope = mSlope
    }

    fun setWidth(mWidth: Int) {
        this.mWidth = mWidth
    }

    fun startLightingAnimation(duration: Long = mDuration, repeatCount: Int = mRepeatCount) {
        showAnimation(width, height, repeatCount, duration)
    }


}

ShimmerView定义的 attrs：


    <declare-styleable name="ShimmerView">
        <!--自动还是手动-->
        <attr name="csAnimMode" format="enum">
            <enum name="auto" value="0" />
            <enum name="manual" value="1" />
        </attr>
        <!--光影宽度-->
        <attr name="csWidth" format="dimension" />
        <!--光影斜率 范围【-1 ~ 1】-->
        <attr name="csSlope" format="float" />
        <!--控件的圆角大小-->
        <attr name="csRadius" format="dimension" />
        <!-- -1:无限循环，0：其他代表重复执行几次-->
        <attr name="csRepeat" format="integer" />
        <!--动画时长 单位ms-->
        <attr name="csDuration" format="integer" />
        <!--颜色值 举例：{0x00FFFFFF, 0x88FFFFFF, 0x00FFFFFF}-->
        <attr name="csColors" format="string" />
        <!--颜色值对应的位置数组  (值范围0~1) 举例：[0f,0.5f,1f]  与csAngle数组大小必须一致-->
        <attr name="csPositions" format="string" />
    </declare-styleable>

ShimmerTextView.kt


import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.LinearGradient
import android.graphics.Matrix
import android.graphics.Paint
import android.graphics.Shader
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatTextView

class ShimmerTextView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AppCompatTextView(context, attrs, defStyleAttr) {
    private var mLinearGradient: LinearGradient? = null

    private var mGradientMatrix: Matrix? = null

    private var mViewWidth = 0

    private var mTranslate = 0

    private var mAnimating = true

    private val speed = 50
    private var mPaint: Paint? = null

    private var textColor = 0
    private var shimmerColor = 0

    init {
        attrs?.let {
            context.obtainStyledAttributes(attrs, R.styleable.ShimmerTextView).apply {
                try {
                    textColor = getColor(R.styleable.ShimmerTextView_stvTextColor, Color.BLACK)
                    shimmerColor =
                        getColor(R.styleable.ShimmerTextView_stvShimmerColor, Color.WHITE)
                    mPaint = paint
                    mGradientMatrix = Matrix()
                } finally {
                    recycle()
                }

            }
        }

    }

    fun setShimmer(isShimmer: Boolean) {
        mAnimating = isShimmer
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        mViewWidth = measuredWidth
    }

    fun initLinearGradient() {
        mLinearGradient = LinearGradient(
            0f,
            0f,
            mViewWidth.toFloat(),
            0f,
            intArrayOf(textColor, shimmerColor, textColor),
            null,
            Shader.TileMode.CLAMP
        )
        mPaint?.shader = mLinearGradient
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        if (mAnimating) {
            if (mGradientMatrix != null && mLinearGradient != null) {
                mTranslate += mViewWidth / 10
                if (mTranslate > 2 * mViewWidth) {
                    mTranslate = -mViewWidth
                }
                mGradientMatrix?.setTranslate(mTranslate.toFloat(), 0f)
                mLinearGradient?.setLocalMatrix(mGradientMatrix)
            } else {
                initLinearGradient()
            }
            postInvalidateDelayed(speed.toLong())
        }
    }
}

ShimmerTextView 定义的 attrs：

    <declare-styleable name="ShimmerTextView">
        <attr name="stvTextColor" format="color" />
        <attr name="stvShimmerColor" format="color" />
    </declare-styleable>