Chcę mieć stronę internetową, która ma jedno wyśrodkowane słowo.

Chcę, aby to słowo zostało narysowane za pomocą animacji, tak aby strona „zapisała” to słowo w taki sam sposób, jak my, tzn. Zaczyna się w jednym punkcie i rysuje linie i krzywe w czasie, tak aby końcowy wynik był glifem.

Nie dbam o to, czy jest to zrobione za <canvas>pomocą DOM, czy też o to, czy robi się to za pomocą JavaScript czy CSS. Brak jQuery byłby miły, ale nie wymagany.

W jaki sposób mogę to zrobić? Szukałem wyczerpująco bez powodzenia.

Chcę, aby to słowo zostało narysowane za pomocą animacji, tak aby strona „zapisała” to słowo w taki sam sposób, jak my

Wersja na płótnie

Spowoduje to narysowanie pojedynczych znaków bardziej niż pisanie ręcznie. Wykorzystuje długi wzorzec myślowy, w którym kolejność włączania / wyłączania jest zmieniana w czasie na znak. Ma również parametr prędkości.

^{Przykładowa animacja (patrz demo poniżej)}

Aby zwiększyć realizm i wrażenia organiczne, dodałem losowe odstępy między literami, przesunięcie delta y, przezroczystość, bardzo subtelny obrót i na koniec używając już „ręcznie napisanej” czcionki. Można je zawrzeć jako parametry dynamiczne, aby zapewnić szeroki zakres „stylów pisania”.

Aby uzyskać jeszcze bardziej realistyczny wygląd, wymagane byłyby dane ścieżki, które nie są domyślnie. Jest to jednak krótki i wydajny fragment kodu, który aproksymuje zachowanie napisane odręcznie i jest łatwy do wdrożenia.

Jak to działa

Definiując wzór kreski, możemy tworzyć marszowe mrówki, linie kropkowane i tak dalej. Wykorzystując to, definiując bardzo długą kropkę dla „wyłączonej” kropki i stopniowo zwiększając „włączoną” kropkę, da to złudzenie rysowania linii podczas głaskania podczas animacji długości kropki.

Ponieważ kropka wyłączona jest tak długa, powtarzający się wzór nie będzie widoczny (długość będzie się różnić w zależności od rozmiaru i właściwości używanego kroju pisma). Ścieżka litery będzie miała długość, więc musimy upewnić się, że każda kropka pokrywa przynajmniej tę długość.

W przypadku liter, które składają się z więcej niż jednej ścieżki (np. O, R, P itd.), Tak jak jedna dla konturu, jedna dla pustej części, linie będą wyglądały na narysowane jednocześnie. Dzięki tej technice nie możemy wiele na to poradzić, ponieważ wymagałoby to dostępu do każdego segmentu ścieżki, aby był głaskany osobno.

Zgodność

W przypadku przeglądarek, które nie obsługują elementu canvas, można umieścić alternatywny sposób wyświetlania tekstu między tagami, na przykład tekst w stylu:

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

Próbny

Powoduje to animowane uderzenie na żywo ( bez zależności ) -

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>

Edytuj 2019

Stworzyłem bibliotekę javascript, która może tworzyć realistyczne animacje. Jest łatwy w użyciu i wymaga specjalnego pliku JSON, który działa jak czcionka.

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>

Checkout strona GitHub dla dokumentacji i przykładów. I Codepen

Poprzednia odpowiedź

Poniższy przykład wykorzystuje plik snap.js do dynamicznego tworzenia tspanelementów, a następnie animowania każdego z nich 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>

Poprzednia odpowiedź

Możesz zrobić coś takiego za pomocą svg's 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>

Bez keyframesanimacji możesz zrobić coś takiego

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

A do obsługi IE możesz użyć jquery / javascript

$('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>

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

Po wielu testach oto kilka uwag. Celem jest wyświetlanie szybkich danych tekstowych w najmniej blokujący sposób, na ciężkich stronach DOM wymagających interakcji użytkowników.

Istnieje oczywiście wiele sposobów na osiągnięcie tego samego. W tym przykładzie różnice mogą nie być oczywiste, tak naprawdę dotyczą złożonych interfejsów.

Najwolniejszy : innerHTMLi wbudowany styl. DOM jest ponownie obliczany przy każdej iteracji. Przeglądarka ciężko pracuje, aby utrzymać pociąg. Szybko zawiedzie, powodując wycieki pamięci i zawieszanie się:

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

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

Lepiej : Użycie textContent, requestAnimationFramea API animacji internetowych. To idzie znacznie płynniej, jest oczywiste na ciężkich stronach DOM. Interakcje użytkownika nie blokują odświeżania. Niektóre odświeżenia mogą zostać pominięte, aby interfejs dobrze reagował.

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>

W powyższym przykładzie DOM jest wciąż ponownie obliczany pod kątem przepełnienia tekstu. Widzimy, że debugger mocno mruga. To naprawdę ma znaczenie dla elementów kaskadowych! Może to nadal spowalniać javascript i przewijanie użytkownika.

Pełna moc : możliwe jest użycie samego css do odświeżania danych za pomocą contentreguły css i zmiennych css. Tekst nie będzie wtedy możliwy do wybrania.

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>

Moje testy wykazały wielkie ulepszenia, silnik javascript szybko pomija inne zadania. Czasami może zacząć się nieco wolniej niż w powyższym przykładzie. Ale oprócz tego nie blokuje to zwojów użytkowników, a debugger też lubi, nie ma już przeskoków.