如何通过垂直位移动画实现单个TextView的多文本轮播切换？

问题说明 #

需要在单个TextView中循环切换三个文本，实现仅在TextView自身高度范围内的垂直位移动画（文本从下往上滑入、从上往下滑出循环），当前代码因使用父容器百分比作为动画位移基准，导致TextView移动到父布局顶部，不符合需求。

当前代码 #

动画资源文件（res/anim/ex1.xml） #

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="0%p"
        android:toYDelta="-100%p"
        android:duration="3000"
        android:repeatCount="0"
        android:fillAfter="true"
        />
</set>

Kotlin代码 #

val linearLayout = findViewById(R.id.linearLayout)
val textView = findViewById(R.id.textView)

val animation = AnimationUtils.loadAnimation(this, R.anim.ex1)

animation.setAnimationListener(object : Animation.AnimationListener {
    override fun onAnimationStart(animation: Animation) {}

    override fun onAnimationEnd(animation: Animation) {
        if (textView.text == "First Text") {
            textView.text = "Second Text"
        } else {
            textView.text = "First Text"
        }
        linearLayout.startAnimation(animation)
    }

    override fun onAnimationRepeat(animation: Animation) {}
})

linearLayout.startAnimation(animation)

解决方案 #

1. 修正动画位移基准 #

将动画中的%p（父容器百分比）改为%（TextView自身高度百分比），确保动画仅在自身范围内执行。我们需要两个动画：文本滑出（向上移出自身范围）和文本滑入（从下方移入自身范围）。

滑出动画（res/anim/text_slide_out.xml）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="0%"
        android:toYDelta="-100%"
        android:duration="500"
        android:fillAfter="true" />
</set>

滑入动画（res/anim/text_slide_in.xml）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="100%"
        android:toYDelta="0%"
        android:duration="500"
        android:fillAfter="true" />
</set>

2. 修改Kotlin代码实现三文本循环切换 #

通过文本列表+索引循环，配合滑出→切换文本→滑入的动画流程，实现循环播放：

val textView = findViewById<TextView>(R.id.textView)
// 存储需要切换的三个文本
val textList = listOf("First Text", "Second Text", "Third Text")
var currentIndex = 0

// 加载动画
val slideOutAnim = AnimationUtils.loadAnimation(this, R.anim.text_slide_out)
val slideInAnim = AnimationUtils.loadAnimation(this, R.anim.text_slide_in)

// 滑出动画结束后切换文本并启动滑入动画
slideOutAnim.setAnimationListener(object : Animation.AnimationListener {
    override fun onAnimationStart(animation: Animation) {}

    override fun onAnimationEnd(animation: Animation) {
        currentIndex = (currentIndex + 1) % textList.size
        textView.text = textList[currentIndex]
        textView.startAnimation(slideInAnim)
    }

    override fun onAnimationRepeat(animation: Animation) {}
})

// 滑入动画结束后延迟启动滑出动画，形成循环
slideInAnim.setAnimationListener(object : Animation.AnimationListener {
    override fun onAnimationStart(animation: Animation) {}

    override fun onAnimationEnd(animation: Animation) {
        Handler(Looper.getMainLooper()).postDelayed({
            textView.startAnimation(slideOutAnim)
        }, 2000) // 文本停留时长，可按需调整
    }

    override fun onAnimationRepeat(animation: Animation) {}
})

// 初始启动：文本先停留2秒，再开始循环动画
Handler(Looper.getMainLooper()).postDelayed({
    textView.startAnimation(slideOutAnim)
}, 2000)

3. 额外优化建议 #

• 给TextView设置固定高度，避免因文本长度不同导致动画错位；
• 可根据需求调整动画时长（duration）和文本停留时长；
• 若需要更流畅的过渡，可添加透明度动画配合位移动画。

内容的提问来源于stack exchange，提问作者beluga1021