Vue.js 中使用缓动动画库 TweenJs

TweenJs 是一个第三方的 javascript 动画库，可以轻松实现各种缓动动画效果。

TweenJs

一、TweenJs 的基本用法是：

1. 载入 TweenJs 库（如：）
2. 启用 requestAnimationFrame;
3. 配置并开始动画;

二、小例子 - 平滑滚动到页面顶部

2.1 载入 TweenJs 库

打开 vue-cli 构建的项目的 index.html，在底部添加 TweenJs 库，如：

2.2 启用 requestAnimationFrame;

打开【src/App.vue】文件，在 methods 中增加一个动画监听方法，并在 mounted 中初始化监听。

如上面的代码，我们点击【回顶部】按钮时，会执行一个页面滚动到顶部的动画。

2.3 配置并开始动画

接下来就是回到顶部的逻辑了：

配置完后，在浏览器设置运行并点击【回顶部】按钮即可查看到效果（还需要设置一个高度比较高的
div 来把页面撑高，否则看不到效果·····!+_+ ）。

三、总结

可以看出，TweenJs 是使用一组数字的变化控制动画的，按照官方的说法，其可以控制粒度比较细的动画效果，个人感觉，要想用好 TweenJs 还是要会一点算法的。

参考文档

• http://www.zhangxinxu.com/study/201612/how-to-use-tween-js.html 作者：张鑫旭