本文主要是介绍在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.LinearInterpolatorclass ShimmerView @JvmOverloads constructor(context: Context,attrs: AttributeSet? = null,defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {private var mWidth = -1private var mSlope: Float = -1Fprivate var mAnimMode = 0private var mDuration = 1600Lprivate var mRepeatCount = 0private var mColors = intArrayOf(0x00FFFFFF, 0x5AFFFFFF, 0x5AFFFFFF, 0x00FFFFFF)private var mPositions = floatArrayOf(0f, 0.5f, 0.51f, 1f)private var mRadius = 0private var mPaint: Paint = Paint()private var mPath: Path? = nullprivate var mClipPath: Path? = nullprivate var mValueAnimator: ValueAnimator? = nullinit {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.sizeif (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 = repeatCountmValueAnimator?.interpolator = LinearInterpolator()mValueAnimator?.duration = durationmValueAnimator?.addUpdateListener { animation: ValueAnimator ->val value = animation.animatedValue as FloatmPaint.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 = colorsthis.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.AppCompatTextViewclass ShimmerTextView @JvmOverloads constructor(context: Context,attrs: AttributeSet? = null,defStyleAttr: Int = 0
) : AppCompatTextView(context, attrs, defStyleAttr) {private var mLinearGradient: LinearGradient? = nullprivate var mGradientMatrix: Matrix? = nullprivate var mViewWidth = 0private var mTranslate = 0private var mAnimating = trueprivate val speed = 50private var mPaint: Paint? = nullprivate var textColor = 0private var shimmerColor = 0init {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 = paintmGradientMatrix = 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 / 10if (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>
DEMO
- Demo.apk 点击下载
项目和演示效果可以去Github查看
项目地址： https://github.com/logan0817/shinningview 。
如果你有任何疑问可以留言。
如果这篇文章对你有帮助，可以赏个赞支持一下作者。
这篇关于在Android实现光影移动效果【流光效果】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
