18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

canvas

2021-02-11分享 "> 对不起,没有下一图集了!">
  我喜欢模版网有一个要求,做一个沿岸路健身运动的光的动漫,最初用GIF完成,发觉动漫品质太差了。只有用js将几十张png照片连续播发,假如互联网差将会会出现闪动实际效果,自然还可以等全部照片都载入完再实行。可是,当我们在网络上游逛时,发觉了:canvas-keyframes.min.js,它是一款强劲的能够将编码序列照片转化成canvas并完成持续播发的js软件。并且它能够根据主要参数轻轻松松配备动漫的速度,而且数次启用能在一个网页页面转化成好几个动漫,因为转化成的是canvas,操纵款式也很便捷。
应用方式 1、界定一个器皿,用于显示信息canvas动漫,操纵其尺寸和帧一样大。以下:
.animate{width: 640px; height:480px; margin:auto;}
 div /div 
2、引进canvas-keyframes.min.js
 script src="js/canvas-keyframes.min.js" /script 
3、在网页页面或您的公共性js里加入下边的涵数,这一涵数就是我爱模版网对启用的封裝,传好多个主要参数更为便捷
function keyAnimate(dom,startnum,um,path,fps){
 var count = 0;
 var imgArr = [];
 for(var i=0;i =um;i++){
 (function(i){
 var img = new Image();
 img.onload = function(){
 img.onload = null;
 count++;
 // 有将会照片载入有快有满慢,因此用角标存
 imgArr[i-1] = img;
 if(count==um){
 keyFrames(imgArr);
 img.onerror = function(){
 img.src = path+(startnum+i)+'.png';
 })(i);
 var keyFrames;
 function keyFrames(imgArr){
 keyFrames = new CanvasKeyFrames(document.querySelector(dom), 'array', imgArr, {
 fps:fps || 24 //动漫速率
 keyFrames.play();
}
主要参数表明:
   dom:必须显示信息动漫的div的挑选器
   startnum:起止帧照片的姓名,不必拓展名
   um:编码序列图总数
   path:照片相对性于当今网页页面的部位
   fps:无需说都搞清楚!不传得话,默认设置是每秒钟24帧
4、启用实例
keyAnimate('.animate',1,33,'img/',60);

本站內容假如沒有标明出處,全部权均归本网站,出示完全免费免费下载使用,但不可用以商业服务赢利。假如标明出處,则来源于于互连网,本网站不做商业服务主要用途。假如本网站有內容侵害到您的利益,请致函网站站长电子邮箱,本网站当马上删掉。

联络大家
"> 对不起,没有下一图集了!">
在线咨询