最近在学习 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'
}
//更多角色代码在此省略......
场景一：蝙蝠侠
先来说一下打字机效果。
$.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 实现动画的原理就是不断绘制图形、改变图形（形状、位移等）、清除画布的过程。
ctx.clearRect(0, 0, canvas.width, canvas.height) 清除画布，会将整个画布的内容清除。
ctx.drawImage(img,x,y,w,h) 绘制图像。（不清楚的可以参看：如何在 canvas 中绘制 image 对象）
requestAnimationFrame() 相当于一个回调函数，不断调用函数自身就可以实现循环。
蝙蝠侠动画流程：
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);
}
场景二、超人
超人动画流程：
超人动画比较简单，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);
场景三、神奇女侠
神奇女侠动画流程：
神奇女侠动画就更简单了，同样借助了 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);
}
}
场景四、闪电侠
闪电侠动画流程：
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。
4、场景一可以增加满屏金币掉落效果。
项目还有很多不足，也有更多可改进优化的地方，欢迎探讨和批评指正~
