Question

看起来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();

Answer 1

仅使用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);
  }
}

Answer 2

我找到了解决方案 - 它是添加参数：

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

进入旋转功能。

关于缓和功能的说明，你可以在这里看到：

What is an easing function?

如何使用线性（正常）缓动旋转对象？

2 个答案: