canvas实现扭蛋机动画效果的示例代码


Posted in HTML / CSS onOctober 17, 2018

转眼间,已经实习了两个月了,公司每个月都有个会员日的活动要做,这个月的任务是做一个扭蛋机抽奖的活动,数据什么的都有接口,那么前端剩下最大的任务就只剩下扭蛋机的动画实现了。

背景

本来兴高采烈地从网上找了一个扭蛋机动画,但是发现它是直接用css动画,把扭蛋们的动画写死了,这样我不是很喜欢,于是还是选择用canvas绘制扭蛋的随机动画。先写了个简单的扭蛋机Demo,效果预览

开始

布局

扭蛋机的布局比较简单,只需要在基础背景上添加一些元素就可以,最主要的是canvas标签,其他都无所谓:

<div class="bg">
    <span id="message">点击抽奖</span>
    <div class="lotterybg">
        <canvas id="myCanvas" width="285px" height="170px"></canvas>
        <img src="img/lighting.png" class="lighting"/>
    </div>
</div>
<img src="img/start-btn.png" id="start" onclick="play()"/>
<div class="award"><span id="awardBall"></span></div>
<img src="img/1.png" id="ball1" class="imgSrc">
<img src="img/2.png" id="ball2" class="imgSrc">
<img src="img/3.png" id="ball3" class="imgSrc">
<img src="img/4.png" id="ball4" class="imgSrc">

附上样式表:

body {margin: 0;padding: 0;border: none;}
.bg {background: url(../img/bg.png) top no-repeat;background-size: 100%;overflow: hidden;position: absolute;width: 400px;height: 100%;margin-top: 0;margin-left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}
#message {position: absolute;text-align: center;height: 25px;font-size: 22px;margin-top: 110px;margin-left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}
.lotterybg {background: url(../img/lotterybg.png) top no-repeat;background-size: 100%;overflow: visible;width: 80%;height: 100%;margin-top: 160px;margin-left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}
#myCanvas {position: absolute;border: none;width: 285px;height: 170px;margin-top: 15px;margin-left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}
.lighting {display: block;max-width: 99%;margin-top: 0;margin-left: 0;}
#start {position: absolute;z-index: 3;width: 202px;margin-top: 413px;margin-left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}
.imgSrc {display: none;position: absolute;}
.award {position: absolute;border: none;width: 60px;height: 200px;top: 470px;margin-left: 50%;-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-ms-transform: translate(-50%);-o-transform: translate(-50%);transform: translate(-50%);}

这样子布局就算完成了,接下来主要工作就在canvas绘制图像上了。

扭蛋动画

先把各种变量定义好:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var ball1 = document.getElementById('ball1');//图片对象
var ball2 = document.getElementById('ball2');//图片对象
var ball3 = document.getElementById('ball3');//图片对象
var ball4 = document.getElementById('ball4');//图片对象
var ballList = [ball1, ball2, ball3, ball4];//图片对象数组
var ballNum = 4;//扭蛋机里面的小球数
var awardList = [];//扭蛋机中的小球集合
var timer;//计时器
var award = document.getElementById('awardBall');
var message = document.getElementById('message');

扭蛋对象

扭蛋机里面每个扭蛋都是一个对象,所以需要定义一个扭蛋对象:

function Ball(index, img) {
    this.r = 30;//小球半径
    this.x = this.rand(canvas.width - this.r * 2);//小球初始横坐标
    this.y = this.rand(canvas.height - this.r * 2);//小球初始纵坐标
    this.color = index;//小球颜色,以下标表示
    this.img = img;//小球素材
    do {
        this.speedX = this.rand(20) - 10;
    } while (this.speedX < 5);//小球横坐标改变速度
    do {
        this.speedY = this.rand(20) - 10;
    } while (this.speedY < 5);//小球纵坐标改变速度
}

传入扭蛋对象的值index为小球的颜色,用数字1~4表示,img是图片对象,用来绘制扭蛋。

扭蛋方法

在上一步已经为扭蛋添加了属性,接下来就是给扭蛋添加方法:

Ball.prototype = {
    rand: function (num) {//随机数
        return Math.random() * num;
    },
    run: function () {//小球运动函数
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.x > canvas.width - this.r * 2) {//小球碰到右边界,横坐标速度变为负
            this.speedX = -this.speedX;
        }
        if (this.x < 0) {//小球碰到左边界,横坐标速度变为正
            this.speedX = Math.abs(this.speedX);
        }
        if (this.y > canvas.height - this.r * 2) {//小球碰到下边界,纵坐标速度变为负
            this.speedY = -this.speedY;
        }
        if (this.y < 0) {//小球碰到上边界,纵坐标速度变为正
            this.speedY = Math.abs(this.speedY);
        }
        ctx.drawImage(this.img, this.x, this.y, 60, 60);//绘制小球
    }
}

主要是为扭蛋对象的原型添加上运动函数,运动函数的作用就是让扭蛋根据其速度动起来,并且在接触到边界的时候反弹。

初始化

接下来就是把扭蛋们放在扭蛋机里面:

function init() {//初始化
    for (let i = 0; i < ballNum; i++) {//随机生成各色小球
        let index = Math.floor(4 * Math.random());
        awardList[i] = new Ball(index, ballList[index]);//新建小球对象
    }
    window.clearInterval(timer);//清除计时器
    timer = setInterval(function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布
        for (let i = 0; i < awardList.length; i++) {
            awardList[i].run();
        }//使小球运动
    }, 15);
}

这样子扭蛋机里面就已经有了小球。

开始扭蛋

开始扭蛋主要经历的过程就是点击按钮,扭蛋机扭蛋减少,获得相应扭蛋,中奖显示:

function play() {
    if (awardList.length === 0) {//奖池中没有小球
        alert('重新开始!');
        init();
        message.innerText = '点击抽奖';
    } else {
        window.clearInterval(timer);//清除计时器
        let r = awardList.pop();//将奖池中的小球减少
        timer = setInterval(function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布
            for (let i = 0; i < awardList.length; i++) {
                awardList[i].run();
            }//使小球运动
        }, 15);
        switch (r.color) {//小球掉落动画
            case 0:
                award.setAttribute('class', 'dropBall1');
                break;
            case 1:
                award.setAttribute('class', 'dropBall2');
                break;
            case 2:
                award.setAttribute('class', 'dropBall3');
                break;
            case 3:
                award.setAttribute('class', 'dropBall4');
                break;
        }
        setTimeout(function () {//扭蛋成功提示
            award.setAttribute('class', '');
            switch (r.color) {
                case 0:
                    message.innerText = '紫球!';
                    break;
                case 1:
                    message.innerText = '绿球!';
                    break;
                case 2:
                    message.innerText = '黄球!';
                    break;
                case 3:
                    message.innerText = '红球!';
                    break;
            }
        }, 1100);
    }
}

在这里扭蛋的掉落动画使用css动画的关键帧来完成:

.dropBall1 {content: "";position: absolute;left: 0;top: 0;width: 60px;height: 60px;display: block;background: url(../img/1.png) no-repeat;background-size: contain;animation: drop 1s ease-out forwards;-webkit-animation: drop 1s ease-out forwards;}
.dropBall2 {content: "";position: absolute;left: 0;top: 0;width: 60px;height: 60px;display: block;background: url(../img/2.png) no-repeat;background-size: contain;animation: drop 1s ease-out forwards;-webkit-animation: drop 1s ease-out forwards;}
.dropBall3 {content: "";position: absolute;left: 0;top: 0;width: 60px;height: 60px;display: block;background: url(../img/3.png) no-repeat;background-size: contain;animation: drop 1s ease-out forwards;-webkit-animation: drop 1s ease-out forwards;}
.dropBall4 {content: "";position: absolute;left: 0;top: 0;width: 60px;height: 60px;display: block;background: url(../img/4.png) no-repeat;background-size: contain;animation: drop 1s ease-out forwards;-webkit-animation: drop 1s ease-out forwards;}

@keyframes drop {
    0% {
        transform: scale(0.7);
    }
    50% {
        transform: scale(1);
    }
    51% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(100px);
    }
}

@-webkit-keyframes drop {
    0% {
        -webkit-transform: scale(0.7);
    }
    50% {
        -webkit-transform: scale(1);
    }
    51% {
        -webkit-transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(100px);
    }
}

结束

当然,需要最后加上init();来让扭蛋机跑起来,到这里,这个简单的扭蛋机就算完成了,效果预览

总结

虽然这个Demo比较简单,但是还是有一些注意点和一些可优化的地方。

注意点

img对象

在html中的这些img标签:

<img src="img/1.png" id="ball1" class="imgSrc">
<img src="img/2.png" id="ball2" class="imgSrc">
<img src="img/3.png" id="ball3" class="imgSrc">
<img src="img/4.png" id="ball4" class="imgSrc">

样式也写成display: none;,这样写是为了在js中获取img对象,当然也可以不在html中写这些img标签,直接在js文件中写:

var img = new Image(); 
img.src = 'img/1.png';

这样子也可以得到img对象,也可以用来绘制扭蛋。

清除计时器

代码中清除计时器都是在调用计时器之前,之所以这样做的目的,是因为不清除计时器,计时器会一直计时,导致动画越来越鬼畜。

画布

在canvas画布上绘制可能会出现图像不清晰、放大的情况,这种情况可以通过将canvas标签的width和height属性设置成和样式的width和height属性相同来解决。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 #HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 #HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 #HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 #HTML / CSS
HTML5实现签到 功能
Oct 09 #HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 #HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 #HTML / CSS
You might like
php中几种常见安全设置详解
2010/04/06 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python实现网站表单提交和模板
2019/01/15 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
印度在线购物网站:Paytmmall
2019/07/24 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
医学生自我鉴定范文
2013/11/08 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
应聘护士求职信
2014/07/21 职场文书
研究生个人学年总结
2015/02/14 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
中学教师教学工作总结
2015/08/13 职场文书
学习委员竞选稿
2015/11/20 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Python深度学习之Pytorch初步使用
2021/05/20 Python
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS