Rails 4 - jQuery 动画旋转 - 几乎可以正常使用

Question

我发现了一段非常有用的代码，它允许您为元素的旋转设置动画，虽然它对我来说几乎完美，但结果是不稳定的。

$.fn.animateRotate = function(angle, duration, easing, complete) {
    var args = $.speed(duration, easing, complete);
    var step = args.step;
    return this.each(function(i, e) {
        args.complete = $.proxy(args.complete, e);
        args.step = function(now) {
            $.style(e, 'transform', 'rotate(' + now + 'deg)');
            if (step) return step.apply(e, arguments);
        };

        $({deg: 0}).animate({deg: angle}, args);
    });
};

$(".glyphicon-remove").on("click", function() {
    $(this).animateRotate(45, 1000);
    preventDefault();
});

正如在我的 jsFiddle 中看到的那样，旋转有效，但是在第二次单击按钮时，元素不会简单地再次旋转，它首先被重置，然后旋转。

如何防止这种 "reset" 发生？

https://jsfiddle.net/rnqzdLc9/3/

Answer 1

您必须将当前所需的角度存储为下一次点击的起始值:

$.fn.animateRotate = function(angle,prevAngle, duration, easing, complete) {
    var args = $.speed(duration, easing, complete);
    var step = args.step;
    return this.each(function(i, e) {
        args.complete = $.proxy(args.complete, e);
        args.step = function(now) {
            $.style(e, 'transform', 'rotate(' + now + 'deg)');
            if (step) return step.apply(e, arguments);
        };

        $({deg: prevAngle}).animate({deg: angle}, args);
    });
};
var angle = 0;
var prevAngle = 0

$(".glyphicon-remove").on("click", function(e) {
    prevAngle = angle
    angle +=45;
    $(this).animateRotate(angle, prevAngle, 1000);
    e.preventDefault();
});

Updated Fiddle

首先创建变量，包括新变量prevAngle:

var angle = 0;
var prevAngle = 0

prevAngle在递增之前获取 angle 值：

prevAngle = angle
angle +=45;

Send/Get animateRotate 函数的 prevAngle :

$(this).animateRotate(angle, prevAngle, 1000);

和

$.fn.animateRotate = function(angle,prevAngle, duration, easing, complete) {
...
}

最后从 prevAngle 值动画旋转：

$({deg: prevAngle}).animate({deg: angle}, args);

Rails 4 - jQuery 动画旋转 - 几乎可以正常使用

Rails 4 - jQuery animate rotate - almost functional

css

jquery

animation

ruby-on-rails

rotation