Android实现类似GIF中数字上滑并变更数值的动画方案

这个动画本质是两个数字容器的交替切换+位移动画：旧数字向上滑出视野，新数字从下方移入，通过控制容器的显示/隐藏和动画时序，就能实现连贯的翻牌效果。你可以搜索这些关键词找更多参考：数字滚动切换动画、翻牌数字动画、数字轮播过渡效果

各平台实现方案 #

1. iOS（Swift） #

直接用UIView的动画API就能实现，也可以用现成的第三方控件（比如FlipNumberView）：

• 准备两个UILabel（或自定义数字视图），叠加在同一位置，初始一个显示当前数字，另一个藏在下方。
• 切换数字时的核心逻辑：
  1. 旧数字向上平移+透明度降低，滑出视野
  2. 新数字从下方平移到原位+透明度恢复，滑入视野
  3. 动画结束后交换两个视图的角色，重置位置准备下一次切换

示例代码片段：

func updateNumber(to newNumber: Int) {
    let oldLabel = currentDisplayLabel
    let newLabel = hiddenLabel
    newLabel.text = "\(newNumber)"
    newLabel.transform = CGAffineTransform(translationX: 0, y: oldLabel.bounds.height)
    newLabel.alpha = 0
    
    UIView.animate(withDuration: 0.3) {
        oldLabel.transform = CGAffineTransform(translationX: 0, y: -oldLabel.bounds.height)
        oldLabel.alpha = 0
        newLabel.transform = .identity
        newLabel.alpha = 1
    } completion: { _ in
        oldLabel.transform = .identity
        oldLabel.alpha = 1
        (self.currentDisplayLabel, self.hiddenLabel) = (self.hiddenLabel, self.currentDisplayLabel)
    }
}

2. Android（Kotlin） #

用ObjectAnimator实现位移动画，也可以用第三方库（比如NumberRollerView）快速搞定：

• 准备两个TextView放在同一布局位置，初始一个显示，一个通过translationY藏在下方。
• 切换时同步给两个视图加动画，结束后交换状态。

示例代码片段：

fun updateNumber(newNumber: Int) {
    val oldTv = currentTv
    val newTv = hiddenTv
    newTv.text = newNumber.toString()
    newTv.translationY = oldTv.height.toFloat()
    newTv.alpha = 0f

    // 旧数字向上淡出
    ObjectAnimator.ofFloat(oldTv, "translationY", 0f, -oldTv.height.toFloat()).apply {
        duration = 300
        start()
    }
    ObjectAnimator.ofFloat(oldTv, "alpha", 1f, 0f).apply {
        duration = 300
        start()
    }

    // 新数字向上淡入
    ObjectAnimator.ofFloat(newTv, "translationY", oldTv.height.toFloat(), 0f).apply {
        duration = 300
        start()
    }
    ObjectAnimator.ofFloat(newTv, "alpha", 0f, 1f).apply {
        duration = 300
        start()
    }

    // 动画结束后重置状态，交换视图角色
    Handler(Looper.getMainLooper()).postDelayed({
        oldTv.translationY = 0f
        oldTv.alpha = 1f
        val temp = currentTv
        currentTv = hiddenTv
        hiddenTv = temp
    }, 300)
}

3. Web（HTML+CSS+JS） #

用CSS过渡结合JS控制，实现成本很低：

• 两个数字容器叠加，通过CSS的transform和transition做平移动画，JS负责触发动画和更新数字。

示例代码：

<div class="number-container">
    <span class="number-item current">0</span>
    <span class="number-item hidden">0</span>
</div>

.number-container {
    position: relative;
    overflow: hidden;
    height: 40px;
    line-height: 40px;
    font-size: 32px;
}
.number-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.number-item.hidden {
    transform: translateY(100%);
    opacity: 0;
}
.number-item.up-out {
    transform: translateY(-100%);
    opacity: 0;
}

const currentItem = document.querySelector('.current');
const hiddenItem = document.querySelector('.hidden');

function updateNumber(newNum) {
    hiddenItem.textContent = newNum;
    currentItem.classList.add('up-out');
    hiddenItem.classList.remove('hidden');
    
    setTimeout(() => {
        currentItem.textContent = newNum;
        currentItem.classList.remove('up-out');
        hiddenItem.classList.add('hidden');
    }, 300);
}

关键注意点 #

• 容器必须设置overflow: hidden，避免动画时数字超出显示范围
• 两个视图的动画时长要保持一致（比如300ms），保证同步性
• 如果是多位数，可以拆成单个数字位，每个位单独做滚动动画，实现逐位翻牌的效果

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