使擺動（或反彈）效應放緩

Question

我想這將適用於擺動或彈跳。如何在another post這裏發佈此代碼的示例如下：http://jsfiddle.net/gVCWE/149/

如何讓擺動速度減慢到停止？

.box{ 
    width:50px; height:50px; 
    background: yellow; 
    border: 1px solid black; 
    margin:100px; 
    position: relative; 
    float: left; 
    -moz-animation: 3s ease 0s normal none infinite swing; 
    -moz-transform-origin: center top; 
    -webkit-animation:swing 3s infinite ease-in-out; 
    -webkit-transform-origin:top; 
} 

@-moz-keyframes swing{ 
    0%{-moz-transform:rotate(-3deg)} 
    50%{-moz-transform:rotate(3deg)} 
    100%{-moz-transform:rotate(-3deg)} 
} 
@-webkit-keyframes swing{ 
    0%{-webkit-transform:rotate(-3deg)} 
    50%{-webkit-transform:rotate(3deg)} 
    100%{-webkit-transform:rotate(-3deg)} 
} 

我也想做其他'慣性效應'。如果有必要，我不介意使用JavaScript或JQuery。我覺得CSS單獨或關鍵幀不足以滿足我想要做的事情。

我很好用的setInterval，做這樣的事情：

function prepareAnimation() 
{ 
    setInterval(slowAnimation, 200) 
} 

function slowAnimation() 
{ 
    speed=$(".box").getSpeed(); // how would I write getSpeed? 
    if(speed<=0) return; 
    speed = speed - .1; 
    $(".box").setSpeed(speed); // how would I write setSpeed (degree would be set in here too)? 
} 

我不知道通過腳本更改動畫屬性的最佳方式。特別是當涉及到在動畫中間改變持續時間時，我不確定是否有可能。謝謝。

Answer 1

http://jsfiddle.net/gVCWE/150/

(function swing() { 
    var ang = 20, 
     dAng = 1, 
     dir = 1, 
     box = document.getElementById("box"); 

    (function setAng(ang){ 
     box.style.WebkitTransform = 'rotate('+ang+'deg)'; 
     box.style.MozTransform = 'rotate('+ang+'deg)'; 
     dir = -dir; 
     if (Math.abs(ang) > 0) 
      setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng)); 
    })(ang); 
})();​ 

CSS

.box{ 
    width:50px; height:150px; 
    background: yellow; 
    border: 1px solid black; 
    margin:100px; 
    position: relative; 
    float: left; 
    -moz-transition:-moz-transform 1s ease-in-out; 
    -moz-transform-origin: center top; 
    -webkit-transition:-webkit-transform 1s ease-in-out; 
    -webkit-transform-origin:top; 
} 

可以通過使ang和dir負的初始值切換的初始方向。您可以通過增加dAng的值來更快地減慢「擺動」，但它應該是ang的一個因子。