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

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/