神刀安全网

canvas实现HTML5“正义联盟要造反”小动画

最近在学习 canvas ,于是就把之前绘制的一套正义联盟的 UI 拿来用,做了一个基于 canvas 的小动画。也明白了一个之前的误区:canvas 本身是没有绘图和动画能力的,还是需要借助 JavaScript 完成。

下面进入正题,先甩上 Demo 和下载地址:

Demo: 听说,正义联盟要造反

下载地址: https://github.com/littleyljy/workstory

html 结构

<!DOCTYPE html> <html lang="en">     <head>         <meta charset="UTF-8">         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">         <meta name="author" content="Author">         <title>听说,正义联盟要造反</title>         <link href="index.css" rel="stylesheet" type="text/css" />     </head>      <body>         <section id="story" class="story">             <p class="story-title">太阳当空照,花儿对我笑。</p>             <p class="story-content">老板说:早早早,今天晚上继续加个班。</p>         </section>         <canvas id="main" class="main"></canvas>         <section class="package">         <div class="start"><img src="img/startBtn2.png"></div>         <div class="boss"><img src="img/boss.png"></div>         <div class="staff"><img src="img/staff.png"></div>         <div class="question"><img src="img/question.png"></div>         <div class="skull"><img src="img/skull.png"></div>         <div class="heart"><img src="img/heart.png"></div>         <div class="over"><img src="img/shareBtn.png"></div>         </section>         <section class="share-layer">             点击右上角,让朋友们也泄泄愤吧~         </section>         <audio id="bg-music" src="audio/start.mp3" autoplay preload loop="loop"></audio>          <script src="jquery.min.js"></script>         <script src="config.js"></script>         <script src="index.js"></script>     </body> </html> 

其实结构不复杂,主要分为五块:
1、文字区 .story
2、canvas 画布 .main
3、组件区 .package
4、分享区 .share-layer
5、背景音乐 #bg-music

配置文件

动画分为四个场景,以正义联盟的四个英雄为主角:蝙蝠侠、超人、神奇女侠、闪电侠。

在 config.js 文件中定义好每个场景故事内容和角色对象。

var stories= [{     title:'老板:蝠蝠,加个班吧!',     content:'蝙蝠侠:不加,老子有钱任性。' }, {     title:'老板:超超,加个班吧!',     content:'超人:你被炒了,现在我是老板。' }, {     title:'老板:美奇,加个班吧!',     content:'神奇女侠:我加班的小心心留给你。' }, {     title:'老板:小电,加个班吧!',     content:'闪电侠:老板,再见!' }, { }]; //绘制蝙蝠侠对象 var batmanImg = new Image(); batmanImg.src = 'img/batman.png'; var batman = {     x: 50,     y: 500,     vy: 4,     w: 75,     h: 100,     au: 'audio/fall.mp3',     direction: 'start' } //绘制老板对象 var bossImg = new Image(); bossImg.src = 'img/boss.png'; var boss = {     x: 240,     y: 500,     vy: 4,     w: 75,     h: 100,     direction: 'start' } //更多角色代码在此省略...... 

场景一:蝙蝠侠

canvas实现HTML5“正义联盟要造反”小动画

蝙蝠侠场景演示

先来说一下打字机效果。

$.fn.autotype = function() {}; 可以理解为为 jquery 对象定义了一个 autotype 方法。

//打字效果方法 $.fn.autotype = function() {     var $text = $(this);     console.log('this', this);     var str = $text.html(); //返回被选 元素的内容     var index = 0;     var x = $text.html('');     //$text.html()和$(this).html('')有区别     var timer = setInterval(function() {         //substr(index, 1) 方法在字符串中抽取从index下标开始的一个的字符         var current = str.substr(index, 1);         if (current == '<') {             //indexOf() 方法返回">"在字符串中首次出现的位置。             index = str.indexOf('>', index) + 1;         } else {             index++;         }         //console.log(["0到index下标下的字符",str.substring(0, index)],["符号",index & 1 ? '_': '']);         //substring() 方法用于提取字符串中介于两个指定下标之间的字符         $text.html(str.substring(0, index) + (index & 1 ? '_': ''));         if (index >= str.length) {             clearInterval(timer);         }     },     100); }; 

然后定义一个 autotypeinit 函数,先清空 .story-title 和 .story-content 中的文字,然后调用 .autotype() 方法产生打字效果。这里 setTimeout 函数是为了先把第一句话打完,再打第二句话。

//调用打字方法 function autotypeinit(i){     $('.story-content').html('');     $('.story-title').html('');     $('.story-title').html(stories[i].title);     $('.story-title').autotype();     setTimeout(function(){         $('.story-content').html(stories[i].content);         $('.story-content').autotype();     },1000); } 

canvas 实现动画的原理就是不断绘制图形、改变图形(形状、位移等)、清除画布的过程。

canvas实现HTML5“正义联盟要造反”小动画

动画循环过程,来源:腾讯课堂

ctx.clearRect(0, 0, canvas.width, canvas.height) 清除画布,会将整个画布的内容清除。

ctx.drawImage(img,x,y,w,h) 绘制图像。(不清楚的可以参看:如何在 canvas 中绘制 image 对象

requestAnimationFrame() 相当于一个回调函数,不断调用函数自身就可以实现循环。

蝙蝠侠动画流程:

canvas实现HTML5“正义联盟要造反”小动画

蝙蝠侠流程图

1、先进行碰撞检测,宝箱底部(chest.y + chest.h)是否等于 BOSS 顶部 (boss.y初始值,后会变),代码中 425 = chest.h + boss.y。如果不等就下落(chest.y += chest.vy)。

2、碰撞开始,宝箱依然要下落(chest.y += chest.vy),BOSS高度变小(boss.h -= boss.vy)。为了保持宝箱下落速度和BOSS变形速度一致,boss.vy == chest.vy。还有最重要的一点 boss.y 也要以相同的速度下降(boss.y += boss.vy),否则变成 BOSS 脚往上缩小。

3、蝙蝠侠在检测到宝箱压扁BOSS后,即BOSS高度变为某最小值(boss.h == 设定值),开始上升(batman.y -= batman.vy)直到移出屏幕(batman.y == -batman.h)。

//蝙蝠侠场景 function dropBoss(){     console.log('chest.y',chest.y);     // 宝箱下落     if (chest.y < 425) {         chest.y += chest.vy;     }else{         if(boss.h > 25){             boss.h -= boss.vy;             boss.y += boss.vy;             chest.y += chest.vy;         }else{             if(batman.y > -100){                 batman.y -= batman.vy;             }else{                 count = 1;                 autotypeinit(count);                 chgBoss();                 return;             }         }     }     // 清除画布     ctx.clearRect(0, 0, canvas.width, canvas.height);     // 重绘     ctx.drawImage(batmanImg,batman.x,batman.y,batman.w,batman.h);     ctx.drawImage(bossImg,boss.x,boss.y,boss.w,boss.h);     ctx.drawImage(chestImg,chest.x,chest.y,chest.w,chest.h);     // 使用requestAnimationFrame实现动画循环     requestAnimationFrame(dropBoss); } 

场景二、超人

canvas实现HTML5“正义联盟要造反”小动画

超人场景演示

超人动画流程:

canvas实现HTML5“正义联盟要造反”小动画

超人流程图

超人动画比较简单,JavaScript控制部分不多,一些动画借助了 CSS3 。

1、显示 BOSS($(‘.boss’).show();),墨镜落下(sunglass.y += sunglass.vy)。

2、当眼镜戴在超人身上后(sunglass.y == 520,这个值是通过观察画面得出的,毕竟有范儿的墨镜要戴对位置嘛),BOSS 隐藏,员工出现,问号出现($(‘.boss’).hide(); $(‘.staff’).show(); $(‘.question’).show(); )。setTimeout 在这里设置 2s 是为了让员工和问号的动画显示完成,而不是墨镜一戴好后就切换场景。

//超人场景 function chgBoss(){     console.log('sunglass.y',sunglass.y);     $('.boss').show();      // 移动墨镜     if (sunglass.y < 520) {         sunglass.y += sunglass.vy;     }else{         $('.boss').hide();          $('.staff').show();          $('.question').show();           count = 2;         setTimeout(function(){             autotypeinit(count);             koBoss();         },2000);         return;     }     // 清除画布     ctx.clearRect(0, 0, canvas.width, canvas.height);     // 重绘     ctx.drawImage(supermanImg,superman.x,superman.y,superman.w,superman.h);     ctx.drawImage(sunglassImg,sunglass.x,sunglass.y,sunglass.w,sunglass.h);     // 使用requestAnimationFrame实现动画循环     requestAnimationFrame(chgBoss); } 

CSS 部分

  • staff 和 question 动画部分是由 CSS 完成的。staff、question 先在对应位置定位好。
  • staff 右旋消失,持续 1s ,延迟 1s ,只执行一次。
  • question 闪烁,持续 2s ,无限循环。
/*角色*/ .boss{     display: none;     position: absolute;     top: 500px;     left: 240px;     z-index:1; } .staff{     display: none;     position: absolute;     top: 500px;     left: 240px;     z-index: 10;     -webkit-animation: rotateOutUpRight 1s 1s 1;     animation:  rotateOutUpRight 1s 1s 1; } .question{     display: none;     position: absolute;     top: 450px;     left: 270px;     z-index: 10;     -webkit-animation: flash 2s infinite;     animation: flash 2s infinite; }  @-webkit-keyframes rotateOutUpRight{     0%{         transform-origin:right bottom;         opacity:1     }     0%,to{         -webkit-transform-origin:right bottom     }     to{         transform-origin:right bottom;         -webkit-transform:rotate(90deg);         transform:rotate(90deg);         opacity:0     } } @keyframes rotateOutUpRight{     0%{         transform-origin:right bottom;         opacity:1     }     0%,to{         -webkit-transform-origin:right bottom     }     to{         transform-origin:right bottom;         -webkit-transform:rotate(90deg);         transform:rotate(90deg);         opacity:0     } } @-webkit-keyframes flash{     0%,50%,to{         opacity:1;     }     25%,75%{         opacity:0;     } } @keyframes flash{     0%,50%,to{         opacity:1;     }     25%,75%{         opacity:0;     } } 

为什么有些组件使用 drawImage 而有些使用 CSS3 搭配 show / hide 控制呢?

因为 superman 和 sunglass 是一直出现在画面中的,而且只涉及到位移操作,那么使用 drawImage 不断迭代是比较方便的,这样在切换下一个场景的时候组件也被自动清除。

而 boss 、staff 、question 只在特定情况下会显示或隐藏,右旋消失和闪烁动画使用 CSS3 比较好实现。

canvas 的位移、旋转等操作是针对整个画布来变化的,可以试试以下代码,会产生神奇的效果~

//平移物体至原点位置  ctx.translate(300,200);  //以新原点为中心旋转60°  ctx.rotate(Math.PI / 3);  

场景三、神奇女侠

canvas实现HTML5“正义联盟要造反”小动画

神奇女侠场景演示

神奇女侠动画流程:

canvas实现HTML5“正义联盟要造反”小动画

神奇女侠流程图

神奇女侠动画就更简单了,同样借助了 CSS3 。

1、先隐藏上一场景的 staff 和 question。显示 BOSS($(‘.boss’).show(),这里使用 show 的原因是 BOSS 没有动画,下一场景也有出现)。

2、神奇女侠左移(wonderwoman.x -= wonderwoman.vy),小心心显示($(‘.heart’).show()),直到神奇女侠移出屏幕(wonderwoman.x == -wonderwoman.w)。

//神奇女侠场景 function koBoss(){     console.log('wonderwoman.y',wonderwoman.y);     $('.boss').show();      $('.staff').hide();     $('.question').hide();     //移动小人     if (wonderwoman.x > -75) {         wonderwoman.x -= wonderwoman.vy;         $('.heart').show();     }else{         count = 3;         autotypeinit(count);         flashBoss();         return;     }     // 清除画布     ctx.clearRect(0, 0, canvas.width, canvas.height);     // 重绘     ctx.drawImage(wonderwomanImg,wonderwoman.x,wonderwoman.y,wonderwoman.w,wonderwoman.h);     // 使用requestAnimationFrame实现动画循环     requestAnimationFrame(koBoss); } 

CSS 部分

  • heart 右旋,持续 4.5s , 延迟 1s ,执行一次。
.heart{     display: none;     position: absolute;     top: 550px;     left: 100px;     z-index: 10;     -webkit-animation: rotate 4.5s 1s 1;     animation:  rotate 4.5s 1s 1; } @-webkit-keyframes rotate{     0%{         transform-origin:right bottom;     }     0%,to{         -webkit-transform-origin:right bottom     }     to{         transform-origin:right bottom;         -webkit-transform:rotate(90deg);         transform:rotate(90deg);     } } @keyframes rotate{     0%{         transform-origin:right bottom;     }     0%,to{         -webkit-transform-origin:right bottom     }     to{         transform-origin:right bottom;         -webkit-transform:rotate(90deg);         transform:rotate(90deg);     } } 

场景四、闪电侠

canvas实现HTML5“正义联盟要造反”小动画

闪电侠场景演示

闪电侠动画流程:

canvas实现HTML5“正义联盟要造反”小动画

闪电侠流程图

1、为了体现闪电侠来无影去无踪的效果(简称多动症),闪电侠在边上升(flash.y -= flash.vy)的同时边在屏幕左右侧随机移动,使用了随机函数 Math.random() 为 flash.x 在 (min,max) 范围内随机赋值。

2、电骷髅叠加在 BOSS 前的快速闪现营造 BOSS 被电击的感觉。

3、因为是最后一个场景了,因此只需要显示分享按钮, return 跳出函数即可。

//闪电侠场景 function flashBoss(){     console.log('flash.y',flash.y);     $('.heart').hide();      if (flash.y > -100) {         flash.y -= flash.vy;         flash.x = parseInt(Math.random()*(max-min+1)+min,10);         $('.skull').show();     }else{         $('.over').show();         return;     }     // 清除画布     ctx.clearRect(0, 0, canvas.width, canvas.height);     // 重绘     ctx.drawImage(flashImg,flash.x,flash.y,flash.w,flash.h);     // 使用requestAnimationFrame实现动画循环     requestAnimationFrame(flashBoss); } 

CSS 部分

  • skull 闪烁,持续 0.5s,无限循环。
.skull{     display: none;     position: absolute;     top: 475px;     left: 220px;     z-index: 10;     -webkit-animation: flash 0.5s infinite;     animation:  flash 0.5s infinite; } 

背景音乐

本地开发的时候,audio 标签即使加了 autoplay 属性,也依然不能自动播放。如果用户还没进行交互就调用播放声音的 API ,Chrome 会这么提示:

DOMException: play() failed because the user didn’t interact with the document first.

因此增加了一个开始按钮,audio.play() 放在按钮的点击事件里来触发声音播放。

但是当代码传上服务器后,iOS 下手机QQ自带的浏览器和 Safari、PC端 Chrome 都可以自动播放,微信浏览器需要点击后播放。估计是不同厂商浏览器做了不同的限制。

不足和可优化的地方

1、项目没有考虑响应式。
2、代码有些冗余,工程化思维欠缺。
3、蝙蝠侠的上升速度可以先慢后快,可以使用匀变速直线运动或者尝试缓动函数 ease。

canvas实现HTML5“正义联盟要造反”小动画

匀变速直线运动公式

4、场景一可以增加满屏金币掉落效果。

项目还有很多不足,也有更多可改进优化的地方,欢迎探讨和批评指正~

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » canvas实现HTML5“正义联盟要造反”小动画

分享到:更多 ()