Android 文字跳跃加载效果（类似原58同城loading文字版

本文主要是介绍Android 文字跳跃加载效果（类似原58同城loading文字版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

疫情期间在家，琢磨了些小东西，今天整理了下，把这个文字跳跃加载效果发出来。

效果图

前几天脑子里突然蹦出个文字一跳一跳这样的loading效果，感觉会挺好看，网上搜了搜也没有其他人做。

于是想着自己写一个，可下笔却想不出该怎么设计，后来又想到58同城有过一个一跳一跳的效果，
看了下，现在已经换了，网上一查，有当时的动图：

原先58同城的效果

于是，照猫画虎开始做。

先说一下怎么用。

        tcl.setTextList(arrayListOf(TextBean("这", 0xFF009925.toInt()),TextBean("是", 0xFFEEB211.toInt()),TextBean("加", 0xFF3369E8.toInt()),TextBean("载", 0xFFD50F25.toInt()),TextBean("框", 0xFF9932CD.toInt())))tcl.setTextSize(SizeUtils.dp2px(this, 21F).toFloat())tcl.post { tcl.start() }

再说怎么做。

既然是循环播放的动画控件，那么大致可以分为两个部分，一是根据当前的动画参数绘制画布，二是根据时间的进程改变动画参数。

整个控件区域又可以分为文字部分和底部阴影部分。

动画参数

我定义了以下动画参数：

// 当前第几个文字private var mCurrentTextIndex = 0// 当前最大旋转角度private var mCurrentMaxRotateAngle = 360F// 当前旋转到多少度private var mCurrentRotateAngle = 0F// 文字可活动的最大高度private var mTextOffsetMaxH = 0F// 文字当前距离顶部的高度private var mCurrentOffsetH = 0F// 当前文字区域的宽高private var mTextAreaHeight = 0Fprivate var mTextAreaWidth = 0F// 阴影当前宽度private var mCurrentShadowWidth = 0F

通过这些参数，就可以确定文字的旋转角度、文字的位置，以及阴影的宽度。这些都是需要在动画进程中变化的值。

同样定义了以下常量:

// 阴影最大宽private val SHADOW_MAX_WIDTH = SizeUtils.dp2px(context, 28F).toFloat()// 阴影最小宽private val SHADOW_MIN_WIDTH = SizeUtils.dp2px(context, 8F).toFloat()// 阴影高度private val SHADOW_HEIGHT = SizeUtils.dp2px(context, 6F).toFloat()

绘制

控件区域分为文字部分和底部阴影部分，分开绘制。

// 绘制文字private fun drawText(canvas: Canvas) {if (mCurrentTextIndex >= mTextList.size)returnvar textBean = mTextList[mCurrentTextIndex]mTextPaint.color = textBean.color// 旋转中心var rotateCenterX = width / 2var rotateCenterY = mCurrentOffsetH + mTextAreaHeight / 2// 旋转画布canvas.rotate(mCurrentRotateAngle, rotateCenterX.toFloat(), rotateCenterY.toFloat())// 绘制文字var textX = width / 2F - mTextAreaWidth / 2Fvar textY = mCurrentOffsetH + mTextAreaHeight / 2 + getBaseline(mTextPaint)canvas.drawText(textBean.text, textX, textY, mTextPaint)// 复原状态canvas.rotate(-mCurrentRotateAngle, rotateCenterX.toFloat(), rotateCenterY.toFloat())}

绘制文字并不麻烦，文字的的变化参数只有旋转角度和位置。旋转角度可以通过旋转画板实现。位置的话，变化的只有y轴参数。

 // 绘制阴影private fun drawShadow(canvas: Canvas) {var textBean = mTextList[mCurrentTextIndex]mShadowPaint.color = textBean.color// 起始点xyvar shadowX = width / 2F - mCurrentShadowWidth / 2Fvar shadowY = height - SHADOW_HEIGHTvar rectF = RectF(shadowX, shadowY, shadowX + mCurrentShadowWidth, shadowY + SHADOW_HEIGHT)canvas.drawOval(rectF, mShadowPaint)}

绘制阴影就更简单了，变化参数是宽度和位置，而位置还是因为宽度变化而改变的。

绘制部分其实并不麻烦，理清思路就是了。

动画

定义了两个属性动画：

    // 文字上升动画private var mUpAnimator: ValueAnimator? = null// 文字下降动画private var mDownAnimator: ValueAnimator? = null

初始化动画：

        mUpAnimator = ValueAnimator.ofFloat(0F, 1F)mUpAnimator?.duration = 600
//        mUpAnimator?.interpolator = AccelerateInterpolator()mUpAnimator?.addUpdateListener {var value = it.animatedValue as FloatLog.d(TAG, "value=$value")// 旋转角度mCurrentRotateAngle = mCurrentMaxRotateAngle * value// 当前偏移量mCurrentOffsetH = mTextOffsetMaxH * (1 - value)// 阴影宽度mCurrentShadowWidth =SHADOW_MIN_WIDTH + (SHADOW_MAX_WIDTH - SHADOW_MIN_WIDTH) * valuepostInvalidate()}mUpAnimator?.addListener(object : Animator.AnimatorListener {override fun onAnimationRepeat(p0: Animator?) {}override fun onAnimationEnd(p0: Animator?) {mDownAnimator?.start()}override fun onAnimationCancel(p0: Animator?) {}override fun onAnimationStart(p0: Animator?) {}})

可以看到，这里是随着动画进程，修改绘制需要的参数。然后通知控件重新绘制。

同时，上升动画结束后，开始下降动画。

下降动画也是同理，不同的是，下降动画结束后，需要切换至下一个文字的索引index，同时开始上升动画。