我们经常面临一个抉择:是使用JavaScript的动画还是使用CSS的动画,下面将对比一下这两种方式
JS动画
优点:JavaScript的动画与CSS预先定义好的动画不同,可以在其动画过程中对其进行控制:开始、暂停、回放、中止、取消都是可以做到的。而且一些动画效果,比如视差滚动效果,只有JavaScript能够完成
缺点:JavaScript在浏览器的主线程中运行,而其中还有很多其他需要运行的JavaScript、样式计算、布局、绘制等对其干扰。这也就导致了线程可能出现阻塞,从而造成丢帧的情况。
CSS动画
优点:浏览器可以对动画进行优化。它必要时可以创建图层,然后在主线程之外运行。
缺点:缺乏强大的控制能力。而且很难以有意义的方式结合到一起,使得动画变得复杂且易于出问题。