效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0d6042c1298712f842df8e635fdc83db.gif#pic_center)
方法一:
<el-button type="primary" @click="action">开始运动</el-button>
methods:
action(){
var position = { x: -50, y: 0 }
var target = { x: 400, y: 50 }
var tween = new TWEEN.Tween(position).to(target, 2000).easing(TWEEN.Easing.Quadratic.InOut)
tween.onUpdate(() => {
this.objects.position.x = position.x
this.objects.position.y = position.y
})
tween.start()
},
animate () {
requestAnimationFrame(this.animate)
TWEEN.update() 一定要在动画循环函数里面更新TWEEN!!
this.renderer.render(this.scene, this.camera)
}
方法二:
<el-button type="primary" @click="action">开始运动</el-button>
methods:
action(){
var position2 = this.objects[0].position
var target2 = { x: 400, y: 50, z: 0 }
var tween2 = new TWEEN.Tween(position2).to(target2, 2000).easing(TWEEN.Easing.Quadratic.InOut)
tween2.start()
},
animate () {
requestAnimationFrame(this.animate)
TWEEN.update() 一定要在动画循环函数里面更新TWEEN!!
this.renderer.render(this.scene, this.camera)
}