1、安装
2、变幻的数字案列
<template>
<div class="compA">
<input v-model.number="num" type="number" step="20">
<p>{{ animatedNumber }}</p>
</div>
</template>
<script>
import TWEEN from '@tweenjs/tween.js'
export default {
data () {
return {
num: 0,
animatedNumber: 0
}
},
watch: {
num: function (newValue, oldValue) {
this.myTween(newValue, oldValue)
}
},
methods: {
myTween (newValue, oldValue) {
new TWEEN.Tween({ tweeningValue: oldValue }) // 初始值
.to({ tweeningValue: newValue }, 500) // 最终值
.onUpdate((object) => {
// 在初始值到最终值的过程中会定时给你返回一个数，把这个数挂在要显示的元素上即可
this.animatedNumber = object.tweeningValue.toFixed(0)
})
.start()
this.animate()
},
animate () {
requestAnimationFrame(this.animate)
TWEEN.update()
}
}
}
</script>
<style scoped>
</style>
3、水平滚动的标题
<template>
<div>
<button @click="move">动画</button>
<div ref="myElement" style="position: absolute; left: 50px; top: 150px; font-size: 100px">你好,Tween.js!</div>
</div>
</template>
<script>
import TWEEN from '@tweenjs/tween.js'
export default {
data () {
return {
}
},
methods: {
move () {
const el = this.$refs.myElement
new TWEEN.Tween({ x: 50 })
.to({ x: 200 }, 1500)
.onUpdate(function (obj) {
el.style.left = `${obj.x}px`
})
.start()
this.animate()
},
animate () {
requestAnimationFrame(this.animate)
TWEEN.update()
}
}
}
</script>
<style scoped>
</style>
