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

2024-02-06 01:36

本文主要是介绍在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

  1. Demo.apk 点击下载

项目和演示效果可以去Github查看

项目地址: https://github.com/logan0817/shinningview 。

如果你有任何疑问可以留言。

如果这篇文章对你有帮助,可以赏个赞支持一下作者。

这篇关于在Android实现光影移动效果【流光效果】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/682791

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU