素材一
实现动画的素材我们已经给出，紧张通过gif动图导出一组图片，下面对html5动画实现过程进行大略解释。
基本思路实现其动画的基本思路是通过HTML5供应的canvas元素进行图片的绘制与展示，借助setInterval方法实现间隔指定时间调用新的图片实现重新绘图。个中绘图紧张利用drawImage方法进行绘图，终极通过图片依次重绘实现动画效果。详细实现过程如下：
在页面body部分添加Canva标签，设置其id属性为canv，宽度为600，高度为400,编写代码描述如下图：
添加画布元素
canvas浏览效果
加载图片资源利用Canvas借助JavaScript供应的drawImage方法进行绘图，须要供应要绘制的图片资源即绘图的坐标位置。该方法原型如下：
drawImage方法原型
因此我们须要加载图片资源，本例由于须要调用多个img实现定时不同图片的绘制，因此我们可以利用数组存储所加载的图片资源。本例图片数量为14，因此我们数组长度为14。利用素组存储图片实当代码如下：
加载图片资源代码
定义页面加载事宜onload本例设计在页面加载时自动播放动画，因此须要在JavaScript脚本中添加页面onload事宜，在事宜中编写绘图干系代码，紧张代码包括获取画布canva与实例化绘图工具context。部分代码描述如下：
onload事宜及绘图初始化
利用setInterval实现动画利用setInterval方法实现动画紧张须要定义回调函数与回调函数触发实行的周期，本例中我们利用匿名函数作为回调函数，触发周期设置为100毫秒。setInterval函数定义如下：
setInterval函数
在定义完函数之后可在其匿名函数函数体部分写入绘图方法dramImage(),实现周期调用不同图片资源进行绘图，终极展示出动画效果。为了担保循环调用14张图片，我们须要设置一计数全局变量i，由于我们图片采取数组存储，下标为数组，且从0-13进行编号，因此当计数值小于13时自动+1，指向下一数组下标，当为13时，设置计数值为0，回到数组第一元素，终极实现数组访问下标的循环。setInterval实现完全代码如下：
setInterval完全代码
实现效果展示HTML动画效果展示
本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码缺点、建议与见地，可以联系作者，共同磋商。期待大家关注！
如需案例完全代码请关注并私信，往期前端设计文章链接如下：
