Animierten Kreis entlang der Sinuskurve

Question

Ich versuche, die Visuals von f.lux mit jQuery, die wie this (Entschuldigung für die schlechte Qualität) aussieht, zu replizieren. Im Grunde ist es ein Kreis, der einem Sinuswellenpfad folgt. Ich habe die jQuery.path Animationen angeschaut und ich habe versucht, die Animation zu replizieren, aber meine Sinuswelle ist abgehackt, da sie mit CSS gezeichnet wird. Gibt es eine Möglichkeit, die Sinuswelle so zu zeichnen, dass sie glatt ist, und dann den Kreis zu animieren, der dem Sinuswellenpfad folgt? Ich konnte nicht eine Geige arbeiten, aber das ist, was meine Animation derzeit aussieht now. Meine Animation springt im Gegensatz zur f.lux-Animation auch nicht an den Anfang zurück.

Ich bin mir nicht sicher, was die Grenzen dafür sind, werde ich f.lux Hintergrund (die blauen und rosa Hälften der Sinuswelle) machen und dann die Animation darüber legen oder kann ich die machen ganze visuelle Verwendung von Javascript, CSS und jQuery?

Hat jemand irgendwelche Ideen oder kann mir jemand in die richtige Richtung zeigen?

Answer 1

Ihre Linie glatter zu machen, können Sie ein SVG-Element verwenden, etwa so:

<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> 

Diese verwendet zwei verschiedene Bézier-Kurven, so dass Sie verschiedene Farben für Ihren Hintergrund verwenden können. Sie müssen die Werte ein wenig ändern, um sie der gewünschten Breite/Höhe und Krümmung anzupassen. Es gibt eine Erklärung auf Svg-Pfaden hier: https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths.

Sie können ein Einfügen eines Svg-Elements mit JavaScript oder jQuery SVG erstellen, wenn Sie keinen Zugriff auf die HTML-Quelldatei haben.