Javascript jquery动画步骤的起始值不正确

使用jquery的animate方法执行简单的旋转动画时遇到问题。我试图以45度旋转开始一个正方形，然后，当单击按钮时，将正方形再旋转45度（以90度完成）

但是，当我尝试制作动画时，正方形首先会在开始向其最终完成点（90度）前进之前猛拉回旋转0

这似乎是因为animate（）的“step”选项的“now”参数是从0开始的，而不是元素的实际起点45度

你觉得我做错了什么吗

---

请遵循以下示例：

Javascript代码：

$("a").click(function(e){
    e.preventDefault();

    var initRotation = 0;

    $(".square").animate(
        {
            rotation: 45, // how many degrees do you want to rotate
        },    
        {
            start: function(promise){
              initRotation = getRotationDegrees($(this));
            },
            step: function(now, tween) {

                var $el = $(this);
                if (tween.prop === "rotation") {

                    var newRotation = initRotation + now;

                    $el.css('-webkit-transform','rotate('+newRotation+'deg)');
                    $el.css('-moz-transform','rotate('+newRotation+'deg)'); 
                    $el.css('transform','rotate('+newRotation+'deg)');  
                }

            },
            duration: 2000
        }
    );
});

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle +=360 : angle;
}

$（“a”）。单击（功能（e）{
e、 预防默认值（）；
var-initRotation=0；
$（“.square”）.animate(
{
旋转：45，//要旋转多少度
},    
{
开始：功能（承诺）{
initRotation=getRotationDegrees（$（this））；
},
步骤：函数（现在，tween）{
var$el=$（本）；
如果（tween.prop==“旋转”）{
var newRotation=initRotation+now；
$el.css（'-webkit transform'，'rotate（'+newRotation+'deg'）；
$el.css（'-moz transform'，'rotate（'+newRotation+'deg'）；
$el.css（'transform'，'rotate（'+newRotation+'deg'）；
}
},
持续时间：2000年
}
);
});
函数getRotationDegrees（obj）{
变量矩阵=obj.css（“-webkit transform”）||
css（“-moz转换”）||
对象css（“-ms转换”）||
对象css（“-o-transform”）||
对象css（“转换”）；
如果（矩阵！=“无”）{
var values=matrix.split（“（”）[1]。split（“）”）[0]。split（“，”）；
var a=数值[0]；
var b=数值[1]；
变量角度=数学圆（数学atan2（b，a）*（180/数学PI））；
}else{var angle=0；}
返回（角度<0）？角度+=360：角度；
}

您可以使用

开始

选项自定义属性开始值：

// css
.square {
  transform: rotate(45deg); // starting point
}

// js

var startRotation = 45;

$(".square").animate(
    {
        rotation: 90,   
    },    
    {
        start: function(promise) {
            for (var i = 0; i < promise.tweens.length; i++) {
                var tween = promise.tweens[i];
                if (tween.prop === "rotation") {
                    tween.start = startRotation;
                }
            }
        },
        step: function(now, tween) {
            var $el = $(this);
            if (tween.prop === "rotation") {
                console.log(now); 
                $el.css('transform','rotate('+now+'deg)');  
            }
        },
        duration: 2000
    }
);

//css
.广场{
变换：旋转（45度）；//起点
}
//js
var startRotation=45；
$（“.square”）.animate(
{
轮换：90，
},    
{
开始：功能（承诺）{
for（var i=0；i

// css
.square {
  transform: rotate(45deg); // starting point
}

// js

var startRotation = 45;

$(".square").animate(
    {
        rotation: 90,   
    },    
    {
        start: function(promise) {
            for (var i = 0; i < promise.tweens.length; i++) {
                var tween = promise.tweens[i];
                if (tween.prop === "rotation") {
                    tween.start = startRotation;
                }
            }
        },
        step: function(now, tween) {
            var $el = $(this);
            if (tween.prop === "rotation") {
                console.log(now); 
                $el.css('transform','rotate('+now+'deg)');  
            }
        },
        duration: 2000
    }
);