需求是：模仿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();
- 思考：如何增加某一块的出现动作概率？（个人参考答案会在评论区统一给出）。
