javascript - 如何使用 javascript 在 IOS 选择器视图等对象上创建轻弹“momemtum 效果”

Question

http://codepen.io/PageOnline/pen/Lkdue

上面的链接是一个“安全”类型的组合锁，当您单击它移动到下一个的数字之一时。（如预期的那样）。我正在尝试重新创建它，而是使用“轻弹”动作来使用 ccs 3 rotate z 旋转它。问题是我找不到任何例子或“堆栈”问题来解决不涉及画布的动量和惯性。有没有其他方法可以“轻弹”数字，使它们旋转并减速并最终停止？有点像IOS选择器？

提前致谢。

Answer 1

您可以将关键帧用于加速和减速部分。这是我能为你做的最多的事情。 http://jsfiddle.net/p8GWT/

    #logo:hover{
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function:ease-in-out;

  -moz-animation-name: rotateThis;
  -moz-animation-duration:2s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function:ease-in-out;

  -ms-animation-name: rotateThis;
  -ms-animation-duration:2s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function:ease-in-out;

  animation-name: rotateThis;
  animation-duration:2s;
  animation-iteration-count: 1;
  animation-timing-function:ease-in-out;
}
@-webkit-keyframes rotateThis {
    0% { -webkit-transform:scale(1) rotate(0deg); }
    10% { -webkit-transform:scale(1.1) rotate(0deg); }
    90% {-webkit-transform:scale(1.1) rotate(360deg);}
    100% { -webkit-transform:scale(1) rotate(360deg); }
}
@-moz-keyframes rotateThis {
    0% { -moz-transform:scale(1) rotate(0deg); }
    10% { -moz-transform:scale(1.1) rotate(0deg); }
    90% {-moz-transform:scale(1.1) rotate(360deg);}
    100% { -moz-transform:scale(1) rotate(360deg); }
}
@-ms-keyframes rotateThis {
    0% { -ms-transform:scale(1) rotate(0deg); }
    10% { -ms-transform:scale(1.1) rotate(0deg); }
    90% {-ms-transform:scale(1.1) rotate(360deg);}
    100% { -ms-transform:scale(1) rotate(360deg); }
}
@keyframes rotateThis {
    0% { transform:scale(1) rotate(0deg); }
    10% { transform:scale(1.1) rotate(0deg); }
    90% { transform:scale(1.1) rotate(360deg);}
    100% { transform:scale(1) rotate(360deg); }
}