我使用three.js 编写了一个小动画函数进行3D 渲染（下面是完整的测试应用程序）：
每次我点击屏幕时，立方体都会根据函数调用中描述的动画旋转。但我期待如果立方体已经在一个动画下制作动画，添加另一个动画会导致它闪烁，因为相同的属性正在通过多个动画调用进行动画处理。但这不是最后一个动画停止并且新动画接管的情况，即使我最后的回调函数显示旧动画函数仍在运行！那么为什么当发送多次点击时立方体不闪烁呢？
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script src="three-mini.js"></script>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script>
var animate = function(obj, prop, targetValue, length, callback) {
var startTime = Date.now(), inverseLength = 1 / length, startValue = obj[prop];
if( typeof targetValue === "string") {
if(targetValue.substring(0, 2) === "+=") {
targetValue = obj[prop] + Number(targetValue.substring(2));
} else {
targetValue = obj[prop] - Number(targetValue.substring(2));
}
}
var animateProp = function() {
var elapsed = (Date.now() - startTime) * inverseLength;
if(elapsed >= 1) {
obj[prop] = targetValue;
if( callback instanceof Function) {
requestAnimationFrame(callback);
}
return;
} else {
obj[prop] = (startValue - targetValue) * (Math.cos(elapsed * Math.PI) + 1) * 0.5 + targetValue;
requestAnimationFrame(animateProp);
}
};
requestAnimationFrame(animateProp);
};
var camera, scene, renderer;
var geometry, material, mesh;
init();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({
color : 0xff0000,
wireframe : true
});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.domElement.addEventListener('click', function() {
animate(mesh.rotation, "x", "-=" + Math.PI * 2 * 10, 5000, function() {
alert("CALLED BACK!")
});
animate(mesh.rotation, "y", "-=" + Math.PI * 2 * 10, 15000, function() {
});
});
window.addEventListener('load', render);
window.addEventListener('resize', function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
}
function render() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame(render);
renderer.render(scene, camera);
}
</script>
</body>
</html>
更新 1：
为了找出发生了什么，我添加了更多的网格并以不同的方式对其进行动画处理，代码如下，它为每个后续单击设置每个网格的动画，并首先通过旋转对其进行动画处理，然后将它们向前移动，然后向后移动，然后返回回转。您可以在不停止旋转动画的情况下为位置设置动画，并且可以在不停止先前动画的情况下同时为另一个网格设置动画，那么当多个动画在同一个网格和相同属性上运行时，为什么动画不闪烁?
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script src="three-mini.js"></script>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script>
var animate = function(obj, prop, targetValue, length, callback) {
var startTime = Date.now(), inverseLength = 1 / length, startValue = obj[prop];
if( typeof targetValue === "string") {
if(targetValue.substring(0, 2) === "+=") {
targetValue = obj[prop] + Number(targetValue.substring(2));
} else {
targetValue = obj[prop] - Number(targetValue.substring(2));
}
}
var animateProp = function() {
var elapsed = (Date.now() - startTime) * inverseLength;
if(elapsed >= 1) {
obj[prop] = targetValue;
if( callback instanceof Function) {
requestAnimationFrame(callback);
}
return;
} else {
obj[prop] = (startValue - targetValue) * (Math.cos(elapsed * Math.PI) + 1) * 0.5 + targetValue;
requestAnimationFrame(animateProp);
}
};
requestAnimationFrame(animateProp);
};
var camera, scene, renderer, geometry, material, mesh1, mesh2, mesh3, mesh4, mesh5, i = 0, j = 0;
init();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshBasicMaterial({
color : 0xff0000,
wireframe : true
});
mesh1 = new THREE.Mesh(geometry, material);
scene.add(mesh1);
mesh2 = new THREE.Mesh(geometry, material);
mesh2.position.x = mesh2.position.y = mesh2.position.z = 200;
scene.add(mesh2);
mesh3 = new THREE.Mesh(geometry, material);
mesh3.position.x = mesh3.position.z = 200;
mesh3.position.y = -200;
scene.add(mesh3);
mesh4 = new THREE.Mesh(geometry, material);
mesh4.position.y = mesh4.position.z = 200;
mesh4.position.x = -200;
scene.add(mesh4);
mesh5 = new THREE.Mesh(geometry, material);
mesh5.position.y = mesh5.position.x = -200;
mesh5.position.z = 200;
scene.add(mesh5);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.domElement.addEventListener('click', function() {
var mesh;
if(i === 5) {
i = 0;
j++;
if(j === 3) {
j = 0;
}
}
i++;
var mesh = window['mesh' + i];
if(j === 1) {
animate(mesh.position, "z", "+=" + 500, 2000, function() {
//alert("CALLED BACK!")
});
return;
}
if(j === 2) {
animate(mesh.position, "z", "-=" + 500, 3000, function() {
//alert("CALLED BACK!")
}); retunr;
}
animate(mesh.rotation, "x", "-=" + Math.PI * 2 * 5, 5000, function() {
//alert("CALLED BACK!")
});
animate(mesh.rotation, "y", "-=" + Math.PI * 2 * 6, 10000, function() {
});
});
window.addEventListener('load', render);
window.addEventListener('resize', function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
}
function render() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame(render);
renderer.render(scene, camera);
}
</script>
</body>
</html>
对 WestLangley 的评论：让我试着解释一下，我很抱歉不清楚。假设我单击一次，它会从position.x = 0to开始动画targetValue: '+=200'。然后在该动画进行到一半时，我再次单击它，这一次将在负 x 方向上进行动画处理position.x = 100（因为它从第一个动画的中途开始）并且具有targetValue: '-=200'. 现在我希望第一个动画仍在运行，因此它继续从x=100to动画x=200，第二个动画现在也在从x=100to运行x=-100，所以当每个动画函数被调用时，我希望看到立方体左右跳跃，直到第一个动画结束，然后第二个动画可以不受阻碍地继续。这是我所期待的，因此我期待它闪烁。但显然多个动画功能同时运行，但只有最新的一个对更新网格属性有任何影响。:S 至少据我所知。
我对此的主要担心是，我可以从实验中看出“隐藏的”动画调用仍在处理中，因此丢弃了宝贵的处理器周期，这也导致在回调函数中添加动画调用时出现问题。为此，我主要关心的是如何停止这些“隐藏”的动画调用？