1

私は小さな作業片を持っています。

HTML:

<div id="it">X</div>

CSS:

#it {
    background: blue;
    width: 40px;
    text-align: center;
    color: white;
    padding: 10px 0;
    border: solid 1px black;
    border-radius: 25px;
    position: absolute;
    left: 100px;
    top: 100px;
}

JS:

$('#it').animate({
    left: '+=100',
    top: '+=100'
}, 400, function() {
        $(this).animate({
        top: '-=100'
    }, 400, function() {
        $(this).animate({
            left: '-=100',
            top: '+=100'
        }, 400, function() {
            $(this).animate({
                top: '-=100'
            }, 400);
        });
    });
});

前述のすべてがこのjsfiddleにまとめられています

助けが必要なこと:

  1. JS をループします。その上、ネストされたコードの繰り返しを単純化するために何かできることはほぼ確実です。
  2. 動きを滑らかにします。つまり、4 本の直線ではなく、「傾いた 8」の形をなぞる 1 つの曲線でオブジェクトを飛行させます。
  3. 可能であれば、JS を取り除き、CSS3 に置き換えます。

また、私のプロジェクトでは必ずしも必要ではありませんが、途中でオブジェクトを回転させて、常に向かっている方向を向く方法があれば素晴らしいでしょう。まるでレースカーを上から見ているようです。

4

2 に答える 2

4

あなたの JavaScript はすでに CSS3 に変換されています。

ループし、CSS3 を使用し、IE 10、chrome、firefox、および safari で動作します。私は Opera を持っていないのでテストできず、IE 9 以下では CSS3 shiv を使用する必要があります。

@-webkit-keyframes move {
0%   {top:  100px;
      left: 100px;}
25%  {top:  250px;
      left: 250px;}
50%  {top:  100px;
      left: 250px;}
75%  {top:  250px;
      left: 100px;}
100% {top:  100px;
      left: 100px;}
}

そのコードは、あなたが持っていた JavaScript を置き換えます。アニメーションをセグメントで作成します。ただし、これはアニメーション構文の Webkit 部分にすぎません。すべてのベースを確実にカバーするために、標準仕様のアニメーション構文を@-moz-忘れないでください。@keyframes

-webkit-animation:move 5s infinite;

この CSS3 ルールは、宣言されたアニメーションを使用する必要がある要素をパーサーに伝えます。

アイテムの回転は、transform css 宣言を使用して行うことができます。これに取り組み、できるだけ早く更新します。これまでのところ、すべてのブラウザーで動作するように変換することができました。さらに、無限大の記号のように見えるように、アニメーション全体をご要望の角度に傾けました。複雑な計算やトランジションや追加のアニメーションの高度な使用がなければ、滑らかなコーナー ターンを取得することは現在非常に困難です。それを正しく行う方法がよくわかりません。何ができるか見ていきます。

于 2012-12-27T20:56:05.083 に答える
1

これを試してください：http：//jsfiddle.net/Tn7UE/1/transform:rotate();方向を変えるため に追加しました。およびsetIntervalforループ。

于 2012-12-27T20:54:31.063 に答える