html5 animate for game

最近作的活動頁面，記錄下：
負責了兩塊的活動效果：翻牌和開寶箱；

翻牌部分的要點：

翻牌關鍵css

父級元素設置3D視角：

-webkit-perspective: 1000;
perspective: 1000;

CSS @keyframes 規定動畫（各類瀏覽器記得加前綴）:

@keyframes flipintoleft {
        from { transform: rotateY(-90deg) scale(.9); }
        to { transform: rotateY(0); }
    }

使用：

.flip {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
    backface-visibility: hidden;
    transform: translateX(0);
}

.flip.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-webkit-animation-duration: 175ms;
transform: rotateY(-90deg) scale(.9);
animation-name: flipouttoleft;
animation-duration: 175ms;

}

翻牌html

<div class="viewport-flip">
   <a href="#" class="flip out"><img src="images-back.jpg" alt="背面"></a>
   <a href="#" class="flip"><img src="images.jpg" alt="正面"></a>
</div>

翻牌js

經過js來切換樣式達到動畫效果

if ($(this).hasClass("out")) {
                    eleBack = $(this);
                } else {
                    eleFront = $(this);
                }

開寶箱要點

定位圖片中的各個數字Y座標

var step = (imgH/10).toFixed(2),
    posArr = [];
    //數字位置
    for(var i=0;i<=9;i++){
        posArr[i] = step*i;
    }

生產三個隨機數，根據隨機數計算圖片Y座標，滾動到位置

n1 = Math.round(Math.random()*9);
...
finPos_1 = posArr[n1]
...
$("#mation-1").animate({"top":"-"+finPos_1+"px"},1000);
...
$("#mation-1").attr("date-num",n1);

播放音樂

<audio id="openAudio" src="slot.mp3" preload="preload"></audio>
document.getElementById("openAudio").play();

手指滑動

用了插件
jquery.touchSwipe.min.js

$("#mation-1,#mation-2,#mation-3").swipe({
        swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
          slotSwipe($(this),direction); 
        },
        threshold:2
      });


//手指滑動方向函數   
var slotSwipe =function(obj,dir){
        var dNum =parseInt(obj.attr("date-num"));
        if(dir == "down"){
                dNum--;
                if(dNum < 0){
                    return false;
                }
        }else if(dir == "up"){
                dNum++;
                if(dNum > 9){
                    return false;
                }
        }
        obj.attr("date-num",dNum);
        obj.animate({"top":"-"+posArr[dNum]+"px"},100);
    }

demo:
https://github.com/dandanze/flip-css3-animation