この記事では、ホイール抽選を簡単に実装するためのVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 1.0 考察ホイール宝くじは非常に一般的です。私はこれまでこれについて書いたことはありませんでした。今、それについて書く時間があります。分析は次のとおりです。 1.1 ターンテーブルの回転 ----- 変換の回転を使用して解決できます 1.1 はじめに 上記の考え方から、実行すべき手順がわかります。まずは写真を撮りましょう。 このディスクには 10 個の部分があり、各部分は 360/10 = 36 度です。2 番目の ----> 20 枚の金貨に留まりたい場合、時計回り (最初の位置を含めて 1 としてカウント) に、合計(2 - 1)* 36 = 36回転する必要があります。このようにして、停止位置まで回転するために必要な角度は、(ターゲット - 1)*36 であると結論付けることができます。 1.2 勝利コールバック 上記の手順から、目標位置への制御方法がわかったので、次のステップはイベント通知です。最初は、回転時間を固定してからタイマーを開始することを考えました。明らかに、これは信頼できません。アニメーションが終了した後に通知する方法はありますか? transitionend、要素アニメーションの終了イベントを監視できるこのイベントを見つけましたが、互換性の問題で処理するのは簡単ではありません /** アニメーション終了イベント対応**/ どの遷移イベント(){ el = document.createElement('span') とします。 遷移 = { '遷移':'遷移終了', 'OTransition':'oTransitionEnd', 'MozTransition':'遷移終了', 'WebkitTransition':'webkitTransitionEnd' }; for(let t in transitions){ if(el.style[t] !== 未定義){ transitions[t]を返します。 } } el = null; } 2.0 完全な例回転位置とイベント通知を制御する方法がわかったので、始めましょう。 栗: 完全なコード <テンプレート> <div> <h3>ロータリードロー</h3> <div class="round_box"> <img class="img_rotate" ref="rotImg" src="../assets/zhuan.png" alt=""> <div class="center"> <div class="ポインタ" ></div> </div> </div> <button @click="toDraw" >クリックして描画</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前:'rotaryDraw', データ() { 戻る { 回転: 0, リセット回転: 0, ヒットID: 1, // 1-10 描画ステータス: false } }, 非同期マウント() { これを待ちます。$nextTick(); evenTransition = this.whichTransitionEvent(); とします。 img = this.$refs.rotImg; とします。 that = this とする; const hitAre = ['30M トラフィック パッケージ','20 ゴールド コイン','20M トラフィック パッケージ','10M トラフィック パッケージ','5 ゴールド コイン', 「ご参加ありがとうございました」、「ゴールドコイン10枚」、「50Mトラフィックパッケージ」、「ゴールドコイン2枚」、「100Mトラフィックパッケージ」 ]; // アニメーションの終了を監視します。img.addEventListener(evenTransition,tranHand,false); 関数tranHand() { // リセット that.resetRotate = that.rotate > 360 ? that.rotate % 360 : 0; img.style.transition = "なし 0秒 遷移 0秒"; img.style.transform = `rotate(${that.resetRotate}deg)`; alert(`抽選結果 [ ${hitAre[that.hitId - 1]} ]`); that.drawStatus = false } }, メソッド: { 始める() { this.$refs.rotImg.style.transition = "すべて 3 秒、0 秒で遷移"; this.$refs.rotImg.style.transform = `rotate(${this.rotate}deg)`; }, 描画する() { if(this.drawStatus){ console.log('抽選進行中'); 戻る } // ステータスをマーク this.drawStatus = true /** * ディスクは全部で10枚あり、それぞれ36度、停止位置(id)度(id - 1)* 36 * ベース3円360*4 * this.rotate 現在の角度* **/ リセット = 360 * 4; idx = this.getRandomInt(1,11); とします。 // ヒットを設定 this.hitId = idx; // さらに角度を回転させる必要がある let addRotate = this.resetRotate > 0 ? 360 - this.resetRotate : 0; // 合計角度 let allRotate = this.rotate + (idx - 1) * 36 + reset + addRotate; // 角度制限 this.rotate = this.setRotate(allRotate); this.start() }, // 再帰計算角度は360*6を超えません 回転角度を設定します。 休止状態を deg - 360 とします。 残りが 360*6 より大きい場合は、 this.setRotate(rest) : deg; を返します。 }, getRandomInt(最小値, 最大値) { // 上向きに集める min = Math.ceil(min); // 下向きに収集 max = Math.floor(max); return Math.floor(Math.random() * (max - min)) + min; //最大値は含まず、最小値を含む}, // アニメーション対応 whichTransitionEvent(){ el = document.createElement('span') とします。 遷移 = { '遷移':'遷移終了', 'OTransition':'oTransitionEnd', 'MozTransition':'遷移終了', 'WebkitTransition':'webkitTransitionEnd' }; for(let t in transitions){ if(el.style[t] !== 未定義){ transitions[t]を返します。 } } el = null; } } } </スクリプト> <スタイル lang="scss" > .img_rotate{ 変換: 回転(0度); } .ラウンドボックス{ 幅: 100%; 最大幅: 375px; 位置: 相対的; オーバーフロー: 非表示; 画像{ 幅: 100%; } 。中心{ 位置: 絶対; 上位: 50%; 左: 50%; 変換: translate(-50%,-50%); .ポインタ{ 幅: 5px; 高さ: 90px; 背景色: #f40; 位置: 絶対; 上: -90px; } .ポインタ::before{ コンテンツ:''; 幅: 0; 高さ: 0; border-top: 15px 透明の実線; border-right: 15px 透明の実線; 下境界線: 15px 実線 #f40; border-left: 15px 透明の実線; 位置: 絶対; 上: -20px; 左: 50%; 変換: translateX(-50%); } } } </スタイル> 3.0 ヒント一般的に、注意すべき点がいくつかあります 1. アニメーションが始まる前にロックする 2.アニメーション終了後に通知し、ステータスをリセットする /** 例えば: ベース3円リセット360*3 2番目の停止位置は(2 - 1)* 36 = 36です 合計角度 360*3 + 36 アニメーションが停止した後は、回転し続けるため角度を増やし続けることは不可能なので、360*3 + 36 をリセットする必要があります。実際には、36 度回転してから必要な角度を増やすことを検討できます**/ 3. 回転を続けます。計算は初期値の 30M フローに基づいているため、回転は依然として 30M から開始する必要があります。このとき、現在の停止位置が 300 度であると仮定すると、つまり、60 度回転すると初期位置に戻ります。私もこの考えに従ってリセットしました。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Mac での MySql の詳細なインストールと構成
>>: Centos7 で crontab + シェル スクリプトによる定期的な自動ファイル削除の問題を解決する
SRIOVの導入、VFパススルー構成、パケット転送速度性能テスト目次1. SRIOVの紹介2. 環境...
この記事では、キャンバスとjsを使用して簡単な飛行機戦争を実装する方法を参考までに紹介します。具体的...
MySQL ステートメントの書き込み順序と実行順序には大きな違いがあります。書き順、mysql の一...
目次序文zxライブラリ$`コマンド` CD()フェッチ()質問()寝る()スローしない()チョークフ...
Linuxにunzipコマンドがない問題の解決策unzipコマンドを使用して.zipファイルを解凍す...
序文:データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...
目次序文1. アプリケーションコンポーネント2. アプリケーションの種類3. アプリケーションサービ...
この記事では、参考までにVue More Filter Itemウィジェットの実装方法を例として紹介...
FastDFSとNginxの統合:トラッカーは、負荷分散と高可用性のために Nginx と組み合わせ...
目次BOM (ブラウザ オブジェクト モデル) 1. ウィンドウブラウザのウィンドウサイズを取得する...
NULL 値によると、MySQL の NULL 値は単にデータがないことを意味します。NULL 値は...
注: nginxはbrew経由でインストールされますウェブサイトのルートディレクトリ: /opt/h...
要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS....
背景先週、会社で MySQL レプリケーションのトレーニングを受けたので、今週末は学んだことを実践す...
目次序文Lua スクリプトnignx.conf の設定Dockerfileの設定序文データベースやそ...