canvas實現扭蛋機動畫效果的示例代碼

  發布時間:2018-10-17 15:26:17   作者:幽小鬼   我要評論

這篇文章主要介紹了canvas實現扭蛋機動畫效果的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

轉眼間,已經實習了兩個月了,公司每個月都有個會員日的活動要做,這個月的任務是做一個扭蛋機抽獎的活動,數據什么的都有接口,那么前端剩下最大的任務就只剩下扭蛋機的動畫實現了。

背景

本來興高采烈地從網上找了一個扭蛋機動畫,但是發現它是直接用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屬性相同來解決。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • html5 http的輪詢和Websocket原理

    這篇文章主要介紹了html5 http的輪詢和Websocket原理的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-19
  • canvas實現扭蛋機動畫效果的示例代碼

    這篇文章主要介紹了canvas實現扭蛋機動畫效果的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-17
  • html5/css3響應式頁面開發總結

    響應式一套模板適應所有終端,但每種設備看到的版式可以是不一樣的。這篇文章主要介紹了html5/css3響應式頁面開發總結 ,需要的朋友可以參考下
    2018-10-16
  • 淺談HTML5中dialog元素嘗鮮

    對話框是web項目中用于用戶交互的重要部分,這篇文章主要介紹了淺談HTML5中dialog元素嘗鮮
    2018-10-15
  • canvas進階之如何畫出平滑的曲線

    canvas畫出來的線條存在鋸齒,不夠平滑。這篇文章主要介紹了canvas進階之如何畫出平滑的曲線,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看
    2018-10-15
  • 傳統HTML頁面實現模塊化加載的方法

    這篇文章主要介紹了傳統HTML頁面實現模塊化加載的相關知識,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2018-10-15
  • iframe在移動端的縮放的示例代碼

    這篇文章主要介紹了iframe在移動端的縮放的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-12
  • 詳解HTML5將footer置于頁面最底部的方法(CSS+JS)

    這篇文章主要介紹了詳解HTML5將footer置于頁面最底部的方法(CSS+JS)的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-11
  • HTML5實現簽到 功能

    這篇文章主要介紹了HTML5實現簽到 功能 的實現代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
    2018-10-09
  • HTML5 視頻播放(video),JavaScript控制視頻的實例代碼

    這篇文章主要介紹了HTML5 視頻播放(video),JavaScript控制視頻的實例代碼,需要的朋友參考下吧
    2018-10-08

最新評論

辽宁35选7开奖结果