jquery - 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 中看到的那样，旋转有效，但在第二次单击按钮时，元素不会简单地再次旋转，它首先被重置，然后旋转。

如何防止这种“重置”发生？

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

Answer 1

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

$.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在递增之前获取 Angular 值:

prevAngle = angle
angle +=45;

---

发送/获取 prevAngle 到 animateRotate 函数:

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

和

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

---

最后根据 prevAngle 值设置动画旋转:

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