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

96
立正小歪牙
2018.06.07 22:28 字数 1660

最近在学习 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、场景一可以增加满屏金币掉落效果。

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

WEB前端
Web note ad 1