如何使用单个TextView实现文本切换时的淡入淡出动画效果

核心逻辑 #

• 把需要轮播的文本存入数组/列表，用索引变量跟踪当前展示的文本位置
• 所有操作严格按顺序串行执行：淡出到完全透明 -> 切换文本 -> 淡入到完全显示 -> 停留 -> 重复执行
• 文本切换操作必须放在TextView alpha为0的不可见状态执行，避免用户看到文本跳变

完整实现代码 #

首先在Activity/Fragment中定义成员变量：

// 轮播文本列表
private String[] mTextArray = {"Welcome", "How are you?", "How old are you?"};
// 当前展示的文本下标
private int mCurrentIndex = 0;
// 动画时长 单位ms
private static final int ANIM_DURATION = 1000;
// 文本展示停留时长 单位ms
private static final int SHOW_DELAY = 2000;
private TextView mTextView;

在初始化阶段（比如onCreate）设置初始文本，启动动画：

mTextView = findViewById(R.id.your_textview_id);
// 初始状态先显示第一个文本
mTextView.setText(mTextArray[mCurrentIndex]);
mTextView.setAlpha(1f);
// 启动第一个淡出动画
startFadeOutAnim();

实现两个动画方法循环调用即可：

// 淡出动画
private void startFadeOutAnim() {
    mTextView.animate()
            .alpha(0f)
            .setDuration(ANIM_DURATION)
            .setStartDelay(SHOW_DELAY)
            .withEndAction(new Runnable() {
                @Override
                public void run() {
                    // 完全透明后再切换文本，此时用户看不到切换过程
                    mCurrentIndex = (mCurrentIndex + 1) % mTextArray.length;
                    mTextView.setText(mTextArray[mCurrentIndex]);
                    // 切换完成后启动淡入
                    startFadeInAnim();
                }
            })
            .start();
}

// 淡入动画
private void startFadeInAnim() {
    mTextView.animate()
            .alpha(1f)
            .setDuration(ANIM_DURATION)
            .withEndAction(new Runnable() {
                @Override
                public void run() {
                    // 淡入完成后，停留指定时间再启动下一轮淡出
                    startFadeOutAnim();
                }
            })
            .start();
}

注意事项 #

• 页面销毁时要取消动画避免内存泄漏，在onDestroy中添加以下代码：

@Override
protected void onDestroy() {
    super.onDestroy();
    // 取消未执行的动画和回调
    if (mTextView != null) {
        mTextView.animate().cancel();
    }
}

失效原因说明 #

之前的方案失效大概率是切换文本的时机不对：如果在淡出动画启动后、还没执行到alpha=0的状态时就调用了setText，就会看到文本直接跳变。只要严格把setText放在淡出动画的结束回调里执行，就不会出现这个问题。

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