Android 文字跳躍加載效果（類似原58同城loading文字版

疫情期間在家，琢磨了些小東西，今天整理了下，把這個文字跳躍加載效果發出來。

前幾天腦子裏突然蹦出個文字一跳一跳這樣的loading效果，感覺會挺好看，網上搜了搜也沒有其他人做。

於是想着自己寫一個，可下筆卻想不出該怎麼設計，後來又想到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