问题描述
补间我的camera.position时遇到问题。我用最少的代码创建了一个Codepen,只是为了重现我的问题,然后注释所有代码。我还放了很多console.log()进行调试。
起点是我的相机位置
camera.position.z = 30;
和我的tween001
var tween001 = gsap.to(camera.position,{ delay:2,duration:5,z:60,onUpdate:function(){
camera.updateProjectionMatrix();
console.log("play");
},onComplete:function(){console.log("complete");},ease:"elastic"});
所以补间将把我的相机从Z = 30移动到Z = 60
它的工作正常,但是...当用户移动相机时,如果用户在3d上移动/移动/单击它的暂停“ tween001.pause()”的射击和事件监听器,我希望tween001使用“实际”相机.postion,而不是补间001着火时使用的camera.postion。
再次播放tween001或从暂停中恢复时,使用的起始点是默认值x = 0 y = 0 z = 30。
空闲功能再次播放tween001
window.setInterval(checkTime,1000);// every 1 second launch checktime()
function checkTime() { //idleCounter get 1 every second and at 5 second coz timeout is 5 checktime relaunch the tween001
if (idlecounter < timeout) {
idlecounter++;
//console.log("++ ");
} else if (idlecounter == timeout) {
tween001.play();
console.log('timeout');
}
}
解决方法
因此,您必须了解GSAP假定它是唯一控制camera.position
的东西。因此,当您声明gsap.to(camera.position,{z: 60})
时,它将在内部存储开始位置(30)和结束位置(60)以构建其时间轴。它不知道您已经用鼠标滚轮更改了z位置,因此,当您调用.play()
时,仍会假设您希望将其从30转到60。
您要做的是每次都重新初始化一个新的补间,因此当您要重播它时必须查找起始位置:
var tween001;
function doTween() {
tween001 = gsap.to(camera.position,{ delay:2,duration:5,z:60,ease:"elastic",onComplete:function(){
// camera.updateProjectionMatrix();
console.log("complete");
}});
}
- 请注意,我在全局范围内的函数外部声明了
var tween001
,因此您仍然可以在需要时调用tween001.pause()
- 更改位置时无需更新投影矩阵。
现在,当您准备再次开始动画时,可以使用tween001.play()
而不是使用doTween()
,它会建立一个新的时间轴来重新读取相机的当前z位置开始动画:
// ...
else if (idlecounter == timeout) {
doTween();
idlecounter = 0;
}