TweenJs在vuejs中的使用

TweenJS 是一个简单但强大的 Javascript 动画库。它支持渐变的数字对象属性&CSS样式属性，并允许链接补间动画和行动结合起来，创造出复杂的序列。本文将详细介绍tween.js的使用

一．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以下的列子将以vue项目作为举例，引入的方式以本地方式为例。在 methods 中增加一个动画监听方法，并在 mounted 中初始化监听。

<script>

import TWEEN from '../static/js/tween.min.js'

export default {

components: {},

data() {

return {}

},

mounted() {

            // // 初始化 TweenJs 监听

            this.animate()

},

methods: {

animate() {

requestAnimationFrame(this.animate)

TWEEN.update() // 这里将是tweenJs动画能否运行的关键