模仿Windowsphone桌面的小程序

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

你可能感兴趣的:(模仿Windowsphone桌面的小程序)