The digital jump effect when entering the page is realized in the WeChat mini program
1. Component definition, create a new animate-numbers component
1.1
// components/animate-numbers/
Component({
properties: {
number: {
type: Number,
value: 0
},
duration: {
type: Number,
value: 1000
}
},
data: {
displayNumber: 0,
animationFrameId: null
},
observers: {
'number': function (newNumber) {
(newNumber);
}
},
methods: {
animateNumber(targetNumber) {
const start = ;//Old value const end = targetNumber;//New value const duration = ;
const increment = (end - start) / (duration / 16); // Suppose 60 frames per second, with an interval of about 16ms per frame let current = start;
if(){
clearInterval();
}
const animate = () => {
current += increment;
if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
clearInterval();
({ displayNumber: end });
} else {
({ displayNumber: (current) });
}
};
= setInterval(animate, 16);
}
},
// Clear the timer when the component is removed detached() {
clearInterval();
}
});1.2 wxml
<view>{{displayNumber}}</view>1.3 wxss
page {
font-size: 48rpx;
font-weight: bold;
}2. Use components
"animate-numbers": "../../../components/animate-numbers/index"
<animate-numbers number="{{attendanceInfo.month_avg_days}}" duration="1000"/>This is the article about implementing the digital beating effect (custom animate-numbers component) in WeChat applets. For more information about digital beating content of related applets, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!