无 发布于:2020-12-23 13:00:14
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>序列帧动画演示</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="wap-font-scale" content="no"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="css/cui.css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div> <div> <p>加载中...</p> </div> </div> <div> </div> <!-- 详情页面 end --> <script type="text/javascript" src="js/jquery.js"></script> <script src="js/canvas-keyframes.js"></script> <script> window.onload = function(){ var count = 0; var imgnum = 51; // 序列帧图片的数量 var imgArr = []; for(var i=1;i<=imgnum;i++){ (function(i){ var img = new Image(); img.onload = function(){ img.onload = null; count++; // 有可能图片加载有快有满慢,所以用角标存 imgArr[i-1] = img; if(count==imgnum){ $('.doding').hide() // 隐藏加载中 initKeyFrames(imgArr); } } img.onerror = function(){ } img.src = 'img3/gif-4_'+i+'.jpg'; // 拼接序列帧图片的图片地址 })(i); } } var keyFrames; function initKeyFrames(imgArr){ keyFrames = new CanvasKeyFrames(document.querySelector('.keypic'), 'array', imgArr, { fps:6, // 数字越大动画越快 width:698, // 宽度 height:404 // 高度 }); keyFrames.play(); } </script> </body> </html>
插件官方文档:https://github.com/wenyiweb/canvasKeyFrames
代码下载
链接:https://pan.baidu.com/s/1VRcpxXfQen6KnZjLa2hEpA
提取码:5811
复制这段内容后打开百度网盘手机App,操作更方便哦
登录后可以留言提问!