tweenjs的简单使用启动暂停和继续

tweenjs使用介绍

1.tweenjs使用方法，记录暂停和继续配合threejs实现机械臂的动画

start()
stop()停止不能继续执行
pause()  // 停止可以使用resume
resume() // 恢复动画，在使用pause才可以继续，使用stop不能执行

机械臂动画处理，暂停和继续

// 机械臂装载物料运动
  robotLoadingAnimation(time) {
    const start = Object.assign({}, defaultRotation)
    const end = Object.assign({}, loadingRotation)
    this.animationCreate(start, end, time)
  }

  // 机械臂移动卸载物料
  robotUninstallAnimation(time) {
    const start = Object.assign({}, loadingRotation)
    const end = Object.assign({}, unloadingRotation)
    this.animationCreate(start, end, time)
  }

  // 恢复初始位置
  robotDefaultAimation(time) {
    const start = Object.assign({}, unloadingRotation)
    const end = Object.assign({}, defaultRotation)
    this.animationCreate(start, end, time)
  }

  // 机械臂动画处理
  animationCreate (start, end, time, cb) {
    this.robotAnimation = new TWEEN.Tween( start )
      .to( end, 1000 )
      .easing( TWEEN.Easing.Quadratic.Out )
      .onUpdate(val => {
        console.log(val);
        Object.keys(val).forEach(key => {
          this.kinematics.setJointValue(key, val[key])
        })
      })
      .onComplete(() => {
        cb && cb()
      }).start()
  }
  // 机械臂动画暂停
  animationStop() {
    this.robotAnimation && this.robotAnimation.pause()
  }
  animationStart() {
    this.robotAnimation && this.robotAnimation.resume()
  }

tweenjs使用简单例子

// 测试tween
    ceshiTween() {
      const position = { x: 0, y: 10 }
      const arr = [
        { x: 10, y: 20 },
        { x: 20, y: 30 },
        { x: 30, y: 40 },
        { x: 40, y: 50 },
        { x: 50, y: 60 },
        { x: 60, y: 70 },
        { x: 70, y: 80 },
        { x: 80, y: 90 },
        { x: 90, y: 100 }
      ]
      const data = { x: 100 }
      let t = new Date().getTime()
      this.tweenAnimation = new TWEEN.Tween(data)
        .to({ x: 200 }, 5000)
        .onUpdate(val => {
          console.log(val.x);
        }).start()
      const b = new TWEEN.Tween(data).to({ x: 0 }).onUpdate(val => {
        console.log(val);
      })
      this.tweenAnimation.chain(b)
    }