如何进行旋转然后停止？答案

【问题标题】：How to make a rotation and then stop?如何进行旋转然后停止？
【发布时间】：2012-11-16 12:17:38
【问题描述】：

我有一个 div 开始旋转，但我不知道如何让它以某个角度停止。目前所发生的只是它继续前进。我的问题是如何让它停在像 96 度这样的角度。

<script type="text/javascript">
$(function() {
var $elie = $("#super");
rotate(1);
function rotate(degree) {        
    $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
    $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
    timer = setTimeout(function() {
     rotate(++degree);
    },2);
}
});
</script>

【问题讨论】：

如果您将计时器延迟设置为 2 (ms)，您将扼杀性能。将其设置为 16 - 40 毫秒 (25-60 fps) 范围内的值。

标签： javascript jquery rotation

【解决方案1】：

要在 96 度停止，试试这个：

if (degree < 96) {
    timer = setTimeout(function() {
        rotate(++degree);
    }, 2);
}

Example fiddle

【讨论】：

@ktamlyn 打到 97 的好点 - 我已经解决了这个问题。至于以功能方式安装，我不确定您的意思。 rotate 函数在命中 96 后将不再被调用，因此永远不会再次实例化超时。
@AliBOOM 没问题，很高兴为您提供帮助:)

【解决方案2】：

试试这样的：

<script type="text/javascript">

var stopAtValue = 96;

$(function() {
var $elie = $("#super");
rotate(1);
function rotate(degree) {        
    $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
    $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
    timer = setTimeout(function() {
    if(degree==stopAtValue) {
      // do nothing
    } else {
      rotate(++degree);
    },2);
}
});
</script>

【讨论】：

虽然这可行，但每隔两毫秒使用相同的值连续调用rotate 函数并不好。