vue數(shù)字金額動(dòng)態(tài)變化功能實(shí)現(xiàn)方法詳解

更新時(shí)間：2022年09月15日 08:39:33 作者：Saga?Two

這篇文章主要介紹了vue實(shí)現(xiàn)數(shù)字金額動(dòng)態(tài)變化效果，數(shù)字動(dòng)態(tài)變化是我們?cè)谇岸碎_(kāi)發(fā)中經(jīng)常需要做的效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

1 前言

在某些場(chǎng)景中，要求我們能夠動(dòng)態(tài)與用戶進(jìn)行交互，如頁(yè)面加載一個(gè)數(shù)字的時(shí)候，動(dòng)態(tài)改變一個(gè)固定地?cái)?shù)字，然后將數(shù)字展現(xiàn)在頁(yè)面上，如當(dāng)前的積分或者余額等；以達(dá)到提高與用戶交互體驗(yàn)的效果。下面我們就在vue中使用兩種方法來(lái)實(shí)現(xiàn)數(shù)字動(dòng)態(tài)滾動(dòng)效果。

2 數(shù)字動(dòng)態(tài)滾動(dòng)

2.1 計(jì)時(shí)器實(shí)現(xiàn)

先上效果：

以上效果是點(diǎn)擊按鈕加載金額，實(shí)際情況是頁(yè)面加載的時(shí)候就需要。這個(gè)時(shí)候我們需要在頁(yè)面加載的時(shí)候執(zhí)行用該方法。以上實(shí)例用到的代碼如下：

代碼：

<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="計(jì)時(shí)器"></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: "動(dòng)態(tài)變化金額",
      amount: 0, //初始amout
      amoutFrame: 0,
      amountShow: 0
    };
  },
  computed: {
    // 計(jì)算屬性格式化頁(yè)面金額
    amountFormatPage() {
      return amountFormat(this.amount);
    }
  },
  methods: {
    changeAmount() {
      const total = 16000; //設(shè)置初始總金額
      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>

除了這個(gè)效果以外，我們可以通過(guò)調(diào)節(jié)計(jì)時(shí)器的間隔時(shí)間來(lái)控制金額變化的速度；通過(guò)調(diào)節(jié)i的大小來(lái)控制變化的次數(shù)。主要是控制這兩個(gè)參數(shù)來(lái)達(dá)到我們想要的效果。

2.2 動(dòng)畫(huà)幀實(shí)現(xiàn)

實(shí)現(xiàn)效果如下：

vue代碼如下：

<template>
  <div>
    <title-bar :title="title" @goBack="goback"></title-bar>
    <div>
      <label>您的余額為:</label>
      <label>{{ amountShow }}</label>
    </div>
    <t-button @clickhandle="changeAmountFrame" name="動(dòng)畫(huà)幀"></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: "動(dòng)態(tài)變化金額",
      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;
          // 動(dòng)畫(huà)繼續(xù)
          animation = window.requestAnimationFrame(f);
        } else {
          _this.amoutFrame = total;
          // 動(dòng)畫(huà)停止
          window.cancelAnimationFrame(f);
        }
        _this.amountShow = amountFormat(_this.amoutFrame);
      });
    },
    goback() {
      //
    }
  }
};
</script>
<style lang="scss" scoped>
.amount-box {
  label {
    display: box;
  }
}
</style>

window.requestAnimationFrame()是執(zhí)行動(dòng)畫(huà)幀的關(guān)鍵方法，對(duì)應(yīng)window.cancelAnimationFrame()是停止動(dòng)畫(huà)幀的方法。其中動(dòng)畫(huà)幀的價(jià)格時(shí)間一把為16ms，同上，通過(guò)調(diào)節(jié)framenum參數(shù)來(lái)控制一共播放多少幀，來(lái)達(dá)到我們想要的效果。

3 總結(jié)

本次用兩種方法實(shí)現(xiàn)金額數(shù)字等動(dòng)態(tài)變化，偏向應(yīng)用領(lǐng)域，若想了解即使器和動(dòng)畫(huà)幀的更深層次原理，請(qǐng)一部專業(yè)網(wǎng)站或者動(dòng)手艙室一下。

到此這篇關(guān)于vue數(shù)字金額動(dòng)態(tài)變化功能實(shí)現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)vue數(shù)字動(dòng)態(tài)變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: