动画在前端字段中的作用是增强用户体验并吸引用户的注意力。在互联网行业中，它也是一个永久的热门话题。e -Commerce平台或娱乐项目中有许多动画场景（Kuaishou，Kuaishou，Pinduoduo，TAOBAO，TENCENT视频，Douyin等）。那么，您可以通过本文改善什么样的认知？
整个系列中都有许多动画元素，但是每个地方都需要根据动画的特征选择最合适的技术，以实现最高标准和最高标准，以执行最高级别的动画。人员和设计师需要合作以在满足需求时进行沟通以设计最完美的动画技术体系结构。
兼容性，稳定性，音量，性能，用户设备（低端机器测试）。
APNG，CSS动画，SVG，Lottie，Canvas，WebGL，Cocos，WebP，透明窗格... ...
APNG动画门户
简介：全名动画PNG，生于2004年。
特征：
支持透明动画的PNG（本质上也是图形）是PNG的扩展。因此，当您不支持APNG设备时，您可以降级PNG静态图。尽管GIF和APNG都在移动图片，但APNG的图片质量比GIF，GIF好得多，GIF，GIF，GIF好得多，设计师需要由设计师生产（下图是与GIF和APNG图的比较）。前端的使用与其他格式的图片相同。可以将其直接插入网页作为图片。
优势：
（1）24-位真实颜色（gif是8位，可以理解为2个2，8-位的数量是2的第8侧，即256种颜色，这意味着GIF可以显示到256种物种最多256种物种，因此GIF的颜色步骤过渡将比APNG差得多）
（2）8-位α透明通道（GIF格式不支持Alpha通道，也就是说，它不支持半透明性，但我们都知道位置图中图形边缘的像素是半透明的，如下所示，图的边缘将被锯齿状）。
图像的每个像素都有三个通道：RGB（红色，绿色，蓝色），后来出现一个Alpha通道。32位存储位之一，每8位代表红色（8），绿色（8），蓝色（蓝色（8），alpha（8）频道。
在这种情况下，alpha通道可以指示256（2中的8）级的半透明度，可以平稳控制透明度，而GIF没有Alpha通道，因此只能显示为透明或不透明。没有控制透明度的空间。
缺点：兼容性暂时不是很好，但是现在一些工具将支持制作动画PNG图片。
前端人员应该更熟悉CSS动画。
如果您深入了解CSS，您会发现一切都可以是CSS。
优点：浏览器对CSS3动画进行了大量优化，例如专门研究动画和强制性硬件加速度的新层。
缺点：您可以从头到尾完成动画，但是在动画过程中很难进行交互式控制。
您可以一起尝试这个小演示，以感受到CSS动画的特征。腹部颤抖的效果：
当前成熟CSS动画库：animate.csss
启发CSS动画博客：Chokcoco
调试CSS动画的合适在线编辑工具：Codepen
上图所示的动画需要使用各种技术堆栈实现。它还需要使用JavaScript来控制发光块旋转的生命周期（早期旋转，旋转计数阶段，旋转到最后一个网格等）以及时间计时数据中的固定卡点。
一些代码：
优点：可以完全定制SVG描述的形状，也就是说，我们可以任意地凹入该动画容器的形状，就像燃烧的纸陶瓷一样（我想考虑一下）。
我们还可以先描述形状，然后添加一个动画元素以制作动画：
功能：（1）矢量图，可以扩展，在不同的平台或媒体下表现良好，而无需锯齿状和非差异。（2）它的DOM结构可以通过其特定的语法或JavaScript来控制，以轻松实现动画。
位图和矢量图：如左图所示，网格由网格和网格组成。每个网格只有一种颜色，还有许多单色网格的图片（这里的网格是像素）。
向量图：如右图所示，由两个维度坐标形成的图片通过连接坐标，因此无论其图片的面积多大，都不会锯齿状，因为它等同于计算坐标和计算坐标的图片通过数学公式连接。
Lottie官方网站
使用方法：设计师在AE上完成动画后，将JSON文件导出到前端通过AE插头 - bodymovin，并且前端用于使用此JSON文件来渲染（使用的具体细节可以看到使用乐趣的）。
优点：软和自然过渡。
缺点：应改进插头 - 插头，并且无法导出某些AE效应。
每个人都知道echarts是一个图标，但实际上可以是动画。在文章的开头，我们说动画的技术选择必须与特定的场景和需求结合在一起，这确实需要我们的脑海中的存储库。
例如，我们必须制作风险控制用户的显示页面。每个用户都有风险价值。我们需要显示动画中风险使用者的风险（即该风险用户的紧迫性），并且我们可以在echartliquid Water Ball地图中使用Echart（数量越大，较动荡的水）。图表。不仅可以对数据的可视化进行可视化，还可以显示情绪的可视化，因为最终，查看此页面的人仍然想快速理解两件事：一个是情感，另一个是定量的事情。这表明这表明它可以最大化房地产重点。
球l l l l l l l l l：
优点：擅长进行像素处理，动态渲染和大型数据绘图。
缺点：当画布很大时，性能较低，具体取决于像素。
功能：注意绘画动画的感觉，例如在白色的画布上自由绘制东西。
适用的方案：刮擦音乐，汽车拨号，绘图图（Baidu Echarts是基于HTML帆布的图标库）和迷你游戏。
基于HTML5 WebGL的3D科幻迷
优点：1。擅长进行数据可视化；2.使用底层的图形硬件加速度功能使用图形渲染，以便平稳地显示3D场景和模型；3.与之相似的闪光灯要求浏览器下载插件-in..ut WebGL可以直接读取它而无需下载插件-in；
缺点：很难入门。它的语言风格更像是C ++，而前端人员可能有一定的学习成本。
简介：3D动态地图渲染技术，本质上是JavaScript API。如果您使用最常见的（平庸）庸俗（庸俗）），则为：创建一个颜色设备，然后将数据数据传递给GPU，然后将GPU输出输出根据双方的内容进入动画。
步：
1.初始化
2.编译颜色设备
3.将输入数据传递给GPU
4.画
当然，前端涉及的知识非常广泛。实现动画的技术不仅限于上述技术，但是将来也会有更多的新技术。但是，每当一项新技术出现时，我们仍然必须保持独立思考和我们自己的批判性思维的能力。请记住不要盲目遵循趋势。在大多数情况下，作为前端，从性能和用户的角度来看，技术堆栈的选择仍然需要。
1.春节活动设计背后的故事