| 企服解答
H5指的是移动端的web页面,能够在智能手机上呈现达到flash动画效果的具有酷炫效果的网页。H5动画则指的是能够在移动端进行播放的web页面动画。H5动画实现的方法有:GIF动画、FLASH动画 / SilverLight FLASH、SilverLight、SilverLight、SMIL、APNG、Javascript + SVG。
h5动画是什么意思
1、GIF动画
通常咱们社交聊天的一些动态表情,大多都是gif动画。GIF(Graphics Interchange Format)的原义是“图像互换格式”,GIF 文件的数据,是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在 50%左右,它不属于任何应用程序。GIF 格式可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画。 GIF分为静态GIF和动画GIF两种,扩展名为.gif,是一种压缩位图格式,支持透明背景图像,适用于多种操作系统,“体型”很小,网上很多小动画都是GIF格式,其实GIF是将多幅图像保存为一个图像文件,从而形成动画,最常见的就是通过一帧帧的动画串联起来的搞笑gif图,所以归根到底GIF仍然是图片文件格式。 GIF 制作方式可以通过PS制作,或者通过图片、视频、FLASH转换。
2、FLASH动画 / SilverLight FLASH
Flash非常强大,它们包含丰富的视频、声音、图形和动画。利用Flash可以制作各种各样非常华丽的动画,和视频,但是由于各种原因,2012 年 8 月 15 日,Flash退出Android平台,正式告别移动端。2015 年 12 月 1 日,Adobe将动画制作软Flashprofessional CC2015升级并改名为Animate CC 2015.5,从此与Flash技术划清界限。 很早之前在各种企业门户的首页大图轮播基本都是使用flash,早几年 12306 的购票网站首页的顶部的大图也是用的flash,如今都换成了静态的图片。这种技术逐渐淡出了视野,只有在线视频直播如 优酷,爱奇艺等视频网站。
3、SilverLight
Microsoft Silverlight是一个跨浏览器的、跨平台的插件,是一种新的Web呈现技术,能在各种平台上运行。借助该技术,您将拥有内容丰富、视觉效果绚丽的交互式体验,而且,无论是在浏览器内、还是在桌面操作系统(如Windows和Apple Macintosh)中,您都可以获得这种一致的体验。
4、SMIL
SMIL 特性: 程序以开始,以结束,整个程序由body和head两个部分组成,SMIL要求其标记和标记的属性必须小写!有些标记必须有一斜杠作为结束标记,属性值必须用双引号括起来,SMIL文件的拓展名为*.smil或者*.smi。
5、APNG
APNG, 全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展,他和 gif 的区别在于:图片质量,gif最多支持 256 种颜色,不支持Alpha透明通道。可以称之为色彩丰富支持Alpha透明通道体积大小和 gif 甚至更小的 gif。 2007 年 4 月 20日,PNG组织投票以 10:8 否决APNG进入官方标准。也就是PNG不认可他。
6、Javascript + SVG
SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范,在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点,并提供了一些SVG继承实现。
| 拓展阅读
H5有以下几大特性:1、绘图功能(Canvas,SVG);2、三维效果(css3 ,3D);3、离线存储。
1、绘图功能(Canvas,SVG)
为了方便理解,你可以将H5的绘图功能类比为Flash,但是唯一的决定性区别是,Flash做出来的动画无法在移动端的浏览器中浏览,因为Adobe早已在2012年就停止了对移动端flash的开发。毫无疑问,未来的移动网页游戏和动画会是H5的天下。
从技术实现的角度,H5配合JS(一种程序语言)可以做出任何二维动画,并且因为是网页元素,所有元素均可以监测到用户点击的数据,也就是说你可以知道用户在H5动画网页中的所有交互行为。但是,具体到实际应用,我们就要考虑周期、成本,和用户体验的问题,复杂的动画相应的制作周期和成本会提高,同时也有可能影响加载速度等用户体验相关的问题。
2、三维效果(css3 ,3D)
H5的华丽效果离不开一种叫CSS的技术,形象的说,如果把HTML5比作漫画的素描稿,CSS就是上色用的,相当于word界面上方的格式工具栏,如果没有CSS我们看到的H5网页就只能以“素颜”见人了。如果你熟悉互联网技术的命名规则你应该能知道CSS3就是CSS的升级版本。
3、离线存储
H5的另一个重要特性就是离线存储,它能将用户的资源文件保存在本地,这样在页面加载的时候网页能使用本地资源,从而实现离线状态下访问网页应用。举个例子,通过离线存储,你可以在没有网络的情况下阅读公众号的文章(当然这只是技术上可行,微信目前没有此功能)。
[免责声明]
文章标题: h5动画是什么意思
文章内容为网站编辑整理发布,仅供学习与参考,不代表本网站赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时沟通。发送邮件至36dianping@36kr.com,我们会在3个工作日内处理。