HTML5培训教程学习之动效制作

Posted 2021-07-05 程序员的小傲娇

近年来，html5应用愈发广泛，并有取代Flash的趋势。很多人知道利用HTML5可以做出好的动作效果，但你知道它是怎么做出来的吗?今天小千就来给大家分享一下HTML5培训教程中动效制作的几种方法。

1、逐帧动画。逐帧动画即是利用一张等间距的动画分解逐帧图片，由js脚本模拟编写或是使用css3新属性step()制作而成。逐帧动画脚本可以控制逐帧动画的快慢和动作的暂停，后期可以通过代码进行动画速率及透明度的修改。

2、GIF。GIF图片擅长于制作细节的小动画、位图，优势在于 “体型”很小，可压缩，制作成本低，以图片的形态适用于各种操作系统，无兼容性的后顾之忧。GIF动画最常在H5动效里当担loading导航条，热门小标签等元素。

3、SVG。SVG擅长于线条的动画，弊端是：IE8,android4.2及以下支持不好。一张SVG图，其实是由一堆的定位锚点连线生成的，所以它可以很方便的存为文档格式。

4、Canvas。Canvas是HTML5 的新元素 ，类似画板，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。Canvas本身是没有绘图能力的，所有的绘制工作必须依赖 javascript 完成。

5、CSS3。CSS3擅长于平面层的动画，缺陷在于它的部分属性还没有被浏览器有好的支持。CSS3的动画三大属性：Transform 变形，Transition 过渡，和Animation 动画。

掌握HTML5基础知识，了解动效制作的基本方法，你就可以制作出一个简单的页面。

本文来自千锋教育，转载请注明出处。