Question

如何将动画转换为requestAnimationframe。我正在使用setTimeout来执行动画，并且它在不同的浏览器中存在问题。动画在chrome和safare中运行良好，但在firefox和IE中，动画的工作方式不同。这是我Jsfiddle code。

setTimeout(function() {$('.sub-copy').fadeIn(1000);}, 6300);
setTimeout(function() {$('#girl-arm').hide(500);}, 2000);
setTimeout(function() {$('#dis').fadeIn(1000);},6300);
setTimeout(function() {$('#desk-car').hide();},1);
setTimeout(function() {$('#desk-car').fadeIn(1000);}, 3000);
setTimeout(function() {$('#desk-car').fadeOut(1000);}, 6000);
setTimeout(function() {$('#wheel-l').fadeIn(1000);}, 3300);
setTimeout(function() {$('#wheel-r').fadeIn(1000);}, 3300);
setTimeout(function() {$('#girl-1').fadeIn(200);}, 300);
setTimeout(function() {$('#window-l').fadeIn(200);}, 300);
setTimeout(function() {$('#window-r').fadeIn(200);}, 300);
setTimeout(function() {$('#window-l').fadeOut(1000);}, 6000)
setTimeout(function() {$('#window-r').fadeOut(1000);}, 6000)
setTimeout(function() {$('#clock-lamp').fadeIn(200);},300);
setTimeout(function() {$('#girl-1').fadeOut(500);},2800);
setTimeout(function() {$('#clock-lamp').fadeOut(500);},2800);
//setTimeout(function() {$('#clock2').fadeIn(500);},2500);
setTimeout(function(){$("#clock2").fadeIn(function(){
  $(this).animate({'left': '-=110px'},3000);
});},3000);
setTimeout(function() {$('#clock2').fadeOut(200);},6000);
setTimeout(function() {$('.sub-copy').fadeOut(500);}, 10000);
setTimeout(function() {$('#dis').fadeOut(500);}, 10000);
}

我想将其转换为requestAnimationFrame。我是javascript的新手并且读到setTimeout不是多个动画的想法。在我的情况下，它在firefox和IE中的工作方式不同，在汽车消失后车轮正在旋转。

或者有没有更好的方法来执行此动画，请建议我在所有浏览器中应该保持一致的更好方法。帮助将不胜感激。提前致谢

Answer 1

为了清楚起见：requestAnimationFrame是构建单一动画的功能，例如jQuery中的fadeIn / fadeOut / hide / animate。您不会使用它来触发视频中的不同场景，就像您在setTimeout示例中所做的那样。

许多库构建在requestAnimationFrame（以及其他合适的回退方法）上，以替换jQuery转换。他们还可以构建更复杂的场景，这可能是您感兴趣的。查看其主页上的GreenSock示例。这种类型的替代方案应该为您提供更强大的技术来构建类似广告（类似）的视频。

正如问题评论中指出的那样，你也可以尝试一下CSS动画，但是对于整个视频来说这可能会变得相当复杂，而JavaScript（可能通过上面提到的库）可以轻松控制很多

要回到原来的问题，并忽略切换到其他技术的可能性，很有可能您的不同场景变得不同步，因为所有场景都是从相同的初始时间原点定义的（此时您的setTimeout已被执行）。 setTimeout函数不保证您的回调函数将在指定的时间后完全执行：此时它将只是排队，并且它必须等待JavaScript线程在启动之前变得可用。因此，如果CPU处于许多动画的中间，您的回调可能需要等待一段时间才能启动，然后您将失去同步。此外，根据客户端浏览器，CPU以及当前的CPU负载，您将获得不同的结果！

为了解决这个问题，您可以简单地将“视频”拆分到各个场景中，并仅在当前场景结束时为下一个场景定义新的超时，即嵌套在前一个超时的回调函数中。这样，即使当前场景占用大量CPU，它也会比预期的持续时间稍长，并且只会延迟下一个场景，而不是在下一个场景已经开始时完成（如果它有机会）。

演示：https://jsfiddle.net/t1qjzfuf/1/

setTimeout动画不一致

1 个答案: