jQuery_jqueryを使用して実装されたサイコロ投げゲームのアニメーション効果-jsチュートリアル-php.cn

実装原理：サイコロを投げた後、jQueryのanimate()関数でサイコロの変位を変更し、途中で遅延効果を加え、サイコロの背景を変更し、最後にアニメーションを停止します。ランダムに生成されたポイントに到達し、ロールされたポイントの数が表示されます。実際、アニメーションプロセスでは、異なる画像の複数のフレームを追加します (Flash アニメーションビデオのフレームと同じです)。フレームごとに実行すると、アニメーション効果がより良くなります。
1. 準備
この例では、インターネットから入手したサイコロ素材を使用します。写真 (1) -6点）と中間トランジション効果（モーションブラー処理）を施した画像を同じ画像上に配置し、dice.pngとして保存し、サイコロの背景画像として使用します。
jQuery ライブラリをロードします。これは必要です。

コードをコピーコードは次のとおりです:

次に、HTML ページの本文に次のコードを追加します。#dice はサイコロを配置するために使用され、#result はプロンプトを表示するために使用されます。情報。

コードをコピーコードは次のとおりです:

上のサイコロを直接クリックしてください。

2. CSS コード
画像 dice.png を .dice にロードするために背景を使用します。次に、いくつかのスタイルを使用して、さまざまなサイコロの数字を配置し、さまざまな背景位置の値を通じてエフェクト画像をトランジションしました。トランジション効果画像に簡単なぼかし加工を施しました。 CSS3を使用して画像のぼかし効果を加工することもできます。なお、#dice_mask は後述する連打防止のために使用されます。

コードをコピーしますコードは次のとおりです。

.wrap{width:90px height:90px; :120px 自動 30px 自動; 位置:相対} 
.dice{幅:90px; 高さ:90px; 背景:url(dice.png) 繰り返しなし;} 
.dice_1{背景位置:-5px - 4px} 
.dice_2{背景の位置:-5px -107px} 
.dice_3{背景の位置:-5px -212px} 
.dice_4{背景の位置:-5px -317px} 
 .dice_5{背景の位置:-5px -427px} 
.dice_6{背景の位置:-5px -535px} 
.dice_t{背景の位置:-5px -651px} 
.dice_s{背景-位置:- 5px -763px} 
.dice_e{background-position:-5px -876px} 
p#result{text-align:center; font-size:16px} 
p#result span{font -太さ:#f30;マージン:6px} 
#dice_mask{幅:90px; 背景:#fff; 上:0; 0; z -index:999} 

3. jQuery コード
サイコロをクリックすると、最初にサイコロのスタイルをプリセットします (最後のアニメーションの後にスタイルをクリアします)。色透明な #dice_mask を使用して、繰り返しクリックされないようにサイコロを覆い、1 から 6 までの乱数を生成します。次に、animate() 関数を使用してサイコロの変位を変更し、サイコロのクラスを変更して、遷移のぼやけた背景画像が表示され、少し遅れて次のフレームのアニメーションに入ります。アニメーションの最後に、サイコロのクラススタイルが dice_x に配置されます。

コードをコピーコードは次のとおりです:

$(function(){ 
 var dice = $("#dice"); 
 dice.click(function(){ 
 dice.attr("class","dice"); //清除上次アニメーション画後の数量 
 dice.css("cursor","default") 
 $(".wrap").append("< ;/div>");//加遮罩 
 var num = Math.floor(Math.random()*6 1);//产生随机数1-6 
 dice.animate({left: ' 2px'}, 100,function(){ 
 dice.addClass("dice_t") 
 }).delay(200).animate({top:'-2px'},100,function(); { 
 dice.removeClass("dice_t").addClass("dice_s") 
 }).lay(200).animate({opacity: 'show'},600,function(){ 
 dice.removeClass("dice_s").addClass("dice_e"); 
 }).delay(100).animate({left:'-2px',top:'2px'},100,function(){ 
 dice.removeClass("dice_e").addClass("dice_" num); 
 $("#result").html("您掷得点数是" num " dice.css('cursor','pointer'); 
 $("#dice_mask").remove();//移除遮罩 
 }); 
 }); 
});

重複ポイントの防止に関する多くの関数、jQuery が提供する one()、live()、bind()、on() などの関数がこの例にあります行不通，所以我想了个办法，当点击色子後開始アニメーション画時，用一和色子大小一样的透明遮蔽罩层将色子遮住，使用在漫画运行中不可连续重复点击色子，当アニメーションの実行が完了したら、再度遮蔽層を削除すると、このような色子が再度ポイントされることができます。このようなアニメーション効果は、Flash の代わりに jQuery を使用することで実現できますが、Flash を使用しない場合でも同様です。 
 の関連技術の文章と例のコードは、色子の抽出頻度を制御することができ、これも趣味の 1 つです。