3

画面の中央にオブジェクト (画像) があります。次に、このオブジェクトの周りにいくつかの円をアニメートしたいと思います。そのタスクを実現するための最良のアイデアは何ですか? JSアニメーション専用のライブラリを使用する必要がありますか?

ここに画像の説明を入力

4

4 に答える 4

11

次のような単純な三角法を使用できます。

オンラインデモはこちら

デモのスナップショット

function loop() {

    /// calc x and y position with radius of center +
    x = cx + radius * Math.cos(angle * Math.PI / 180);
    y = cy + radius * Math.sin(angle * Math.PI / 180);

    /// set satelite's center to that position
    $('#sat1').css({left:x - radiusSat, top:y - radiusSat});

    /// increase angle
    angle++;
    if (angle>360) angle = 0;

    /// loop
    requestAnimationFrame(loop);
}

デモは、5 つのサテライトすべてをサポートするように拡張されています。もちろん、他の衛星を自分で追加する必要があります。角度の増分を増やすことで速度を上げることができます。

参考文献に注意してください。投稿への新しいコメント: ここのコードと例は、目的の結果を達成するために何をする必要があるかの原則を示しています。SO の目的は無料のコード/完全なソリューションを作成することではないため、これは提供されていませんが、ここで示され、実証されている原則を使用して、それらを採用して、やりたいことを実行できるはずです。

CSS3 変換/アニメーション (分数位置を使用できるため、よりスムーズな動きが得られます)、キャンバス要素、jQuery パスなどを使用して、サテライトを移動する方法は他にもあります。

于 2013-09-11T08:23:41.343 に答える