2

私はこのコードを使用していますが、ユニットが異なります:

-webkit-animation: play .8s steps(10) infinite;

と

@-webkit-keyframes play {
    from { background-position:    0px; }
    to { background-position: -500px; }
}

http://jsfiddle.net/simurai/CGmCe/light/を参照してください

しかし、次のコードを使用して、横スクロール画像を取得し続けます。

$('html > head').append("<style class='"+name+" animation'>@-webkit-keyframes "+name+" {from {background-position:"+start+"px -"+y+"px;} to{ background-position: -"+end+"px -"+y+"px; }} ."+name+"{background-image: url(assets/images/"+image+".png); -webkit-animation: "+name+" "+duration+"s steps("+current_key.length+") infinite; width:"+w+"px; height: "+h+"px;}</style>");

つまり、画像は変化せず、時間の経過とともに他の画像をスクロールし、ゲームのスプライト シート アニメーションに CSS アニメーションを使用しようとしています。

他の場所で問題を見つけることができませんでした。検索が間違っている可能性があります。読んでくれてありがとう！

4

1 に答える 1

1

あなたのコードと元のコードの違いは、元のスプライトではすでにスプライトがずっと左にあるということです。そのため、スプライトがスクロールすると、次の描画の白い部分が表示されないため、スクロールしているようには見えません。を設定する from {background-position:100px;}と、スクロールが表示され、私をよりよく理解できると思います。また、元のコードでさまざまな値を試しただけですが、10 ではなく 4 ステップを配置すると、完全なアニメーションは表示されませんが、十分に近いアニメーション 9 も使用できます。後でもう一度見て、より良い答えが得られるかどうかを確認します。ここにフォークされたjsfiddleがあるので、それを見ることができます。

編集：

アニメーション プロパティ、特に steps 関数を詳しく調べたところ、画像の幅 (50px) がステップ数 (10) だけ移動し、移動したい -500px が得られることがわかりました。たとえば、スプライトを 300px 右に配置したい場合は、アニメーション コードを次のように変更する必要があります。

@-webkit-keyframes play {
from { background-position:    300px; }
to { background-position: -200px; }
}

-500px の代わりに、この方法では既に 300px を移動しているため、残っている -200px を移動するだけで済みます。したがって、これらの値を変更する式を要約すると、次のようになります。 ( sprite_width* -number_steps) - ( from_brackground_position) = (to_background_position); number_steps が負であることに注意してください! また、パーセンテージとしても使用できることに注意してくださいfrom。最新の変更が加えられたjsfiddletoを確認してください。さらに質問やコメントがある場合は、お気軽に質問/コメントしてください。お役に立てれば！ありがとうございます。関数が非常によく説明されていて、その他が使用されているcss-tricks へのリンクを忘れていました。よろしければこちらをご覧ください。メキシコからこんにちわ！steps()propertiescss animations

于 2013-07-15T18:40:52.280 に答える