サインカーブに沿ってアニメーション円

Question

thisのようなjQueryを使用してf.luxのビジュアルを複製しようとしています（品質は悪いです）。基本的には、正弦波の経路に従う円です。私はjQuery.pathアニメーションを見てアニメーションを複製しようとしましたが、私の正弦波はCSSを使用して描かれているので、不安定です。正弦波を描いて滑らかにし、正弦波の経路に沿って円をアニメーション化する方法はありますか？私はフィドルを働かせることができませんでしたが、これは私のアニメーションが現在nowのように見えるものです。私のアニメーションは、f.luxアニメーションとは異なり、開始位置にループバックしません。

私はf.luxのバックグラウンド（正弦波の青とピンクの半分）を作る必要がありますか、その上にアニメーションを置く必要がありますか？ Javascript、CSS、およびjQueryを使用してビジュアル全体を表示しますか？

誰にでもアイデアがありますか、誰かが正しい方向に向けることができますか？

Answer 1

あなたのラインをスムーズに行うために、あなたはそうのように、SVG要素を使用することができます：あなたがあなたの背景に別の色を使用できるように

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M10 80 C 40 10, 65 20, 95 80" stroke="black" fill="#E0E0E0"/> 
    <path d="M95 80 C 105 100, 150 150, 180 80" stroke="black" fill="#EEEEEE"/> 
</svg> 

これは、二つの異なるベジェ曲線を使用しています。幅/高さと曲率に合わせて値を少し変更する必要があります。ここにはsvgパスの説明があります：https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths。

HTMLソースファイルにアクセスできない場合は、javascriptまたはjQuery SVGを使用してsvg要素を挿入できます。