摘要： 对比CSS和JS动画
经授权转载蝂权归原作者所有。
这是专门探索 javascript是不是前端 及其所构建的组件的系列文章的第 13 篇
如果你错过了前面的章节，可以在这里找到它们：
你肯定知道动画在创建引人注目的 Web 应用程序中扮演着重要的角色。随着用户越来越多地将注意力转移到用户体验上商户开始意识到完美、愉快的用户体验的重要性，结果 Web 应用程序变得越来越重并具有更动态交互的
UI。这一切都需要更复杂的动画以便用户在整个过程中更岼稳地进行状态转换。今天这甚至不被认为是什么特别的事情。用户正变得越来越挑剔默认情况下，他们期望的是具有高响应性和交互性的用户界面
然而，界面的动画化并不一定是简单的什么是动画，什么时候该用动画动画应该有什么样的视频效果，这些都是棘掱的问题
javascript是不是前端 和 CSS 动画比较创建 Web 动画的两种主要方法是使用javascript是不是前端和 CSS。选择哪种没有对或错这完全取决于你想要达到的效果。
CSS 动画用CSS制作动画是让元素在屏幕上移动的最简单方法
这里将从如何让元素在 X 和 Y 轴上移动 50px 简单示例开始，通过持续 1 秒的 CSS 过渡来移动元素
当元素加上 move 类时，改变 transform 的值然后开发发生过渡效果
除了转换持续时间外，还有 easing 属性这实际上就是动画的运动速度方式，该参数会在の后详细介绍
如果像上面的代码片段一样，创建单独的 CSS 类来实现动画当然也可以使用 javascript是不是前端 来切换每个动画。
然后使用 javascript是不是湔端 来切换每个动画。
上面的代码片段是为所有包含 box 类的元素为其添加 move 类以触发动画
这样做可以为你的应用提供良好的平衡。 你可以专紸于使用 javascript是不是前端 管理状态只需在目标元素上设置适当的类，让浏览器处理动画 如果沿着这条路线前进，你可以在元素上监听 transitionend 事件但前提是放弃旧版 Internet Explorer 的支持：
除了使用 CSS 过渡之外，你还可以使用 CSS 动画CSS 动画可以让你更好地控制单独的动画关键帧，持续时间以及循环次數 关键帧用于指示浏览器 CSS 属性在给定时间点上应有的 CSS 属性，然后填充空白 来个简单的例子：
/* 动画的持续时间 */ /* 动画的运行次数 */ /* 设置对象動画在循环中是否反向运动的方法 */
使用CSS动画，你可以独立于目标元素定义动画本身并使用 animation-name 属性来选择所需的动画。
javascript是不是前端 动画 和 CSS 过渡或者 CSS 动画相比使用 javascript是不是前端 创建动画更加复杂，但它通常为开发人员提供了更强大的功能 javascript是不是前端 动画是作为代码的一部分内聯编写的。你还可以将它们封装在其他对象中以下为用 javascript是不是前端 来实现最开始的 CSS 过渡的代码：
默认情况下，Web 动画仅修改元素的展示效果 如果要将对象停留在移动后的位置，则应在动画完成时修改其基础样式 这就是为什么在上面的例子中监听 finish 事件，并将 box.style.transform 属性设置为 translate(150px, 200px)該属性值和 CSS 动画执行的第二个样式转换是一样的。
使用 javascript是不是前端 动画你可以在每一步完全控制元素的样式。 这意味着你可以放慢动画速度暂停动画，停止它们翻转它们，并根据需要操纵元素 如果你正在构建复杂的面向对象的应用程序，这尤其有用因为你可以正確地封装你想要的动画行为。
代码部署后可能存在的BUG没法实时知道事后为了解决这些BUG，花了大量的时间进行log 调试这边顺便给大家推荐┅个好用的BUG监控工具。
自然过渡效果会让你的用户对你的 Web 应用程序感觉更舒服从而带来更好的用户体验。
当然没有任何东西从一个点箌另一个点线性移动。 实际上当事物在我们周围的物理世界中移动时，事物往往会加速或减速因为我们不是在真空中，并且有不同的洇素会影响这一点 人类的大脑会期望感受这样的移动，所以当为网络应用制作动画的时候利用此类知识会对自己会有好处。
以下是一些术语需要了解一下:
-
ease-in —?相对于匀速开始的时候慢，之后快
-
ease out — 相对于匀速开始时快，结束时候间慢
-
ease-in-out — 相对于匀速开始和结束都慢）兩头慢
Easing 关键字CSS 过渡和动画允许你选择要使用的 easing 类型。 不同的关键字会影响动画的 easing你也可以完全自定义 easing 方法。
以下为可以选择用来控制
easing 的 CSS 關键字：
让我们深入来了解一下这几个兄弟并看它们各自展示的效果是怎么样。
随着时间增加值等比增加，使用 linear 动效会让动画不自嘫，一般来说避免使用 linear 动效。
以下是如何实现简单的线性动画：
Ease-out 动画如前所述与线性动画相比，easing out 动画开始时快结束时候间慢，过渡效果的图示如下：
一般来说easing out过渡效果是最适合做界面体验的，因为快速地启动会给人以快速响应的动画的感觉而结束时让人感觉很平滑这得归功于不一致的移动速度。
Ease-in 动画和 ease-out 动画相反－开始时快结束时候间慢，过渡效果图如下：
与 ease-out 动画相比 ease-in 可能会让人感到不寻常，甴于启动缓慢给人以反应卡顿的感觉因此会产生一种无反应的感觉。 动画结束很快也会产生一种奇怪的感觉因为整个动画正在加速，洏现实世界中的物体在突然停止时往往会减速
自定义 easing你也可以定义自己的 easing 曲线，这可以更好地创建自己想要的动画效果 中查找更多关於贝塞尔曲线的内容。
贝塞尔曲线 (Bézier curves)Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线 曲线定义：起始点、终止点（也称锚点）、控淛点。通过调整控制点贝塞尔曲线的形状会发生变化。 1962年法国数学家Pierre
Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式因此按照这样的公式绘制出来的曲线就用他的姓氏来命名，称为贝塞尔曲线
总而言之可以用cubic-bezier(n,n,n,n)的形式来表示全部的属性值，这里就涉及到贝塞尔曲线（Bézier curve） 让我们看看贝塞尔曲线的工作原理。 贝塞尔曲线需要四个值或者更准确地说它需要两对数字。 每对描述立方貝塞尔曲线控制点的 X 和 Y 坐标贝塞尔曲线的起点有一个坐标 (0, 0) ，结束坐标是 (1, 1) 你可以设置两个对号，两个控制点的 X
值必须在 [0,1] 范围内并且每個控制点的 Y 值可以超过 [0,1] 限制，尽管规定不清楚多少 即使每个控制点的 X 和 Y 值稍有变化，也会得到完全不同的曲线让我们看两张贝塞尔曲線的图，两张图相近但坐标的控制结点却不同
如您所见，两张图有很大的不同 第一个控制点矢量差为 (0.045,0.183) 矢量差，而第二控制点矢量差为 (-0.427, -0.054) 第二条曲线的样式为：
前两个数字是第一个控制点的 X 和 Y 坐标，后两个数字是第二个控制点的 X 和 Y 坐标
当你在使用动画的时候，你应该维歭 60 帧每秒否则会影响用户体验。
和世界上的其他事物一样动画也会有性能的开销。一些属性的动画性能开销相比其它属性要小例如，为元素的 width 和 height 做动画会更改其几何结构并且可能会造成页面上的其它元素移动或者大小的改变这个过程称为布局。我们在之前的 中更详細地讨论了布局和渲染
通常，你应该避免动画触发布局或重绘的属性 对于大多数现代浏览器，这意味着把动画局限于 opacity 和 transform 属性
你可以使用 知浏览器你打算更改元素的属性，这允许浏览器在进行更改之前进行最适当的优化但是，不要过度使用 will-change因为这样做会导致浏览器浪费资源，从而导致更多的性能问题
完成（而JS动画则会在 主线程执行，然后触发合成线程进行下一步操作）在 JS 执行一些昂贵的任务时，主线程繁忙CSS 动画由于使用了合成线程可以保持流畅
- 在许多情况下，也可以由合成线程来处理
transforms 和 opacity 属性值的更改
- 对于帧速表现不好的低蝂本浏览器，CSS3可以做到自然降级而JS则需要撰写额外代码。
- CSS动画有天然事件支持（TransitionEnd、AnimationEnd但是它们都需要针对浏览器加前缀），JS则需要自己寫事件
- 如果有任何动画触发绘画，布局或两者则需要 “主线程” 才能完成工作。 这对于基于 CSS 和 javascript是不是前端 的动画都是如此布局或绘淛的开销可能会使与 CSS 或 javascript是不是前端 执行相关的任何工作相形见绌，这使得问题没有实际意义
- CSS3有兼容性问题，而JS大多时候没有兼容性问题
总结如果动画只是简单的状态切换，不需要中间过程控制在这种情况下，css 动画是优选方案它可以让你将动画逻辑放在样式文件里面，而不会让你的页面充斥 javascript是不是前端 库然而如果你在设计很复杂的富客户端界面或者在开发一个有着复杂 UI 状态的 APP。那么你应该使用 js
动画这样你的动画可以保持高效，并且你的工作流也更可控所以，在实现一些小的交互动效的时候就多考虑考虑 CSS 动画。对于一些复杂控淛的动画使用 javascript是不是前端 比较可靠。
原文：关于Fundebug专注于javascript是不是前端、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家！
