--- theme: awesome-green --- >「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」 ## 前言小叙 FPS 全称：**Frames per second**，即 **【每秒帧数】** 的意思。通常来讲，当动画的每秒帧数低于 12 （即 **12 FPS** 以下）时，我们的大脑就能快速从动画中区分出一些静止的图片，所以此时的动画**并不是**无缝动画。 ![vertical-syn-dh02.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9739876a7e414499ada77df939e08817~tplv-k3u1fbpfcp-watermark.image) 一旦播放速率（每秒帧数）达到 **16-24 FPS** 时，大脑就会认为这些画面是连续移动的场景，看起来就是影片的效果了（大部分数字电影拍摄是每秒 24 帧）。所以，我们可以大致了解到：**FPS 越高，画面越流畅！** ![40255c644548a1c4240b2d6ed32101f3.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/724a85b2880a4ff6bbc1d039961c55ba~tplv-k3u1fbpfcp-watermark.image) 明白这些后，我们可以便可开始本篇正题了：**_CSS3 实现 60 FPS 的动画效果！_** ## 常规操作 **本瓜知道你会说：“CSS3 动画，有手就行！”** 知道我们的目标是实现下图动画效果时， ![0_rXGvLKSlZGRmz4Jd_.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dacbe0ad7bc84aa4bbcccb2e565ebc27~tplv-k3u1fbpfcp-watermark.image) 你信手拈来，一顿操作！很棒，恭喜你能轻松写出以下这段**超级常规的** CSS3 动画~ ```

.app-menu { left: -300px; transition: left 300ms linear; } .app-menu-open .app-menu { left: 0px; transition: left 300ms linear; } ``` 它的实现效果： ![0_ZWyuzfeBSbFbQjOy_.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8fddb2619934855ad5d88be994de229~tplv-k3u1fbpfcp-watermark.image) 你确实做到了，**但，到此为止吗？这次，不止于此！** 于是，咱打开控制台 **Performance Ctrl+E** 进行录制这段动画来**进一步分析分析**。 [![InlDJh.md.png](https://s3.jpg.cm/2021/07/02/InlDJh.md.png)](https://imagelol.com/image/InlDJh) 我们可以看到它的 **Timeline** 中 **FPS 指标（绿色部分）** [![InlZIW.md.png](https://s3.jpg.cm/2021/07/02/InlZIW.md.png)](https://imagelol.com/image/InlZIW) >* 图中绿色部分的高点表示以 60 FPS 进行渲染，低点则表示以低于 60 FPS 进行渲染； > >* 红色条表示卡顿；我们发现它存在问题： **1. 绿色部分的高度并不一致，说明 FPS 不稳定；** **2. 绿色部分有相当一部分处在低点，说明 FPS 不流畅；** **3. 存在很多红色条，说明动画很卡；** 所以，结论是：我们这种方法实现的 CSS3 动画，并不流畅！！ **我们期望的是：高度齐平，绿色都处于高点，红色条越少越好。** 别方，带着期望，继续往下看！ ## 进阶操作你非常棒，并且异于常人！！你想到了使用 **Transform** 来实现！！ CSS 代码： ``` .app-menu { -webkit-transform: translateX(-100%); transform: translateX(-100%); transition: transform 300ms linear; } .app-menu-open .app-menu { -webkit-transform: none; transform: none; transition: transform 300ms linear; } ``` 实现效果： ![2222.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/55ea90b1aacb46e3862d5ec3008ae56f~tplv-k3u1fbpfcp-watermark.image) 控制台看下 Timeline： [![In8fhU.png](https://s3.jpg.cm/2021/07/02/In8fhU.png)](https://imagelol.com/image/In8fhU) 的确不一样了，**跟【常规操作】中的 Timeline 图作比，高度都更加齐平了！更多绿色部分处于高点了！红色条也减少了！** **这表示我们的动画效果，更流畅了！** * 这里动画效果为什么更流畅了呢？暂时按下不表，后文解释。 ## 高级操作噢噢噢，原来你是位高级前端，你还会这样 **will-change** 这样高级的操作！ CSS 代码： ``` .app-menu { -webkit-transform: translateX(-100%); transform: translateX(-100%); transition: transform 300ms linear; will-change: transform; } ``` 实现效果： ![333_.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ebe1b0f1681044c88181ff10edc3e6e3~tplv-k3u1fbpfcp-watermark.image) 控制台看下 Timeline： [![In8CGi.png](https://s3.jpg.cm/2021/07/02/In8CGi.png)](https://imagelol.com/image/In8CGi) **天呐噜！** **相较于【进阶操作】，我们更加接近目标：高度基本齐平了！绿色位置绝大部分都处在高位！红条减的更少了！** 这么厉害的嘛？不妨再往下看！ ## 顶级操作 **至此，你的手中还有牌吗？** 或许我们还能从 DOM 结构找找突破口！将前文的 DOM 改造成： ```

``` 在 layout 区域之外创建 menu，然后使用 js 中的 **transitionend 函数**来监听，使 menu--animatable 类在过渡时间结束时被移除。 ![0_EFkarCSe2mQEYK0e_.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d2043f0b0794ef5af5859c6a4ca6cbe~tplv-k3u1fbpfcp-watermark.image) // js ``` function toggleClassMenu() { myMenu.classList.add("menu--animatable"); if(!myMenu.classList.contains("menu--visible")) { myMenu.classList.add("menu--visible"); } else { myMenu.classList.remove('menu--visible'); } } function OnTransitionEnd() { myMenu.classList.remove("menu--animatable"); } var myMenu = document.querySelector(".menu"); var oppMenu = document.querySelector(".menu-icon"); myMenu.addEventListener("transitionend", OnTransitionEnd, false); oppMenu.addEventListener("click", toggleClassMenu, false); myMenu.addEventListener("click", toggleClassMenu, false); ``` // 完整 css ``` menu { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 150; } .menu--visible { pointer-events: auto; } .app-menu { background-color: #fff; color: #fff; position: relative; max-width: 400px; width: 90%; height: 100%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); -webkit-transform: translateX(-103%); transform: translateX(-103%); display: flex; flex-direction: column; will-change: transform; z-index: 160; pointer-events: auto; } .menu--visible .app-menu { -webkit-transform: none; transform: none; } .menu--animatable .app-menu { transition: all 130ms ease-in; } .menu--visible.menu--animatable .app-menu { transition: all 330ms ease-out; } .menu:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); opacity: 0; will-change: opacity; pointer-events: none; transition: opacity 0.3s cubic-bezier(0,0,0.3,1); } .menu--visible.menu:after { opacity: 1; pointer-events: auto; } ``` 它的 Timeline： [![In89lr.md.png](https://s3.jpg.cm/2021/07/02/In89lr.md.png)](https://imagelol.com/image/In89lr) **这就是 CSS3 实现 60 FPS动画的顶级操作！** **高度全部齐平！！全部处在高位！！没有红条！！** **这是完美的 FPS 动画！如丝般顺滑！** **你做到了！(๑•̀ㅂ•́)و✧** ## 原理探寻我们在此做简单回顾：级别|实现核心方式|FPS 绿块效果|动画顺滑程度 -|-|-|- 常规操作|transition: left 300ms linear;|高度不齐平、较多处于低点、很多红条|30% 顺滑进阶操作|transition: transform 300ms linear;|高度比较齐平、较少处于低点、较少红条|60% 顺滑高级操作|will-change: transform;|高度基本齐平、很少处于低点、很少红条|80% 顺滑顶级操作|transitionend 函数|高度完全齐平、全部处于高点、没有红条|100% 顺滑 **原理呢？原理还得回归底层，来看看浏览器的渲染机制！** ![InXLPw.png](https://s3.jpg.cm/2021/07/02/InXLPw.png) 上图是浏览器渲染的关键步骤，相信大家都很熟悉： 1. Styles（样式）: 浏览器计算要应用于元素的样式； 2. Layout（布局）：浏览器计算每个元素生成形状和位置，比如 width、height、margin、left/top/right/bottom 这些； 3. Paint（渲染）：浏览器将每个元素的像素填充到图层中； 4. Composite（合成）：浏览器开始在屏幕上绘制所有图层的时候；第 4 步“合成”给了我们很多操作空间：我们可以使用 **transform** 和 **opacity** 两个属性实现四种最常用的动画： 1. 位置动画：translateX(n) translateY(n) translateZ(n); 2. 大小动画：transform: scale(n); 3. 旋转动画：transform: rotate(ndeg); 4. 不透明度动画：opacity: n; **在第 4 步操作为什么具有魔法呢？** 笨蛋，当然是避免重绘、回流增加渲染负担啦~ [![InXxZu.th.png](https://s3.jpg.cm/2021/07/02/InXxZu.th.png)](https://imagelol.com/image/InXxZu) 所以，我们的【进阶操作】控制 **transform** 比【常规操作】控制 **left** 属性更优！而【高级操作】中的 **will-change** 能告知浏览器元素会有哪些变化，这样浏览器能在变化之前做好优化准备工作，将一部分复杂计算提前准备好，所以页面的反应更加快速灵敏。【顶级操作】中改造分离 DOM，然后用 JS控制，手动添加 menu--animatable 类，然后用到 **transitionend 事件** 会在 CSS transition 结束后触发，移除 menu--animatable 类。实现完全体的 60FPS 动画！ >**通常来说，我们能做到进阶操作或高级操作中的实现应该就够了，如果在特殊情景下，如对 FPS 要求特别高，我们再开拓思路，启用顶级操作！（顶级操作是把宝刀，一般不拿出来~）** ## 写在结尾我们都知道编码习惯非常重要，但同时又一直苦于思考，如何将一些原理知识与实际编码结合？！ **而本篇是基于浏览器渲染原理，对 CSS3 动画的一个很好结合实践！** **CodeReview 时，同事都直呼：细节！** “秒啊~ 我理解的原理知识用来面试，你理解的原理知识用来工作中日常编码，细节！高级！” [![InXMXG.th.png](https://s3.jpg.cm/2021/07/02/InXMXG.th.png)](https://imagelol.com/image/InXMXG) ok，以上便是本次分享~ 都看到这儿了，撰文不易、需要鼓励~ b(￣▽￣)d >我是掘金安东尼，输出暴露输入，技术洞见生活，下期再会~ 参考： * [为什么电影24帧就算流畅，主机30帧就算流畅，而电脑游戏需要60帧流畅？](https://zhuanlan.zhihu.com/p/48674410) * [FPS幀數是什麼？24fps、30fps、60fps有什麼區別？](https://www.reneelab.net/frames-per-second.html) * [how-to-achieve-60-fps-animations-with-CSS3](https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-CSS3-db7b98610108) * [transitionend_event](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/transitionend_event)