TweenJs 是一個(gè)第三方的 javascript 動畫庫，可以輕松實(shí)現(xiàn)各種緩動動畫效果。
TweenJs
一、TweenJs 的基本用法是：
- 載入 TweenJs 庫（如：
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>） - 啟用
requestAnimationFrame; - 配置并開始動畫;
二、小例子 - 平滑滾動到頁面頂部
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)算法的。
