Vue.js 中使用緩動動畫庫 TweenJs

TweenJs 是一個(gè)第三方的 javascript 動畫庫,可以輕松實(shí)現(xiàn)各種緩動動畫效果。

TweenJs

一、TweenJs 的基本用法是:

  1. 載入 TweenJs 庫(如:<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
  2. 啟用 requestAnimationFrame;
  3. 配置并開始動畫;

二、小例子 - 平滑滾動到頁面頂部

2.1 載入 TweenJs 庫

打開 vue-cli 構(gòu)建的項(xiàng)目的 index.html,在底部添加 TweenJs 庫,如:

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
</body>
</html>

2.2 啟用 requestAnimationFrame;

打開【src/App.vue】文件,在 methods 中增加一個(gè)動畫監(jiān)聽方法,并在 mounted 中初始化監(jiān)聽。

<template>
  <div id="app">
    <router-view></router-view>
    <a href="javascript:; @click="backTop">回頂部</a>
  </div>
</template>
<script>
  export default {
    name: 'app',

    mounted: function () {
      // 初始化 TweenJs 監(jiān)聽
      this.tweenAni();
    },

    methods: {

      // TweenJs 動畫監(jiān)聽
      tweenAni: function () {
        requestAnimationFrame(this.tweenAni);
        TWEEN.update(); // ================================= 關(guān)鍵是這句
      },

      // 回到頂部
      backTop: function () {
        // 稍后
      },

    }

  }

</script>
<style>
  /* 略 */
</style>

如上面的代碼,我們點(diǎn)擊【回頂部】按鈕時(shí),會執(zhí)行一個(gè)頁面滾動到頂部的動畫。

2.3 配置并開始動畫

接下來就是回到頂部的邏輯了:

<template>
  <div id="app">
    <router-view></router-view>
    <a href="javascript:; @click="backTop">回頂部</a>
  </div>
</template>
<script>
  export default {
    name: 'app',

    mounted: function () {
      // 初始化 TweenJs 監(jiān)聽
      this.tweenAni();
    },

    methods: {

      // TweenJs 動畫監(jiān)聽
      tweenAni: function () {
        requestAnimationFrame(this.tweenAni);
        TWEEN.update(); // ================================= 關(guān)鍵是這句
      },

      // 回到頂部
      backTop: function () {
        // 獲取當(dāng)前的窗口滾動距離
        let AppScrollTopNow = {
            y: window.scrollY
          }, // ================================= 定義一個(gè)初始位置
          AppScrollTopEnd = {
            y: 0
          } ;// ================================= 定義一個(gè)結(jié)束位置

        // 設(shè)置新的緩動動畫
        new TWEEN.Tween(AppScrollTopNow) // 傳入開始位置
          .to(AppScrollTopEnd, 600) // 指定時(shí)間內(nèi)完成結(jié)束位置
          .easing(TWEEN.Easing.Quadratic.Out) // 緩動方法名
          .onUpdate(() => {
            // 上面的值更新時(shí)執(zhí)行的設(shè)置
            document.documentElement.scrollTop = AppScrollTopNow.y;
            document.body.scrollTop = AppScrollTopNow.y;
          })
          .start();// ================================= 不要忘了合適的時(shí)候啟動動畫
      },

    }

  }

</script>
<style>
  /* 略 */
</style>

配置完后,在瀏覽器設(shè)置運(yùn)行并點(diǎn)擊【回頂部】按鈕即可查看到效果(還需要設(shè)置一個(gè)高度比較高的
div 來把頁面撐高,否則看不到效果·····!+_+
)。

三、總結(jié)

可以看出,TweenJs 是使用一組數(shù)字的變化控制動畫的,按照官方的說法,其可以控制粒度比較細(xì)的動畫效果,個(gè)人感覺,要想用好 TweenJs 還是要會一點(diǎn)算法的。

參考文檔

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,200評論 4 61
  • 今天參加了一個(gè)資本運(yùn)作公司組辦的會議,議題主要是股權(quán)分配激勵(lì)機(jī)制,商業(yè)模式和策劃三個(gè)議題。尋找資本的預(yù)期沒有達(dá)到,...
    先勝而后戰(zhàn)閱讀 269評論 0 0
  • 他們的思想猶如一尊佛像般不可褻瀆,認(rèn)為自己是那么的獨(dú)一無二,認(rèn)為自己是這樣那樣的前衛(wèi),他們是這個(gè)世界的神靈,帶領(lǐng)著...
    人道與人倫閱讀 299評論 0 0