3

イージングプラグインでjQueryを使用していますが、任意の長さのアニメーションで一定のイージング時間を実現したいと考えています。

Short animation (X milliseconds)
|<<<<|-------------------|>>>>|
 10ms                     10ms

Long animation (2X milliseconds)
|<<<<|-----------------------------------------|>>>>|
 10ms                                           10ms

ここで、 <<<</>>>>はイージングイン/イージングアウト期間であり、---一定速度の動きを示します。

そのためのイージング関数/プラグインはありますか、それともこのような各アニメーションに時間依存のカスタム関数を与える必要がありますか？はいの場合、どのような種類ですか？

4

2 に答える 2

4

.animate()チェーンアニメーションの呼び出しでコールバック関数を使用できます。

var $obj     = $('#some-id'),
    ani_dist = 500;

//animate first easing
$obj.stop().animate({ left : 100 }, 500, 'easeOutCirc', function () {

    //animate main body of the animation
    $obj.animate({ left : (ani_dist - 100) }, 1000, 'linear', function () {

        //animate the last easing
        $obj.animate({ left : ani_dist }, 500, 'easeInCirc');
    });
});

アニメーションをアニメーション化するために何を設定するか、またはどの期間を使用するかはわかりませんが、アイデアはあります。

于 2012-01-11T17:50:10.193 に答える
0

アニメの女王を使うべきだと思います

//animate first easing
$obj.stop()
    .animate({ left : 100 }, 500, 'easeOutCirc')
    .animate({ left : (ani_dist - 100) }, 1000, 'linear')
    .animate({ left : ani_dist }, 500, 'easeInCirc')
;

jQuery.animateの例2を参照してください

于 2013-07-21T12:08:44.500 に答える