疫情期間在家棺聊，琢磨了些小東西自脯，今天整理了下，把這個文字跳躍加載效果發(fā)出來铲汪。
效果圖
前幾天腦子里突然蹦出個文字一跳一跳這樣的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() }
再說怎么做扰藕。
既然是循環(huán)播放的動畫控件，那么大致可以分為兩個部分芳撒，一是根據當前的動畫參數繪制畫布邓深，二是根據時間的進程改變動畫參數。
整個控件區(qū)域又可以分為文字部分和底部陰影部分笔刹。
動畫參數
我定義了以下動畫參數：
// 當前第幾個文字
private var mCurrentTextIndex = 0
// 當前最大旋轉角度
private var mCurrentMaxRotateAngle = 360F
// 當前旋轉到多少度
private var mCurrentRotateAngle = 0F
// 文字可活動的最大高度
private var mTextOffsetMaxH = 0F
// 文字當前距離頂部的高度
private var mCurrentOffsetH = 0F
// 當前文字區(qū)域的寬高
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()
繪制
控件區(qū)域分為文字部分和底部陰影部分，分開繪制袱瓮。
// 繪制文字
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)
// 復原狀態(tài)
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矛缨，同時開始上升動畫。
其他細節(jié)
- 旋轉角度可以根據文字的index奇偶值帖旨，區(qū)分順時針和逆時針（+-360度）箕昭，避免單調。
- 屬性動畫在上升或下降動畫中解阅，可以加入動畫插值器（加速度落竹、減速度等）模擬正式的拋物動作。
- 下降動畫開始前可以延遲個100~200毫秒货抄，讓文字上升到頂點后述召，有停滯感。
有問題歡迎討論蟹地，代碼地址：https://github.com/ifadai/TextJumpView
