Saya ingin memiliki halaman web yang memiliki satu kata terpusat.

Saya ingin kata ini digambar dengan animasi, sehingga halaman "menulis" kata dengan cara yang sama seperti yang kita inginkan, yaitu mulai pada satu titik dan menggambar garis dan kurva dari waktu ke waktu sehingga hasil akhirnya adalah mesin terbang.

Saya tidak peduli apakah ini dilakukan dengan <canvas>atau DOM, dan saya tidak peduli apakah itu dilakukan dengan JavaScript atau CSS. Tidak adanya jQuery akan menyenangkan, tetapi tidak diperlukan.

Bagaimana saya bisa melakukan ini? Saya telah mencari secara mendalam tanpa hasil.

Saya ingin kata ini dibuat dengan animasi, sehingga halaman "menulis" kata dengan cara yang sama seperti yang kita inginkan

Versi kanvas

Ini akan menarik karakter tunggal lebih seperti yang akan ditulis dengan tangan. Ini menggunakan pola dash panjang di mana pesanan on / off ditukar dari waktu ke waktu per karakter. Ini juga memiliki parameter kecepatan.

^{Contoh animasi (lihat demo di bawah)}

Untuk meningkatkan realisme dan nuansa organik, saya menambahkan spasi huruf acak, offset y delta, transparansi, rotasi yang sangat halus dan akhirnya menggunakan font yang sudah "tulisan tangan". Ini dapat dibungkus sebagai parameter dinamis untuk menyediakan berbagai "gaya penulisan".

Untuk tampilan yang lebih realistis, data jalur akan diperlukan yang tidak secara default. Tetapi ini adalah potongan kode yang pendek dan efisien yang mendekati perilaku tulisan tangan, dan mudah diimplementasikan.

Bagaimana itu bekerja

Dengan mendefinisikan pola tanda hubung, kita dapat membuat semut berbaris, garis putus-putus, dan sebagainya. Mengambil keuntungan dari ini dengan mendefinisikan titik yang sangat panjang untuk titik "off" dan secara bertahap meningkatkan titik "on", itu akan memberikan ilusi menggambar garis ketika dibelai sambil menggerakkan panjang titik.

Karena titik mati begitu panjang, pola berulang tidak akan terlihat (panjangnya akan bervariasi dengan ukuran dan karakteristik jenis huruf yang digunakan). Jalur surat akan memiliki panjang sehingga kita perlu memastikan bahwa kita memiliki setiap titik setidaknya mencakup panjang ini.

Untuk huruf yang terdiri dari lebih dari satu jalur (mis. O, R, P dll.) Karena satu untuk garis besar, satu untuk bagian berongga, garis-garis akan tampak digambar secara bersamaan. Kami tidak bisa berbuat banyak tentang itu dengan teknik ini karena akan membutuhkan akses ke setiap segmen jalur untuk dibelai secara terpisah.

Kesesuaian

Untuk browser yang tidak mendukung elemen kanvas cara alternatif untuk menampilkan teks dapat ditempatkan di antara tag, misalnya teks gaya:

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

Demo

Ini menghasilkan animasi stroke-on langsung ( tidak ada ketergantungan ) -

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>

Edit 2019

Saya membuat perpustakaan javascript yang dapat membuat animasi realistis. Mudah digunakan dan memerlukan file JSON khusus yang bertindak sebagai font.

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>

Lihat halaman Github untuk dokumentasi dan contoh. Dan Codepen

Jawaban Sebelumnya

Contoh di bawah ini menggunakan snap.js untuk secara dinamis membuat tspanelemen dan kemudian menghidupkan masing-masing 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>

Jawaban Sebelumnya

Anda dapat melakukan sesuatu seperti ini menggunakan svg 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>

Tanpa keyframesanimasi Anda dapat melakukan hal seperti ini

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

Dan untuk dukungan IE Anda dapat menggunakan 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>

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

Setelah banyak tes, berikut adalah beberapa catatan. Tujuannya adalah untuk menampilkan data teks cepat dengan cara yang paling tidak menghalangi, pada halaman berat DOM yang membutuhkan interaksi pengguna.

Tentu saja ada banyak cara untuk mencapai hal yang sama. Pada contoh ini, perbedaannya mungkin tidak jelas, itu benar-benar berlaku untuk antarmuka yang kompleks.

Paling lambat : innerHTMLdan gaya inline. DOM dihitung ulang di setiap iterasi. Browser bekerja keras untuk menjaga kereta. Ini akan gagal dengan cepat, menyebabkan kebocoran memori dan membeku:

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

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

Cara yang lebih baik : Menggunakan textContent, requestAnimationFramedan api animasi web. Ini berjalan lebih lancar, sudah jelas di halaman berat DOM. Interaksi pengguna tidak akan memblokir repaints. Beberapa pengecatan mungkin dilewati, agar antarmuka tetap responsif.

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>

Pada contoh di atas, DOM masih dihitung ulang untuk limpahan teks .. Kita bisa melihat debugger berkedip keras. Ini sangat penting pada elemen cascading! Ini masih bisa memperlambat javascript dan pengguliran pengguna.

Kekuatan penuh : Adalah mungkin untuk menggunakan css sendiri untuk menyegarkan data dengan contentaturan css dan variabel css. Teks tidak akan dipilih.

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>

Tes saya menunjukkan peningkatan besar, mesin javascript melompati tugas-tugas lain dengan cepat. Kadang-kadang itu bisa mulai sedikit lebih lambat daripada contoh di atas. Tapi di samping itu, ini tidak memblokir gulungan pengguna, dan debugger juga menyukai, tidak ada lagi lompatan.