Nuxt＆Three.js requestAnimationFrame缓动

问题描述

我正在使用Nuxt向Three.js场景添加一个简单的过渡，我想添加缓动，但是我很挣扎。

这是我目前的工作方法（不放松）

方法：

frameAnimate () {
      this.time++
      this.pointCloud.rotation.x += 0.02
      this.pointCloud.rotation.y += 0.02
      this.pointCloudTwo.rotation.x += 0.02
      this.pointCloudTwo.rotation.y += 0.02
      if (this.time < 50) {
        window.requestAnimationFrame(this.frameAnimate)
      } else if (this.time === 50) {
        window.cancelAnimationFrame(this.frameAnimate)
        this.time = 0
      }
    },

colourA () {
      this.pointCloud.material.color.set('violet')
      this.frameAnimate()
    }

点击

<li @click="colourA"></li>

这是我尝试添加缓动的尝试，它不会给我带来任何错误，但是无法正常工作或完成动画。

方法：

inOutQuad (n) {
      n *= 2
      if (n < 1) {
        return 0.5 * n * n
      }
      return -0.5 * (--n * (-2) - 1)
    },

frameAnimate () {
      this.time++
      this.val = this.inOutQuad(this.time)
      this.scene.rotation.y += 0.05
      this.pointCloud.rotation.x += 0.02
      this.pointCloud.rotation.y += 0.02
      this.pointCloudTwo.rotation.x += 0.02
      this.pointCloudTwo.rotation.y += 0.02
      if (this.val < 40) {
        window.requestAnimationFrame(this.frameAnimate)
      } else if (this.val === 40) {
        window.cancelAnimationFrame(this.frameAnimate)
        this.time = 0
        this.val = 0
      }
    }

colourA () {
      this.pointCloud.material.color.set('violet')
      this.frameAnimate()
    }

点击

<li @click="colourA"></li>

任何想法或指示都将不胜感激

欢呼

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）