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

问题描述 投票:1回答:1

我正在研究Android TextView动画。

要求TextView位于屏幕的固定位置,并且每个字符都应使用alpha动画(从低到高)。不幸的是,我已经尝试了几个图书馆,但对我来说不起作用。

参考屏幕截图:

enter image description here

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

android animation textview alpha
1个回答
0
投票

在同一方面进行了大量研究后,我要发布自己的答案。

步骤:

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

完成。

© www.soinside.com 2019 - 2024. All rights reserved.