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 = 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

你可能感兴趣的:(Android 文字跳跃加载效果(类似原58同城loading文字版)