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

最新推荐文章于 2024-08-09 09:38:32 发布

骑着骆驼去看海

最新推荐文章于 2024-08-09 09:38:32 发布

阅读量1.7k

点赞数 1

分类专栏： three 文章标签： javascript 动画开发语言

本文链接：https://blog.csdn.net/qq_43743661/article/details/126405733

版权

three 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文介绍了如何使用TWEEN.js库来控制Three.js中的机械臂动画，包括机械臂装载、卸载物料及恢复初始位置的动画处理。通过start(), stop(), pause()和resume()方法实现动画的开始、停止、暂停和恢复。此外，还提供了一个简单的TWEEN.js使用示例，展示了对象位置变化的动画效果。

摘要由CSDN通过智能技术生成

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)
    }