javascript - 我如何使用 javascript 在 IOS 选择器 View 之类的对象上创建 flick "momemtum effect"

Question

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

上面的链接是一个“安全”类型的组合锁 当您单击其中一个数字时，它会移动到下一个。 (正如预期的那样)。 我正在尝试重新创建它，而是使用“轻弹” Action 来使用 ccs 3 rotate z 旋转它。问题是我找不到任何示例或“堆栈”问题来解决不涉及 Canvas 的动量和惯性。有没有其他方法可以“轻弹”数字，使它们旋转并减速并最终停止？有点像 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); }
}