jquery animate 步骤的起始值不正确答案

【问题标题】：jquery animate step has incorrect start valuejquery animate 步骤的起始值不正确
【发布时间】：2014-04-26 13:47:14
【问题描述】：

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

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

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

对我在这里做错了什么有什么想法吗？

http://jsfiddle.net/agentfitz/btz89/2/

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

// js
$(".square").animate(
    {
        rotation: 90,   
    },    
    {
        step: function(now, tween) {

            var $el = $(this);

            if (tween.prop === "rotation") {

                console.log(now); 
                $el.css('transform','rotate('+now+'deg)');  

            }

        },

        duration: 2000
    }

);

【问题讨论】：

标签： javascript jquery css jquery-animate

【解决方案1】：

请按照这个例子：http://jqversion.com/#!/1GLob7P

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;
}

【讨论】：

【解决方案2】：

您可以使用start 选项自定义属性起始值：

// 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
    }
);

【讨论】：