あっという間にインターン生活2ヶ月になりました。 今月の課題はガシャポンの抽選イベントを行うことです。フロントエンドに残す 最大の課題はガシャポンマシンのアニメーションを実現することだけでした。
背景インターネットでガシャポンのアニメーションを見つけて興奮しましたが、CSS アニメーションを直接使用してガシャポンのアニメーションを記述することがあまり好きではなかったので、キャンバスを使用して描画することにしました。ガシャポンのランダムアニメーション。まず、簡単なガシャポン マシンのデモを作成し、エフェクトをプレビューしました。
始めるレイアウトガシャポン マシンのレイアウトは、基本的な背景にいくつかの要素を追加するだけで済みます。それ以外は重要ではありません。
<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 クラス=imgSrc>
添付のスタイルシート:
body {マージン: 0;パディング: 0;ボーダー: なし;}.bg {背景: url(../img/bg.png) 上部繰り返しなし;背景サイズ: 100%;オーバーフロー: 非表示;位置: 絶対;幅: 400ピクセル;高さ: 100%;マージントップ: 0;マージン左: 50%;-webkit-transform:変換(-50%);-moz-transform: 変換(-50%);-ms-transform: 変換(-50%);-o-transform: 変換(-50%);変換: 変換(-50%) );}#message {position: 絶対;text-align: center;height: 25px;font-size: 22px;margin-top: 110px;margin-left: 50%;-webkit-transform: 翻訳(-50%);-moz-transform: 翻訳(-50%);-ms-transform: 翻訳(-50%);-o-transform: 翻訳(-50%) ;transform: translation(-50%);}.lotterybg {background: url(../img/lotterybg.png) トップ no-repeat;background-size: 100%;オーバーフロー: 表示;幅: 80%;高さ: 100%;マージン上部: 160px;マージン左: 50%;-webkit-transform: 変換(-50%);-moz-transform: 変換(- 50%);-ms-transform: 変換(-50%);-o-transform: 変換(-50%);変換:翻訳(-50%);}#myCanvas {位置: 絶対;ボーダー: なし;幅: 285px;高さ: 170px;マージントップ: 15ピクセル;マージン左: 50%;-webkit-transform: トランスレート(-50%) );-moz-transform: 翻訳(-50%);-ms-transform: 翻訳(-50%);-o-transform:変換(-50%);変換: 変換(-50%);}.lighting {表示: ブロック;最大幅: 99%;マージン上部: 0;マージン左: 0;}#start {位置: 絶対;z-index: 3;width: 202px;margin-top: 413px;margin-left: 50%;-webkit-transform:変換(-50%);-moz-transform: 変換(-50%);-ms-transform: 変換(-50%);-o-transform: 変換(-50%);変換: 変換(-50%) );}.imgSrc {表示: なし;位置: 絶対;}.award {位置: 絶対;ボーダー: なし;幅: 60 ピクセル;高さ: 200 ピクセル;トップ: 470px;マージン左: 50%;-webkit-transform: 変換(-50%);-moz-transform: 変換(-50%);-ms-transform: 変換(-50%);-o-transform:翻訳(-50%);変換: 翻訳(-50%);}こうしてレイアウトが完成し、次はキャンバス上に画像を描いていくのがメインの作業になります。
ガチャアニメーションまず、さまざまな変数を定義します。
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;//Timer var award = document.getElementById('awardBall'); document.getElementById('メッセージ');ガチャオブジェクトガシャポン マシンの各ガシャポンはオブジェクトであるため、ガシャポン オブジェクトを定義する必要があります。
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; で表されるボールの色。 //ボールのマテリアルは { this .speedX = this.rand(20) - 10; } while (this.speedX < 5);//ボールの横軸の速度が変化します do { this.speedY = this.rand(20) - 10; );//ボールの垂直座標によって速度が変化します}受信ガシャポン オブジェクトの値インデックスは、1 ～ 4 の数字で表されるボールの色であり、img はガシャポンを描画するために使用される画像オブジェクトです。
ガチャ方法前のステップで、ガシャポンに属性が追加されました。次のステップでは、ガシャポンにメソッドを追加します。
Ball.prototype = { rand: function (num) {//乱数 return Math.random() * num; }, run: function () {//ボールの運動関数 this.x += this.speedX ; += 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() {//(let i = 0; i < ballNum; i++) の初期化 {//さまざまな色のボールをランダムに生成 let Index = Math.floor(4 * Math.random()); = 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('Start again!'); 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'); 'dropBall2'); ケース 2: award.setAttribute('class', 'dropBall3'); setTimeout(); //成功したガシャポン賞.setAttribute('class', ''); switch (r.color) { case 0: message.innerText = 'パープルボール '; 1: message.innerText = '緑色のボール! '; ケース 3: '赤色のボール! ';こちらのガシャポンの落下アニメーションはCSSアニメーションのキーフレームを使用して完成させています。
.dropBall1 {コンテンツ: ;位置: 絶対;左: 0;上: 0;幅: 60px;高さ: 60px;表示: ブロック;背景: url(../img/1.png) no-repeat;background-size : 含む;アニメーション: 1 秒のイーズアウト フォワードをドロップ; -webkit-animation: 1 秒のイーズアウト フォワードをドロップ;}.dropBall2 {コンテンツ: ;位置: 絶対;左: 0;上: 0;幅: 60px;高さ: 60px;表示: ブロック;背景: url(../img/2.png) 繰り返しなし;背景サイズ: 含む;アニメーション: 1 秒イーズアウト フォワードをドロップ;-webkit-animation: 1 秒イーズアウト フォワードをドロップ;}.dropBall3 {content: ;position:絶対;左: 0;上: 0;幅: 60px;高さ: 60px;表示: ブロック;背景: url(../img/3.png) 繰り返しなし;背景サイズ: 含む;アニメーション: ドロップ 1 秒イーズ-out フォワード;-webkit-animation: ドロップ 1 秒イーズアウト フォワード;}.dropBall4 {content: ;position: 絶対;left: 0;トップ: 0;幅: 60px;高さ: 60px;表示: ブロック;背景: url(../img/4.png) 繰り返しなし;背景サイズ: 含む;アニメーション: ドロップ 1 秒イーズアウト前方; -webkit-animation: 1 秒のイーズアウト フォワードをドロップします;}@keyframes ドロップ { 0% { 変換: スケール(0.7) }; 50% { 変換: スケール (1) } 51% { 変換: 変換 Y(0px); } 100% { 変換: 変換 Y(100px) }}@-webkit-keyframes ドロップ { 0% { -webkit-transform: スケール(0.7); } 50% { -webkit-transform: スケール(1) } 51% { -webkit-transform:変換Y(0px); } 100% { -webkit-transform: 変換Y(100px) }}仕上げるもちろん、ガシャポン マシンを実行するには最後に init(); を追加する必要があります。この時点で、この単純なガシャポン マシンは完成し、エフェクトがプレビューされます。
要約するこのデモは比較的シンプルですが、注意すべき点と最適化できる領域がいくつかあります。
注記
画像オブジェクト
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 クラス=imgSrc>
スタイルは、display: none; とも記述されます。これは、js で img オブジェクトを取得するために記述されます。もちろん、これらの img タグを html に記述せずに、js ファイルに直接記述することもできます。
var img = 新しい画像(); img.src = 'img/1.png';
このようにしてimgオブジェクトも取得できるので、ガシャポンを引くのにも使えます。
タイマーをクリアするタイマーが呼び出される前にコード内でタイマーがクリアされるのは、タイマーがクリアされないとタイマーがカウントし続け、アニメーションがどんどんおかしくなってしまうためです。
キャンバスキャンバス上に描画すると、画像が不鮮明になったり拡大されたりすることがありますが、この状況は、canvas タグの width 属性と height 属性をスタイルの width 属性と height 属性と同じに設定することで解決できます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。