Ich möchte eine Webseite mit einem zentrierten Wort haben.

Ich möchte, dass dieses Wort mit einer Animation gezeichnet wird, so dass die Seite das Wort auf die gleiche Weise "schreibt", wie wir es tun würden, dh es beginnt an einem Punkt und zeichnet im Laufe der Zeit Linien und Kurven, so dass das Endergebnis eine Glyphe ist.

Es ist mir egal, ob dies mit <canvas>oder dem DOM gemacht wird, und es ist mir egal, ob es mit JavaScript oder CSS gemacht wird. Das Fehlen von jQuery wäre nett, aber nicht erforderlich.

Wie kann ich das machen? Ich habe gesucht erschöpfend ohne Glück.

Ich möchte, dass dieses Wort mit einer Animation gezeichnet wird, sodass die Seite das Wort auf die gleiche Weise "schreibt", wie wir es tun würden

Canvas-Version

Dadurch werden einzelne Zeichen eher so gezeichnet, als würde man von Hand schreiben. Es wird ein langes Strichmuster verwendet, bei dem die Ein / Aus-Reihenfolge im Laufe der Zeit pro Zeichen vertauscht wird. Es hat auch einen Geschwindigkeitsparameter.

^{Beispielanimation (siehe Demo unten)}

Um den Realismus und das organische Gefühl zu erhöhen, habe ich zufällige Buchstabenabstände, einen y-Delta-Versatz, Transparenz, eine sehr subtile Drehung und schließlich eine bereits "handgeschriebene" Schriftart hinzugefügt. Diese können als dynamische Parameter zusammengefasst werden, um eine breite Palette von "Schreibstilen" bereitzustellen.

Für ein noch realistischeres Aussehen wären die Pfaddaten erforderlich, die nicht standardmäßig vorhanden sind. Dies ist jedoch ein kurzer und effizienter Code, der sich dem handgeschriebenen Verhalten annähert und einfach zu implementieren ist.

Wie es funktioniert

Durch Definieren eines Strichmusters können wir marschierende Ameisen, gepunktete Linien usw. erstellen. Wenn Sie dies ausnutzen, indem Sie einen sehr langen Punkt für den "Aus" -Punkt definieren und den "Ein" -Punkt schrittweise erhöhen, entsteht die Illusion, die Linie beim Streichen zu zeichnen, während Sie die Punktlänge animieren.

Da der Off-Punkt so lang ist, ist das sich wiederholende Muster nicht sichtbar (die Länge hängt von der Größe und den Eigenschaften der verwendeten Schrift ab). Der Pfad des Buchstabens hat eine Länge, daher müssen wir sicherstellen, dass jeder Punkt mindestens diese Länge abdeckt.

Bei Buchstaben, die aus mehr als einem Pfad bestehen (z. B. O, R, P usw.), wie einer für den Umriss, einer für den hohlen Teil, scheinen die Linien gleichzeitig gezeichnet zu sein. Wir können mit dieser Technik nicht viel dagegen tun, da der Zugriff auf jedes Pfadsegment separat ausgeführt werden müsste.

Kompatibilität

Für Browser, die das Canvas-Element nicht unterstützen, kann eine alternative Möglichkeit zum Anzeigen des Texts zwischen den Tags platziert werden, z. B. ein gestalteter Text:

<canvas ...>
    <div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>

Demo

Dies erzeugt das animierte Live-Stroke-On ( keine Abhängigkeiten ) -

var ctx = document.querySelector("canvas").getContext("2d"),
    dashLen = 220, dashOffset = dashLen, speed = 5,
    txt = "STROKE-ON CANVAS", x = 30, i = 0;

ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif"; 
ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#1f2f90";

(function loop() {
  ctx.clearRect(x, 0, 60, 150);
  ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
  dashOffset -= speed;                                         // reduce dash length
  ctx.strokeText(txt[i], x, 90);                               // stroke letter

  if (dashOffset > 0) requestAnimationFrame(loop);             // animate
  else {
    ctx.fillText(txt[i], x, 90);                               // fill final letter
    dashOffset = dashLen;                                      // prep next char
    x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
    ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());        // random y-delta
    ctx.rotate(Math.random() * 0.005);                         // random rotation
    if (i < txt.length) requestAnimationFrame(loop);
  }
})();

canvas {background:url(http://i.imgur.com/5RIXWIE.png)}

<canvas width=630></canvas>

Bearbeiten Sie 2019

Ich habe eine Javascript-Bibliothek erstellt, mit der realistische Animationen erstellt werden können. Es ist einfach zu bedienen und erfordert eine spezielle JSON-Datei, die als Schriftart fungiert.

var vara = new Vara("#container", "https://rawcdn.githack.com/akzhy/Vara/ed6ab92fdf196596266ae76867c415fa659eb348/fonts/Satisfy/SatisfySL.json", [{
  text: "Hello World!!",
  fontSize: 48,
  y:10
}, {
  text: "Realistic Animations",
  fontSize: 34,
  color:"#f44336"
}], {
  strokeWidth: 2,
  textAlign:"center"
});

#container {
  padding: 30px;
}

<script src="https://rawcdn.githack.com/akzhy/Vara/16e30acca2872212e28735cfdbaba696a355c780/src/vara.min.js"></script>
<div id="container"></div>

Auf der Github-Seite finden Sie Dokumentation und Beispiele. Und Codepen

Vorherige Antwort

Im folgenden Beispiel werden snap.js verwendet, um tspanElemente dynamisch zu erstellen und dann jedes ihrer Elemente zu animieren stroke-dashoffset.

var s = Snap('svg');
var text = 'Some Long Text'
var len = text.length;
var array = [];
for (var x = 0; x < len; x++) {
  var t = text[x]
  array.push(t);
}
var txt = s.text(50, 50, array)
$('tspan').css({
  'font-size': 50,
  fill: 'none',
  stroke: 'red',
  "stroke-width":2,
  'stroke-dasharray': 300,
  'stroke-dashoffset': 300
})

$('tspan').each(function(index) {
  $(this).stop(true, true).delay(300 * index).animate({
    'stroke-dashoffset': 0,
  }, 300, function() {
    $(this).css('fill', 'red')
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">
</svg>

Vorherige Antwort

Sie können so etwas mit svg's machen stroke-dasharray

text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: draw 8s forwards;
}
@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: draw 8s forwards;
  -moz-animation: draw 8s forwards;
  -o-animation: draw 8s forwards;
  -ms-animation: draw 8s forwards;
  animation: draw 8s forwards;
}
@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-ms-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

<svg width="500" height="500">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="1" font-size="50">Some text</text>
</svg>

Ohne keyframesAnimation können Sie so etwas tun

<svg width="500" height="500">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="5" font-size="50"  stroke-dasharray="1000"
  stroke-dashoffset="1000">Some text
  <animate attributeName="stroke-dashoffset"
    from="1000"
    to="0" 
    dur="8s"
      fill="freeze">
          
      </animate> </text>
</svg>

Und für die IE-Unterstützung können Sie jquery / javascript verwenden

$('text').animate({
    'stroke-dashoffset':'0'
},8000)

text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="1" font-size="50" 
 >Some text
  </text>
</svg>

Nur CSS:

@keyframes fadein_left {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}

#start:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0%;
  opacity: 0.7;
  height: 25px;
  background: #fff;
  animation: fadein_left 3s;
}

<div id="start">
  some text some text some text some text some text
</div>

Nach vielen Tests finden Sie hier einige Hinweise. Ziel ist es, schnelle Textdaten auf DOM-Seiten, die Benutzerinteraktionen erfordern , auf die am wenigsten blockierende Weise anzuzeigen .

Es gibt natürlich viele Möglichkeiten, dasselbe zu erreichen. In diesem Beispiel sind die Unterschiede möglicherweise nicht offensichtlich, sondern gelten wirklich für komplexe Schnittstellen.

Am langsamsten : innerHTMLund Inline-Styling. Das DOM wird bei jeder Iteration neu berechnet. Der Browser arbeitet hart daran, den Zug zu halten. Es wird schnell ausfallen und Speicherlecks verursachen und einfrieren:

setInterval(function(){
  out.innerHTML = `<span style="position:fixed;top:${~~(Math.random() * 220)}px">${Math.random() * 1000}<span>`
},1)

<h1 id="out"></h1>

Viel besser : Die Verwendung textContent, requestAnimationFrameund die Web - Animation api. Dies läuft viel reibungsloser, es ist auf DOM-schweren Seiten offensichtlich. Die Benutzerinteraktionen blockieren die Neulackierungen nicht. Einige Neulackierungen werden möglicherweise übersprungen, damit die Benutzeroberfläche gut reagiert.

let job
const paint = () => {
  job = requestAnimationFrame(paint)
  out.textContent = Math.random() * 1000
  out.animate([{top: ~~(Math.random() * 220)+"px"},{top:0}],{duration: 1,iterations: 1})
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(paint)

#out{
position: fixed}

<h1 id="out"></h1>

Im obigen Beispiel wird das DOM immer noch für den Textüberlauf neu berechnet. Wir können sehen, dass der Debugger stark blinkt. Dies ist wirklich wichtig bei kaskadierenden Elementen! Dies kann das Scrollen von Javascript und Benutzern immer noch verlangsamen.

Volle Leistung : Es ist möglich, CSS allein zu verwenden, um die Daten mit der CSS- contentRegel und den CSS-Variablen zu aktualisieren. Der Text kann dann nicht ausgewählt werden.

let job
const paint = () => {
  job = requestAnimationFrame(paint)
  out.setAttribute('data-before', Math.random() * 1000)
  out.animate([{top: ~~(Math.random() * 220)+"px"},{top:0}],{duration: 1,iterations: 1})
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(paint)

#out{
  position: fixed
  
  }
#out:before {
   content: attr(data-before)
 }

<h1 id="out"></h1>

Meine Tests haben große Verbesserungen gezeigt, die Javascript-Engine überspringt schnell andere Aufgaben. Manchmal beginnt es etwas langsamer als im obigen Beispiel. Abgesehen davon blockiert dies nicht die Schriftrollen der Benutzer, und der Debugger mag auch keine Sprünge mehr.