jquery - 如何沿弧线为图像设置动画

Question

我想沿着弧线的路径为图像制作动画。该弧是圆周的 45o 段。

我知道以前最简单的方法是使用https://github.com/weepy/jquery.path，但是此代码似乎已失效（演示不再适用于 Chrome）。

否则我将如何处理？

Answer 1

您可以在动画中使用step回调来制作自己的自定义效果。动画一些没有可见效果的属性，并从中设置坐标：

$('div').css({ fontSize: 0 }).animate({
    fontSize: 45
},{
    duration: 2000,
    easing: "swing",
    step: function(t, fx){
        var a = t / 57.296; // from degrees to radians
        var x = 100 + Math.cos(a) * 50;
        var y = 100 + Math.sin(a) * 50;
        $(this).css({ left: x, top: y });
    }
});

演示：http: //jsfiddle.net/Guffa/a9eXE/