Vue.js 中使用缓动动画库 TweenJs
2017-12-16 本文已影响2286人
djyuning
TweenJs 是一个第三方的 javascript 动画库，可以轻松实现各种缓动动画效果。
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 构建的项目的 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 中增加一个动画监听方法，并在 mounted 中初始化监听。
<template>
<div id="app">
<router-view></router-view>
<a href="javascript:; @click="backTop">回顶部</a>
</div>
</template>
<script>
export default {
name: 'app',
mounted: function () {
// 初始化 TweenJs 监听
this.tweenAni();
},
methods: {
// TweenJs 动画监听
tweenAni: function () {
requestAnimationFrame(this.tweenAni);
TWEEN.update(); // ================================= 关键是这句
},
// 回到顶部
backTop: function () {
// 稍后
},
}
}
</script>
<style>
/* 略 */
</style>
如上面的代码，我们点击【回顶部】按钮时，会执行一个页面滚动到顶部的动画。
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 监听
this.tweenAni();
},
methods: {
// TweenJs 动画监听
tweenAni: function () {
requestAnimationFrame(this.tweenAni);
TWEEN.update(); // ================================= 关键是这句
},
// 回到顶部
backTop: function () {
// 获取当前的窗口滚动距离
let AppScrollTopNow = {
y: window.scrollY
}, // ================================= 定义一个初始位置
AppScrollTopEnd = {
y: 0
} ;// ================================= 定义一个结束位置
// 设置新的缓动动画
new TWEEN.Tween(AppScrollTopNow) // 传入开始位置
.to(AppScrollTopEnd, 600) // 指定时间内完成结束位置
.easing(TWEEN.Easing.Quadratic.Out) // 缓动方法名
.onUpdate(() => {
// 上面的值更新时执行的设置
document.documentElement.scrollTop = AppScrollTopNow.y;
document.body.scrollTop = AppScrollTopNow.y;
})
.start();// ================================= 不要忘了合适的时候启动动画
},
}
}
</script>
<style>
/* 略 */
</style>
配置完后，在浏览器设置运行并点击【回顶部】按钮即可查看到效果（还需要设置一个高度比较高的
div 来把页面撑高，否则看不到效果·····!+_+ ）。
三、总结
可以看出，TweenJs 是使用一组数字的变化控制动画的，按照官方的说法，其可以控制粒度比较细的动画效果，个人感觉，要想用好 TweenJs 还是要会一点算法的。
