html用序列图做动画 (jquery替换图片版/jquery一次添加所有图片依次显示版/canvas版(最流畅))

本文链接：https://blog.youkuaiyun.com/lxw_hk2_zy/article/details/112366160

html+jquery+jquery.imgpreload做序列图

     找啊找啊找啊找啊找啊找啊找了半天(从各种网站上找资料费了半天劲)才找到的, 然后拼拼凑凑弄出来的序列图播放, 网上的资料太不负责任了, 简单的功能非不写全, 还没注释,功能也实现不了, 我弄出来给大家分下下
说明:
     只针对多张png组成的序列图, -拼凑为动画.我的资源里有免费的jquery.imgpreload.min.js.请随意下载.
资源:
     jpg没透明背景, png有透明背景但占用内存大,自己选择
在这里插入图片描述
jquery版本不限

jQuery替换图片版(加载略慢, 展示略卡):

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<img class="chuansuo" />
	<script type="text/javascript" src="./static/jquery.1.1.3.min.js"></script>
	<script type="text/javascript" src="./static/jquery.imgpreload.min.js"></script>
	<script type="text/javascript">
		var load_img = [];
		var imgIdent = 0;
		var interNum = 0;
		function prefixInteger(num, length) {
    
			return ( "0000000000000000" + num ).substr( 0,length );
		}
		for(k=0;k<=306;k++){
    
			imgIdent = String(k);
			let identLength = 5-(imgIdent.length);
			let ident = prefixInteger(k,identLength)+k;
			// console.log(identLength,ident)
			load_img.push( './images/qi/qi_'+ident+'.png' );
		}
		// console.log(load_img)
		jQuery.imgpreload(load_img, {
    
			all: function() {
    

			}
		});
	    setInterval(function(){
    
	    	interNum++;
			$('.chuansuo').attr('src',load_img[interNum]);
			if(interNum>=306){
    
				interNum = 0;
			}
	    },50)
	</script>
</body>
</html>

jQuery添加所有图片版(加载超慢, 展示稍微不卡):

 window.sequence01 = {
   
            load_img:[],
            imgIdent:0,
            interNum:0,
            animateStart:null,
            str:null
        }
        window.sequence02 = {
   
            load_img:[],
            imgIdent:0,
            interNum:0,
            timer:null,
            str:"",
            change