疫情期间在家，琢磨了些小东西，今天整理了下，把这个文字跳跃加载效果发出来。
效果图
前几天脑子里突然蹦出个文字一跳一跳这样的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 = 0F
private 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)
return
var textBean = mTextList[mCurrentTextIndex]
mTextPaint.color = textBean.color
// 旋转中心
var rotateCenterX = width / 2
var rotateCenterY = mCurrentOffsetH + mTextAreaHeight / 2
// 旋转画布
canvas.rotate(mCurrentRotateAngle, rotateCenterX.toFloat(), rotateCenterY.toFloat())
// 绘制文字
var textX = width / 2F - mTextAreaWidth / 2F
var 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
// 起始点xy
var shadowX = width / 2F - mCurrentShadowWidth / 2F
var shadowY = height - SHADOW_HEIGHT
var 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 Float
Log.d(TAG, "value=$value")
// 旋转角度
mCurrentRotateAngle = mCurrentMaxRotateAngle * value
// 当前偏移量
mCurrentOffsetH = mTextOffsetMaxH * (1 - value)
// 阴影宽度
mCurrentShadowWidth =
SHADOW_MIN_WIDTH + (SHADOW_MAX_WIDTH - SHADOW_MIN_WIDTH) * value
postInvalidate()
}
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，同时开始上升动画。
其他细节
- 旋转角度可以根据文字的index奇偶值，区分顺时针和逆时针（+-360度），避免单调。
- 属性动画在上升或下降动画中，可以加入动画插值器（加速度、减速度等）模拟正式的抛物动作。
- 下降动画开始前可以延迟个100~200毫秒，让文字上升到顶点后，有停滞感。
有问题欢迎讨论，代码地址：https://github.com/ifadai/TextJumpView
网友评论