Table of contents
1 Introduction
In some scenarios, we are required to interact with users dynamically, such as when the page loads a number, dynamically change a fixed number, and then display the number on the page, such as the current points or balance, etc.; in order to achieve improvement and The effect of user interaction experience. Below we will use two methods in vue to achieve digital dynamic scrolling effect.
2 digital dynamic scrolling
2.1 Timer implementation
First effect:
The above effect is to click the button to load the amount. The actual situation is that it is required when the page is loaded. At this time we need to execute this method when the page is loaded. The code used in the above example is as follows:
Code:
<template>
<div>
<title-bar :title="title" @goBack="goback"></title-bar>
<div class="amount-box">
<label>您的余额为:</label>
<label>{
{ amountFormatPage }}</label>
</div>
<t-button @clickhandle="changeAmount" name="计时器"></t-button>
</div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
import tButton from "@/components/TButton";
import {
amountFormat } from "@/util/utils";
export default {
components: {
TitleBar,
tButton
},
data() {
return {
res: false, //
title: "动态变化金额",
amount: 0, //初始amout
amoutFrame: 0,
amountShow: 0
};
},
computed: {
// 计算属性格式化页面金额
amountFormatPage() {
return amountFormat(this.amount);
}
},
methods: {
changeAmount() {
const total = 16000; //设置初始总金额
const _this = this;
let i = 0;
//变化15次，每次间隔30毫秒
const amoutInterval = setInterval(() => {
if (i < 15) {
i++;
_this.amount = (total * i) / 15;
} else {
clearInterval(amoutInterval);
}
}, 30);
},
goback() {
//
}
}
};
</script>
<style lang="scss" scoped>
.amount-box {
label {
display: box;
}
}
</style>
In addition to this effect, we can control the speed of the amount change by adjusting the timer interval; icontrol the number of changes by adjusting the size. The main thing is to control these two parameters to achieve the effect we want.
2.2 Animation frame implementation
The effect is as follows:
The vue code is as follows:
<template>
<div>
<title-bar :title="title" @goBack="goback"></title-bar>
<div>
<label>您的余额为:</label>
<label>{
{ amountShow }}</label>
</div>
<t-button @clickhandle="changeAmountFrame" name="动画帧"></t-button>
</div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
import tButton from "@/components/TButton";
import {
amountFormat } from "@/util/utils";
export default {
components: {
TitleBar,
tButton
},
data() {
return {
res: false, //
title: "动态变化金额",
amount: 0, //初始amout
amoutFrame: 0,
amountShow: 0
};
},
methods: {
changeAmountFrame() {
const total = 26666;
const frameNum = 60;
const _this = this;
let animation = window.requestAnimationFrame(function f() {
if (_this.amoutFrame < total) {
_this.amoutFrame = _this.amoutFrame + total / frameNum;
// 动画继续
animation = window.requestAnimationFrame(f);
} else {
_this.amoutFrame = total;
// 动画停止
window.cancelAnimationFrame(f);
}
_this.amountShow = amountFormat(_this.amoutFrame);
});
},
goback() {
//
}
}
};
</script>
<style lang="scss" scoped>
.amount-box {
label {
display: box;
}
}
</style>
window.requestAnimationFrame()It is the key method to execute the animation frame, and the corresponding window.cancelAnimationFrame()method is to stop the animation frame. The price time of an animation frame is 16ms. Same as above. By adjusting the framenum parameter to control how many frames are played in total, we can achieve the effect we want.
3 Summary
This time, two methods are used to realize dynamic changes such as amount figures, which are biased towards the application field. If you want to understand the deeper principles of the controller and animation frames, please visit a professional website or try it out in a hands-on cabin.