[FRAGE] Pulse

[ycd]

Hallo,

ich bräuchte dringend hilfe... Ich will das Logo (siehe Anhang) animieren

folgendes hab ich schon gemacht, nur passt das so noch nicht...

A Pen by ycd

1. kann man es immer wieder durchlaufen lassen (pulse)?
2. ist es möglich das genau wie das Logo zu gestalten?

Ich wäre euch sehr dankbar, wenn ihr mir weiterhelfen könntet.

Danke & VG :icon7:

 

[mlau]

Also sieht auf jeden Fall schon schick aus.
Aber vermutlich wäre hier ein Video-Element eher angebracht.
Dank Interframe-Kompression (nur die Differenzen zwischen Bildern werden gespeichert) wäre das auch kaum größer als das Bild.
Falls du es doch live machen möchtest solltest du SVG verwenden, dass lässt sich leichter handhaben als Canvas. Dass reicht für deine Anwendung vollkommen aus, Canvas ist hier imho overkill.
Beispielcode von Stackoverflow um eine Linie nachzuzeichnen (den Mouseover brauchst du nicht)

var distancePerPoint = 1;
var drawFPS          = 60;

var orig = document.querySelector('path'), length, timer;
orig.addEventListener('mouseover',startDrawingPath,false);
orig.addEventListener('mouseout', stopDrawingPath, false);

function startDrawingPath(){
  length = 0;
  orig.style.stroke = '#f60';
  timer = setInterval(increaseLength,1000/drawFPS);
}

function increaseLength(){
  var pathLength = orig.getTotalLength();
  length += distancePerPoint;
  orig.style.strokeDasharray = [length,pathLength].join(' ');
  if (length >= pathLength) clearInterval(timer);
}

function stopDrawingPath(){
  clearInterval(timer);
  orig.style.stroke = '';
  orig.style.strokeDasharray = '';
}

Im Prinzip wird die Linie "gestrichelt" mit einem Strich der die ganze Länge geht. Dann wird der Strich verschoben.

Um das ganze zu loopen musst du nur statt abzubrechen

  if (length >= pathLength) clearInterval(timer);

von vorne anfangen

  if (length >= pathLength) length = 0;

Wie du einen Pfad zeichnest wird hier beschrieben: SVG Tutorial - Pfade
Im Prinzip legst du ein path-Element über dein Bild und im d-Attribut beschriebst du den Pfadverlauf.
Mit M x,y bewegst du den "Stift" und mit L x,y zeichnest du eine Linie zu einem bestimmten Punkt. Mehrere Kommandos werden mit einem Leerzeichen getrennt.

Ich hoffe das hilft dir weiter.

 

[ycd]

Danke für die Antwort mlau

Also ich habe mal etwas gebastelt und rausgekommen ist das -----> Puls-Logo

Könntest du mir vllt. helfen, dass noch so zu optimieren das es ungefähr wie auf dem Logo aussieht?

Danke & beste Grüße

 

[dertypdernixkan]

Warum nicht als animiertes .gif?