如何解决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 举报,一经查实,本站将立刻删除。