🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 动画优化 > * 动画效果在缺少硬件加速支持的情况下反应缓慢,例如手机客户端。 > > > * 特效应该只在确实能改善用户体验时才使用,而不应用于炫耀或者弥补功能与可用性上的缺陷。 > * 至少要给用户一个选择可以禁用动画效果。 > * 设置动画元素为absolute或fixed。 > * `position: static`或`position: relative`元素应用动画效果会造成频繁的`reflow`。 > * `position: absolute`或`position: fixed`的元素应用动画效果只需要`repaint`。 > * 使用一个`timer`完成多个元素动画。 > * `setInterval`和`setTimeout`是两个常用的实现动画的接口,用以间隔更新元素的风格与布局。。 > * 动画效果的帧率最优化的情况是使用一个`timer`完成多个对象的动画效果,其原因在于多个`timer`的调用本身就会损耗一定性能。 > > > > ~~~ > setInterval(function() { > animateFirst(''); > }, 10); > setInterval(function() { > animateSecond(''); > }, 10); > ~~~ > > > > 使用同一个`timer`。 > > > > ~~~ > setInterval(function() { > animateFirst(''); > animateSecond(''); > }, 10); > ~~~ > > > * 以脚本为基础的动画,由浏览器控制动画的更新频率。