Как анимировать TextView с помощью Alpha слева направо? - PullRequest
1 голос
/ 13 января 2020

Я работаю над Android TextView анимацией.

Требуется, чтобы TextView находился в фиксированном месте экрана, и каждый символ должен быть анимирован с помощью альфа (от нижнего к верхнему). Я пробовал пару библиотек, к сожалению, это не работает для меня.

Справочный скриншот:

enter image description here

Если у кого-то есть решение для этого, пожалуйста, предоставьте его. Спасибо

1 Ответ

0 голосов
/ 21 января 2020

После долгих исследований того же вопроса я публикую свой собственный ответ.

Шаги:

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

Готово.

...