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

近年来，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基础知识，了解动效制作的基本方法，你就可以制作出一个简单的页面。

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

HTML5培训教程学习之动效制作相关推荐

盘点在H5小游戏里常用的动效制作套路
近年来,越来越多的自带绚丽动效的H5小游戏如雨后春笋一般冒出来,而也正是这些炫酷的交互动效,才能够成功地吸引住用户的眼球,让用户为此驻足. 而「动效制作」也伴随着H5的大热而火遍前端圈及设计界,下面就 ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
sketch交互动效能导入html吗,UI设计利器Sketch +最新交互利器 Framer 配合使用和动效制作...
UI设计利器Sketch +最新交互利器 Framer 配合使用和动效制作许多人都在脸书上谈论framer的最新更新的倒计时,当时时钟敲过零点,Framer的新一个版本产生了,有了很多有趣的东西,例 ...
html5怎么制作app页面,玩转HTML5移动APP页面（动效篇）
作为一名前端,在拿到设计稿时你有两种选择: 加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些动画设计的小技巧 ...
HTML5开发APP页面（动效篇）
作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就 ...
AE 动效制作和交付方案
在界面设计中,设计师利用动效让整个界面更加活泼,给界面元素带来生命力,解决功能上的问题,在更好地展示产品功能的基础上,凸显品牌的特色.而作为用户,动效增强了体验者的审美感受.情感需要,让用户更容易理解 ...
AE绘图工具与常用动效制作
动画预览视频教程地址: 链接:https://pan.baidu.com/s/12JsKTInSFhpRlIZt_8v-6Q 提取码:p8rk 知识重点: 1.知识点 ①.AE基本绘图工具的使用: ...
杨清彦：《像三国》游戏3D动效制作经验分享
杨清彦,像素网络CTO,<像三国>的技术负责人.以下内容给大家分享他们到底是怎么只用2D接口开发出高大上的3D效果. 有个笑话说,<像三国>刚出来的时候,很多人赞扬他们:Uni ...
《像三国》3D动效制作经验分享
(以下内容依据Cocos秋季峰会演讲速记稿整理) 主持人王哲: 下一个分享是<像三国>的3D特效制作经验分享.有个笑话说,<像三国>刚出来的时候,很多人赞扬他们:Unity3D ...

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

HTML5培训教程学习之动效制作相关推荐

最新文章

热门文章