Question

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

但是，当我尝试动画时，在开始向最终完成点（90度）前进之前，方块首先回到旋转0。

这似乎是因为＆＃34;现在＆＃34; animate（）＆＃34; s＆＃34; step＆＃34;选项从0开始，而不是元素的实际起始点，45度。

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

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

);

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

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

jquery animate步骤的起始值不正确

2 个答案: