tweenjs-实现threejs的转场动画（基于vue）

- 日理万妓 2022-09-05 05:23 618阅读 0赞

## 注意！文章主讲tweenjs的使用，省去了threejs部分的代码，请自行添加！ ##

[参考博文][Link 1]

## 链式补间：tween.chain ##

如果有多组补间动画，想要a组动画结束后立即启动b组动画，则需要使用tweena.chain(tweenb)

## 效果图: ##

![在这里插入图片描述][b5e76a5c555b4f22aabd0084831a8add.gif_pic_center]

## 1、引入tweenjs ##

import * as TWEEN from '@/assets/js/Tween'

## 2、使用 ##

<el-button @click="action">开始运动</el-button>

data：
    p1: {  x: 0, y: 2, z: 1000 }
    
    methods：
    action () { 
          var tweena = this.cameraCon({  x: 20, y: 100, z: 100 }, 4000)
          var tweenb = this.cameraCon({  x: 200, y: 50, z: -100 }, 9000)
          //var tweenc = this.cameraCon({ x: -20, y: 100, z: 100 }, 9000)
          //var tweend = this.cameraCon({ x: 0, y: 50, z: 200 }, 4000)
          tweena.chain(tweenb)
          //tweenb.chain(tweenc)
          //tweenc.chain(tweend)
          // tweend.chain(tweena)
          tweena.start()
    }，
    cameraCon (p2, time) { 
          var tween1 = new TWEEN.Tween(this.p1).to(p2, time).easing(TWEEN.Easing.Quadratic.InOut)
          tween1.onUpdate(() => { 
            this.camera.position.set(this.p1.x, this.p1.y, this.p1.z)
            this.camera.lookAt(0, 0, 0)
            // this.controls.target.set(0, 0, 0) // 确保镜头移动后，视觉中心还在圆点处
            // this.controls.update()
          })
          return tween1
    },
    render(){   一定要在动画循环函数里面更新TWEEN！
    	  requestAnimationFrame(this.animate)
          TWEEN.update()
          this.renderer.render(this.scene, this.camera)
    }

[Link 1]: https://blog.csdn.net/lin5165352/article/details/85708690
[b5e76a5c555b4f22aabd0084831a8add.gif_pic_center]: /images/20220829/bfcf59b8551746a9ae68dfc9ea5b725c.png