需求是：模仿windowsPhone桌面，一個個方塊，每個方塊隨機進行動作。動作分兩種類型：1，晃動；2，翻轉+晃動。隨機選擇方框進行動作，隨機選擇動作類型。
css:
@keyframes overturn {
0%{transform: rotateY(0deg);}
24.99%{transform: rotateY(87deg);}
50%{transform: rotateY(-10deg);}
66%{transform: rotateY(10deg);}
82%{transform: rotateY(-5deg);}
99%{transform: rotateY(5deg);}
100%{transform: rotateY(0deg);}
}
@keyframes waggle {
0%{transform: rotateY(-20deg);}
15%{transform: rotateY(15deg);}
30%{transform: rotateY(-13deg);}
50%{transform: rotateY(10deg);}
65%{transform: rotateY(-7deg);}
70%{transform: rotateY(5deg);}
85%{transform: rotateY(-3deg);}
90%{transform: rotateY(3deg);}
95%{transform: rotateY(-2deg);}
100%{transform: rotateY(0deg);}
}
.animate1{
-webkit-animation: overturn 3s;
}
.animate2{
-webkit-animation: waggle 3s;
}
js:
function overTurn(){
var over;
var childNode = $('.flip');
var childNum = childNode.length;
console.log(childNum);
over = setInterval(turn, 3000);
var animate="";
var idx = Math.floor(Math.random()*2);
if(idx ==0){
animate="animate1";
}else if(idx==1){
animate="animate2";
};
function turn(){
var num = Math.floor(Math.random()*childNum);
childNode.removeClass(animate);
childNode.eq(num).addClass(animate);
};
function stopOverTurn(){
clearInterval(over);
}
};
overTurn();
- 思考：如何增加某一塊的出現動作概率？（個人參考答案會在評論區統一給出）。
