如何使用 Alpha 从左到右为 TextView 设置动画？

Question

我正在研究 Android TextView 动画。

要求是 TextView 位于屏幕的固定位置并且每个字符都应使用 alpha（从低到高）进行动画处理。不幸的是，我尝试了几个库，但它对我不起作用。

参考截图：

如果有人对此有解决方案，请提供。谢谢

Answer 1

经过大量研究后，我发布了自己的答案。

步骤：

创建CustomTextLayout

class CustomTextLayout @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : LinearLayoutCompat(context, attrs, defStyleAttr) {

    private var characterAnimationTime = 100
    private var textSize = 22f
    private var letterSpacing = 0f
    private var animationDuration = 2000L

    init {
        orientation = HORIZONTAL
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomTextLayout, defStyleAttr, 0)
        textSize = typedArray.getFloat(R.styleable.CustomTextLayout_textSize, textSize)
        typedArray.recycle()
    }

    /**
     * This function sets the animated alpha text
     * @param context Context of Activity / Fragment
     * @param text Text string
     * @param initialDelay Start animation delay
     */
    fun setAnimatedText(context: Context, text: String, initialDelay: Long = 0) {
        var textDrawPosition = 0
        Handler().postDelayed({
            for (char in text) {
                val textView = getTextView(char.toString())
                textView.visibility = View.GONE
                this.addView(textView)
                textDrawPosition++
                drawAnimatedText(
                    context,
                    this,
                    textView,
                    textDrawPosition,
                    text,
                    (textDrawPosition * characterAnimationTime).toLong()
                )
            }
        }, initialDelay)
    }

    private fun drawAnimatedText(
        context: Context,
        parentView: LinearLayoutCompat,
        textView: AppCompatTextView,
        position: Int,
        text: String,
        initialDelay: Long
    ) {
        val colorAnimation = ValueAnimator.ofObject(ArgbEvaluator(), Color.WHITE, Color.BLACK)
        colorAnimation.startDelay = initialDelay
        colorAnimation.duration = animationDuration
        colorAnimation.addListener(object : Animator.AnimatorListener {
            override fun onAnimationStart(animator: Animator) {
                textView.visibility = View.VISIBLE
            }

            override fun onAnimationEnd(animator: Animator) {
                if (position == text.length) {
                    val updatedTextView = getTextView(text)
                    updatedTextView.setTextColor(Color.BLACK)
                    updatedTextView.visibility = View.VISIBLE
                    parentView.removeAllViews()
                    parentView.addView(updatedTextView)
                }
            }

            override fun onAnimationCancel(animator: Animator) {

            }

            override fun onAnimationRepeat(animator: Animator) {

            }
        })
        colorAnimation.addUpdateListener {
            textView.setTextColor(it.animatedValue as Int)
        }
        colorAnimation.start()
    }

    private fun getTextView(text: String): AppCompatTextView {
        val textView = AppCompatTextView(context)
        textView.text = text
        textView.textSize = textSize
        textView.setTypeface(Typeface.SANS_SERIF, Typeface.ITALIC)
        textView.letterSpacing = letterSpacing
        return textView
    }

在布局文件中添加

<com.mypackagename.CustomTextLayout
                        app:textSize="30"
                        app:letterSpacing="0.1"
                        android:id="@+id/textLayoutFirst"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_weight="1">

</com.mypackagename.CustomTextLayout>

添加attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomTextLayout">
        <attr name="textSize" format="float"/>
        <attr name="letterSpacing" format="float"/>
    </declare-styleable>

</resources>

开始动画：

textLayoutFirst.setAnimatedText(this, "Some text here")

完成了。

如何使用 Alpha 从左到右为 TextView 设置动画？

How to animate TextView with Alpha from Left to Right?

animation

android

alpha

textview

步骤：