HTML5キャンバスアニメーションはエッジからアニメーション化され、シームレスに戻ります。

Question

私は、異なる速度でページの周りに浮かぶ多くの異なる要素を持っています。要素がページの右側を離れると、要素は左側に浮いていきます。 element.xがcanvas.width、element.x = -100より大きい場合、これは簡単です。これはそれを少し遠くに設定しているので、はっきりと見えません。しかし、今ここに問題があります。要素がページの左側に残っている場合はどうすればいいですか？いくつかの要素が自然に後ろに浮動キャンバスの外になりますので、我々はelement.x < canvas.width場合言う傾ける。あなたの助けを

感謝を

Answer 1

これについて移動するいくつかの方法があります。

完全にオフスクリーンの場合（交差がない場合）は、要素をもう一方の側に「移動」するだけです。それを移動すると、常に1つのピクセルだけスクリーンを横切ることになります。

もう1つは、最後の場所を追跡したり軌跡を知ったりすることで「どこから来たのか」を確認することです（アニメーションを作成している場合はこれを知っている可能性があります）。それが左から来て右に行くなら、あなたは右の側にいる、それは画面を離れるので、あなたはそれを移動しなければならない。しかし、左から来て右に行くとが画面の左側にあるの左にある場合は、その入力とOKを知っています。