3

円弧のパスに沿って画像をアニメーション化したい。この円弧は、円周の 45° セグメントです。

以前はこれを行う最も簡単な方法はhttps://github.com/weepy/jquery.pathを使用することでしたが、このコードは廃止されたようです (デモは Chrome では動作しなくなりました)。

そうでなければ、これを行うにはどうすればよいでしょうか？

4

1 に答える 1

2

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/

于 2013-10-29T09:36:59.833 に答える