纯JavaScript旋转

Question

我想旋转一个小提琴形式的对象： http : //jsfiddle.net/nqC6T/但是，我的项目中没有JQuery库。

 var angle = 0;
    $(document).ready(function () {
        $('#rotate').click(function () {
            angle += 90;
            $('#div1').animate({ rotate: angle }, {
                step: function (now, fx) {
                    $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                    $(this).css('transform', 'rotate(' + now + 'deg)');
                },
                duration: 3000
            }, 'linear');
        });
    });

用纯JavaScript可以做到吗？

谢谢！

Answer 1

一个简单的基于Javascript的解决方案如下：

var obj = document.getElementById("div1");
var total = 100;
var current = 0;

setInterval(function(){ 

 if (current < total) {
      current += 1;
        obj.style.transform = 'rotate('+current+'deg)';
 }
}, 1);

这只是一个例子。 您绝对可以进一步改进此代码。 如Mohammad所述，您还可以使用基于CSS3的动画。

Answer 2

您可以通过简单地使用闭包自动返回给定的旋转增/减速率，来向要旋转的元素添加“速度”和“初始旋转位置”：

var division=document.getElementById("rotdiv");

function rotElem(startpos,rate){
  return function(mult){ 
  return division.style="transform:rotate("+ startpos+ mult*rate++ +"deg)";};
}
var rotelem = rotElem(0,1);
var atspeedof = setInterval(rotelem.bind(null),1000,10);

rotElem（0,1）您可以在开始旋转之前定义元素的可选起始位置“ 0”，并通过闭包返回变化的自增“单位”。

setInterval（rotelem.bind（null），1000,10）调用setInterval 每秒运行一次闭包，并将值“ 10”作为速率速度的乘数传递。 在setInterval时间之后更改最右边的参数会增加或减少旋转。

 var division = document.getElementById("rotdiv"); function rotElem(startpos, rate) { return function(mult) { return division.style = "transform:rotate(" + startpos + mult * rate++ + "deg)"; }; } var rotelem = rotElem(0, 1); var atspeedof = setInterval(rotelem.bind(null), 500, 10); 

 #rotdiv { position: relative; margin: auto; top: 50px; width: 80px; height: 80px; background-color: gray; } 

 <div id='rotdiv'> </div>