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

Question

我正在制作 Android TextView 动画。

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

参考截图：

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

Answer 1

在对此进行了大量研究之后，我将发布自己的答案。

步骤：

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
       }
   

2. 在布局文件中添加

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

3. 添加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>
   

4. 开始动画：

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

完成了。