canvas-keyframes.js 序列帧动画演示

无发布于：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，操作更方便哦

javascript

觉得有用请点个赞吧！

0 520

99元开通年度会员！
1000+模块代码随便下载！

canvas-keyframes.js 序列帧动画演示

最新