uni-app 支付宝余额数字动画增长

在 uni-app 中实现支付宝余额数字动画增长效果，可以使用 CSS 动画和 JavaScript 结合的方式来完成。以下是一个简单的实现示例，展示如何在 uni-app 中实现这一效果。

首先，在你的 uni-app 项目中，创建一个新的页面或组件，比如 balanceAnimation.vue。

<template>
  <view class="container">
    <view class="balance-box">
      <text class="balance-text" :style="{animationDuration: animationDuration + 's'}">{{ formattedBalance }}</text>
    </view>
    <button @click="startAnimation">Start Animation</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startBalance: 0,
      endBalance: 1234567.89, // 目标余额
      animationDuration: 2, // 动画持续时间（秒）
      currentBalance: 0,
    };
  },
  computed: {
    formattedBalance() {
      return this.currentBalance.toFixed(2);
    },
  },
  methods: {
    startAnimation() {
      let startTime = Date.now();
      const incrementBalance = () => {
        const elapsedTime = (Date.now() - startTime) / 1000;
        this.currentBalance = this.startBalance + (this.endBalance - this.startBalance) * (elapsedTime / this.animationDuration);
        if (elapsedTime < this.animationDuration) {
          requestAnimationFrame(incrementBalance);
        } else {
          this.currentBalance = this.endBalance;
        }
      };
      incrementBalance();
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.balance-box {
  font-size: 48px;
  margin-bottom: 20px;
}

.balance-text {
  animation-name: numberGrow;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes numberGrow {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>

在这个示例中，startBalance 是初始余额，endBalance 是目标余额，animationDuration 是动画持续时间。startAnimation 方法使用 requestAnimationFrame 实现平滑的数字增长动画。CSS 动画 numberGrow 用于在动画结束时增加一些视觉效果，比如淡入和缩放。

当你点击按钮时，startAnimation 方法会被调用，开始平滑地增加余额数字，并在动画结束时显示目标余额。这个实现方式简单且高效，适用于 uni-app 的多端开发环境。