微信小程序通过自定义animate-numbers组件实现进入页面时数字跳动效果

目录

• 1. 组件定义,新建animate-numbers组件
• 1.1 index.js
• 1.2 wxml
• 1.3 wxss
• 2. 使用组件

微信小程序中实现进入页面时数字跳动效果

1. 组件定义,新建animate-numbers组件

1.1 index.js

// components/animate-numbers/index.js
Component({
  properties: {
    number: {
      type: Number,
      value: 0
    },
    duration: {
      type: Number,
      value: 1000
    }
  },
  data: {
    displayNumber: 0,
    animationFrameId: null
  },
  observers: {
    'number': function (newNumber) {
      this.animateNumber(newNumber);
    }
  },
  methods: {
    animateNumber(targetNumber) {
      const start = this.data.displayNumber;//旧值
      const end = targetNumber;//新值
      const duration = this.properties.duration;
      const increment = (end - start) / (duration / 16); // 假设每秒60帧，每帧间隔约16ms
      let current = start;
      if(this.data.animationFrameId){
        clearInterval(this.data.animationFrameId);
      }
      const animate = () => {
        current += increment;
        if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
          clearInterval(this.data.animationFrameId);
          this.setData({ displayNumber: end });
        } else {
          this.setData({ displayNumber: Math.round(current) });
        }
      };
      this.data.animationFrameId = setInterval(animate, 16);
    }
  },
  // 组件被移除时清除定时器
  detached() {
    clearInterval(this.data.animationFrameId);
  }
});

1.2 wxml

{{displayNumber}}

1.3 wxss

page {
  font-size: 48rpx;
  font-weight: bold;
}

2. 使用组件

"animate-numbers": "../../../components/animate-numbers/index"

到此这篇关于微信小程序中实现进入页面时数字跳动效果(自定义animate-numbers组件)的文章就介绍到这了,更多相关小程序数字跳动内容请搜索科站长以前的文章或继续浏览下面的相关文章希望大家以后多多支持科站长！