frax by frame动画教程，带有CSS和JavaScript

>本教程探讨了使用HTML，CSS和JavaScript制作平滑，性能和可维护的逐帧动画的各种方法。 我们将构建一个眨眼的眼动动画，逐步完善我们的方法，以在浏览器和设备之间取得最佳的结果。

密钥概念：

使用CSS和JavaScript的
• 逐帧动画技术提供多种方法，每种方法都具有权衡。
SVG的可扩展性和响应性使其优于GIF，尤其是对于复杂或互动动画。 基于精灵的动画和CSS密钥帧最小化http请求并改善渲染。
css变换属性，尤其是使用硬件加速度（
• ），通过减少重新涂片和反射来优化性能。
• 选择正确的技术取决于可伸缩性，响应性，性能和可维护性需求。 translate3d
• 什么是frage-frame动画？ Adobe定义的
逐帧动画涉及在每个帧中更改阶段内容。 它是每个帧都是唯一的复杂动画的理想选择。 本质上，一系列图像产生了运动的幻想。

>本教程使用SVG图像以实现其可扩展性。 稍后将讨论PNG，JPEG和GIF等替代方案。我们将使用jQuery并假设配置了AutoPrefixer。 方法：

更改图像源：这种简单的方法涉及动态更改>元素的

属性。

用于更顺畅的动画，但是图像预加载对于防止初始jank至关重要。 预加载是通过将图像作为背景图像附加隐藏的div来实现的。

1. pros：声明性，图像保留在适当的位置。src> <img alt="frax by frame动画教程，带有CSS和JavaScript" >requestAnimationFrame cons：

   多个HTTP请求可以减慢初始页面加载，由于重新涂漆而在移动设备上的Janky Animation的潜力。
   更改图像不透明度：
   • 此方法通过更改图像不透明度而不是源来避免重新粉刷。 所有图像均已预加载，改善了性能，但仍需要多个图像负载。> 与方法1相比，
   PROS：
   提高了渲染性能
2. cons：仍然需要多个图像加载，可能会影响初始页面加载。
   更改精灵位置：
   • 这使用CSS Sprite纸 - 一个包含所有动画帧的单个图像。 CSS动画更改以创建动画。
     • pros：单个http请求，无需javascript。
     • cons：重新粉刷可能会导致jank在移动中引起jank，由于子像素渲染而引起的图像摇摆的潜力。

   • 使用转换：移动精灵，这是通过使用transform: translateX而不是background-position来优化方法3的。 这可以最大程度地减少重新粉刷和倒流。 对于不支持动画中不支持百分比值的较旧的IE版本需要后备。 translateX用于硬件加速度。transform: translate3d(0, 0, 0)

     • pros：单个HTTP请求，由于最小化的重新涂片而在移动设备上流畅的动画。
     • cons： IE后退。>

内联SVG：>

性能比较：

性能测试（例如，使用jsperf）表明Sprite-Transform方法（方法4）通常提供最佳的渲染性能。

替代方案：

> 如果可伸缩性并不关键，则

gif：
• 适合使用，但缺乏对动画流的控制，并且可能很大。> > canvas：
>非常适合在小屏幕上具有多个动画对象的性能，但需要帆布API知识并且缺乏DOM事件支持。>
• 结论：

最好的方法取决于项目要求。优先考虑SVG以进行可伸缩性，将转换属性用于性能，并考虑精神符号以获得最佳初始负载时间。 选择最能平衡性能，可维护性和开发人员熟悉的方法。

（由于未以易于使用的格式提供图像URL，因此未包含图像URL。用您的实际图像URL替换占位符。

以上是frax by frame动画教程，带有CSS和JavaScript的详细内容。更多信息请关注PHP中文网其他相关文章！