H5篇：页面中实现动画的几种方式？（附代码）

2023-04-18 15:10:27 99

wed的动画实现多种多样，随着 H5 的发展，实现动画的方式越来越多了。初步统计实现动画的方式有以下一些方式实现。

一、GIF 动画

通常咱们社交聊天的一些动态表情，大多都是gif动画。GIF(Graphics Interchange Format)的原义是“图像互换格式”，GIF 文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在 50%左右，它不属于任何应用程序。GIF 格式可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。

GIF分为静态GIF和动画GIF两种，扩展名为.gif，是一种压缩位图格式，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式，其实GIF是将多幅图像保存为一个图像文件，从而形成动画，最常见的就是通过一帧帧的动画串联起来的搞笑gif图，所以归根到底GIF仍然是图片文件格式。

GIF 制作方式可以通过PS制作，或者通过图片、视频、FLASH转换

缺点：高清的 gif 体积较大。压缩后的体检较小的会失帧。交互差，实质上他就是一个会动的图片。

二、FLASH 动画 / SilverLight
FLASH

Flash非常强大，它们包含丰富的视频、声音、图形和动画。利用Flash可以制作各种各样非常华丽的动画，和视频，但是由于各种原因，2012 年 8 月 15 日，Flash退出Android平台，正式告别移动端。2015 年 12 月 1 日，Adobe将动画制作软Flashprofessional CC2015升级并改名为Animate CC 2015.5，从此与Flash技术划清界限。

很早之前在各种企业门户的首页大图轮播基本都是使用flash，早几年 12306 的购票网站首页的顶部的大图也是用的flash，如今都换成了静态的图片。这种技术逐渐淡出了视野，只有在线视频直播如优酷，爱奇艺等视频网站。

缺点：基于 flash 播放器来播放，flash 播放器非常耗性能，经常报各种漏洞。

SilverLight

Microsoft Silverlight是一个跨浏览器的、跨平台的插件，是一种新的Web呈现技术，能在各种平台上运行。借助该技术，您将拥有内容丰富、视觉效果绚丽的交互式体验，而且，无论是在浏览器内、还是在桌面操作系统（如Windows和Apple Macintosh）中，您都可以获得这种一致的体验。

缺点：以浏览器插件的形式来支持动画，开发起来不那么容易。了解下有这个东东就够了哈
著作权归作者所有。

三、Javascript + HTML

原理：其主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。

Jquery的animate()方法就是这种方式实现的。

缺点：javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿

16ms 的问题：一般认为人眼能辨识的流畅动画为每秒 60 帧，这里 16ms 比(1000ms/60)帧略小一些，但是一般可仍为该动画是流畅的。在很多移动端动画性能优化时，一般使用 16ms 来进行节流处理连续触发的浏览器事件。例如对touchmove、scroll事件进行节流等。通过这种方式减少持续事件的触发频率，可以大大提升动画的流畅性。

四、SMIL

SMIL 特性：
程序以开始，以结束，整个程序由body和head两个部分组成，SMIL要求其标记和标记的属性必须小写！有些标记必须有一斜杠作为结束标记，属性值必须用双引号括起来，SMIL文件的拓展名为*.smil或者*.smi。

嵌入 html

向标签添加命名空间定义，添加一个元素，以导入"time"命名空间，添加一个定义"time"类的

缺点：一看就知道只支持 IE。没啥好说的



	五、APNG 


	APNG, 全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，他和 gif 的区别在于：图片质量,gif最多支持 256 种颜色，不支持Alpha透明通道。可以称之为色彩丰富支持Alpha透明通道体积大小和 gif 甚至更小的 gif。 2007 年 4 月 20日，PNG组织投票以 10:8 否决APNG进入官方标准。也就是PNG不认可他。


	
		缺点：Chrome 59 之后，只有 IE 不支持。
	


	
		APNG的制作：http://littlesvr.ca/apng/
	


	六、Javascript + SVG


	SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范，在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点，并提供了一些SVG继承实现。


	特性


	
		
			SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
		
	
	
		
			SVG 用来定义用于网络的基于矢量的图形
		
	
	
		
			SVG 使用 XML 格式定义图形
		
	
	
		
			SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
		
	
	
		
			SVG 是万维网联盟的标准
		
	
	
		
			SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
		
	


	SVG animation最强大的地方在于：™ 只要在页面放几个animate元素，没有任何CSS, 没有任何JS，页面上的元素就像是没吃草的马儿一样，愉快地跑起来了。你会发现，我勒个去，原来要实现个动画效果这么简单。什么CSS3动画，哪边凉快哪边呆着吧！



	元素


	此元素没有动画效果,可以在特定时间之后修改某个属性值（也可以是CSS属性值）



	基础动画元素。实现单属性的动画过渡效果



	颜色动画，因为 animate 能实现其功能，所以被废弃了。逝者已矣...


	实现 transform 变换动画效果的,与 CSS3 的 transform 变换是一个套路



	元素可以让 SVG 各种图形沿着特定的 path 路径运动~



	展示的时候是这个样子的


	暂停和播放

// svg指当前svg DOM元素
// 暂停
svg.pauseAnimations();

// 重启动
svg.unpauseAnimations();

	关于 svg 的之后再写文章详细介绍吧


	七、Video


	是HTML 5的新标签



	相关属性


	
		
			
				属性
			
			
				值
			
			
				描述
			
		
	
	
		
			
				autoplay
			
			
				autoplay
			
			
				如果出现该属性，则视频在就绪后马上播放。
			
		
		
			
				controls
			
			
				controls
			
			
				如果出现该属性，则向用户显示控件，比如播放按钮。
			
		
		
			
				height
			
			
				pixels
			
			
				设置视频播放器的高度。
			
		
		
			
				loop
			
			
				loop
			
			
				如果出现该属性，则当媒介文件完成播放后再次开始播放。
			
		
		
			
				preload
			
			
				preload
			
			
				如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
			
		
		
			
				src
			
			
				url
			
			
				要播放的视频的 URL。
			
		
		
			
				width
			
			
				pixels
			
			
				设置视频播放器的宽度。
			
		
	


	八、Javascript + Canvas


	canvas作为H5新增元素，是借助Web API来实现动画的。 结合setInterval或者requestAnimationFrame可以实现各种样的动画，下面的例子展示了一个 7 色圆的颜色过度



  
    
    
    JS Bin
  
  
    
    
  


	
		复制下面链接在线看demo：
	
	
		https://jsbin.com/piwihur/edit?html,js,output
	


	cavans有些复杂，一时半会消化不了。之后再写详细的文章研究。Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画


	九、CSS3 transition/animation


	transition


	transition是过度动画。但是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。


	在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。所以我们通常添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速，让动画过程更加流畅。


	animation


	animation算是真正意义上的CSS3动画。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态的控制是通过百分比来控制的。


	CSS3最大的优势是摆脱了js的控制，并且能利用硬件加速以及实现复杂动画效果。


	有一篇文章做了简单的介绍，点这里


	假如用CSS3来实现上面的Canvas7 彩颜色过渡的话，就非常简单了

@keyframes color {
  0% {
    background-color: red;
  }
  7% {
    background-color: orange;
  }
  17% {
    background-color: yellow;
  }
  22% {
    background-color: green;
  }
  42% {
    background-color: cyan;
  }
  82% {
    background-color: blue;
  }
  90% {
    background-color: purple;
  }
}

	当然并不是用CSS3做动画比Canvas牛逼，只是使用场景不一样吧。


	知道的就这些了，之后再补充吧。


	以上就是H5篇：页面中实现动画的几种方式？（附代码）的详细内容，更多请关注毛票票其它相关文章！

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。


              
            
                                    上一篇
JS字符串学习之计算给定字符的全部出现位置
                
                                    下一篇
PHP算法练习系列大汇总（持续更新~）
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招

H5篇：页面中实现动画的几种方式？（附代码）

一、GIF 动画

二、FLASH 动画 / SilverLight FLASH

三、Javascript + HTML

四、SMIL

五、APNG

六、Javascript + SVG

八、Javascript + Canvas

九、CSS3 transition/animation

热门推荐

随机推荐

二、FLASH 动画 / SilverLight
FLASH