如何使用線性（正常）緩動來旋轉對象？

看起來像jQueryRotate插件中的默認緩動不是線性的。圖像在旋轉結束時隨着減速旋轉。所以如果我使用遞歸函數圖像不會均勻旋轉。如何使用線性（正常）緩動來旋轉對象？

實施例：

下面是代碼：

HTML：

<div id="rotate_me" style="border: 1px solid red; width: 100px; height: 100px"></div>

JS：

var rotation = function(){ 
    jQuery("#rotate_me").rotate({ 
     angle: 0, 
     animateTo:360, 
     duration: 1600, 
     callback: rotation 
    }); 
} 
rotation();

來源

2013-06-02 Stas Ushakov

小提琴嗎？ – krishgopinath

對不起，但我不能將旋轉插件包含到小提琴中。在這裏放置代碼。 –

僅使用CSS3相當簡單：LIVE DEMO
可能是你可以在這一行找到你的答案？
（這個人是FF，對於其他BR添加-browser-specific屬性。）

img { 
    animation-duration: 3s; 
    animation-name: wowrotate; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 

@keyframes wowrotate{ 
    from { 
    transform: rotate(0deg); 
    } 
    to { 
    transform: rotate(360deg); 
    } 
}

來源

2013-06-02 17:18:35

謝謝你的迴應，Roko。但據我所知僅用於FF和webkit？我對嗎？ –

@StasUshakov帶着一些研究，你可以擴展爲其他瀏覽器（我不是在這裏破壞黨）（一個插件將需要IE8和更低） –

我發現溶液 - 它是添加參數：

easing: function (x,t,b,c,d){ 
      return c*(t/d)+b; 
     }

成旋轉功能。

說明關於緩解功能，您可以在這裏看到：

What is an easing function?

來源

2013-06-03 05:32:35

如何使用線性（正常）緩動來旋轉對象？

回答

相關問題