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动画能否运行的关键
}
}
}
</script>
2.2通过2.1已将TweenJs初始化到我们的项目中，接下来我们将实现一个简单的动画。
<template>
<img ref="people" src='../../static/images/logo-02-02.png'> <
</template>
<script>
import TWEEN from '../static/js/tween.min.js'
export default {
components: {},
data() {
return {}
},
mounted() {
// 初始化 TweenJs 监听
this.animate()
// 加载完成后执行动画
this.animatePeople()
},
methods: {
animate() {
requestAnimationFrame(this.animate)
TWEEN.update() // 这里将是tweenJs动画能否运行的关键
}，
animatePeople() {
let boxFly = this.$refs.people
let coords = {x:-30,y:10}
let tween1 = new TWEEN.Tween(coords).to({
x: 0,
y: 0
}, 1000).easing(TWEEN.Easing.Linear.None)
Let tween2 = new TWEEN.Tween(coords).to({
x: -30,
y: 10
}, 1000).easing(TWEEN.Easing.Linear.None)
let update = ()=> {
boxFly.style.setProperty('left', coords.x + '%')
boxFly.style.setProperty('top', coords.y + '%')
}
tween1.onUpdate(update) // 更新动画
tween2.onUpdate(update)
tween1.chain(tween2) // 实现动画的往复运动
Tween2.chain(tween1)
tween1.start() // 启动动画
},
}
}
</script>
2.3 通过运行2.2 里的代码（这里省略样式的布局），便可以看到了一个往复运动的动画。
三．接下来我们说一说补间动画的控制
start 和 stop
到目前为止，我们已经了解了Tween.start方法，但是还有更多的方法来控制单个补间。 也许最重要的一个是 star 对应的方法：停止 。 如果你想取消一个补间，只要调用这个方法通过一个单独的补间:
tween.stop();
停止一个从未开始或已经停止的补间没有任何效果。
start 方法接受一个参数 time。如果你使用它，那么补间不会立即开始，直到特定时刻，否则会尽快启动（i.e 即在下次调用 TWEEN.update）。
update
补间也有一个更新的方法---这实际上是由 TWEEN.update 调用的。 你通常不需要直接调用它，除非你是个 疯狂的hacker。
chain
当你顺序排列不同的补间时，事情会变得有趣，例如在上一个补间结束的时候立即启动另外一个补间。我们称这为链式补间，这使用 chain 方法去做。因此，为了使 tweenB 在 tewwnA 启动：
tweenA.chain(tweenB)
或者，对于一个无限的链式，设置tweenA一旦tweenB完成就开始：
tweenA.chain(tweenB)
tweenB.chain(tweenA)
在其他情况下，您可能需要将多个补间链接到另一个补间，以使它们（链接的补间）同时开始动画：
tweenA.chain(tweenB,tweenC)
tweenA.chain(tweenB,tweenC)
警告：调用 tweenA.chain（tweenB） 实际上修改了tweenA，所以tweenA总是在tweenA完成时启动。 chain 的返回值只是tweenA，不是一个新的tween。
repeat
如果你想让一个补间永远重复，你可以链接到自己，但更好的方法是使用 repeat 方法。 它接受一个参数，描述第一个补间完成后需要多少次重复
tween.repeat(10); // 循环10次
tween.repeat(Infinity); // 无限循环
补间的总次数将是重复参数加上一个初始补间。
四．总结
TweenJs 是使用一组数字的变化控制动画的，按照官方的说法，其可以控制粒度比较细的动画效果，结合threejs可以发挥其优势，感兴趣的朋友可以去看看threejs。
若需要了解更多，可添加VX：onevtu1