Ortalanmış bir kelimeden oluşan bir web sayfam olmasını istiyorum.

Bu kelimenin bir animasyonla çizilmesini istiyorum, böylece sayfa kelimeyi yaptığımız gibi "yazıyor", yani bir noktada başlıyor ve sonuçta bir glif olacak şekilde zaman içinde çizgiler ve eğriler çiziyor.

Bunun <canvas>DOM ile mi yoksa DOM ile mi yapıldığı umurumda değil ve JavaScript veya CSS ile yapılıp yapılmadığı umurumda değil. JQuery'nin olmaması güzel olurdu, ancak gerekli değildir.

Bunu nasıl yapabilirim? Şanssız bir şekilde araştırdım .

Bu kelimenin bir animasyonla çizilmesini istiyorum, böylece sayfa kelimeyi yaptığımız gibi "yazıyor"

Tuval versiyonu

Bu, tek tek karakterleri daha çok elle yazmak gibi çizer. Açma / kapama sırasının karakter başına zamanla değiştiği uzun bir çizgi deseni kullanır. Ayrıca bir hız parametresi vardır.

^{Örnek animasyon (aşağıdaki demoya bakın)}

Gerçekçiliği ve organik hissi arttırmak için, rastgele harf aralığı, bir y delta ofseti, saydamlık, çok ince bir dönüş ve son olarak zaten "el yazısı" bir yazı tipi kullanarak ekledim. Bunlar, çok çeşitli "yazma stilleri" sağlamak için dinamik parametreler olarak sarılabilir.

Daha gerçekçi bir görünüm için, yol verisi varsayılan olarak gerekli değildir. Ancak bu, elle yazılmış davranışa yaklaşan ve uygulanması kolay kısa ve etkili bir kod parçasıdır.

Nasıl çalışır

Bir çizgi deseni tanımlayarak yürüyen karıncalar, noktalı çizgiler vb. Oluşturabiliriz. Bundan "kapalı" nokta için çok uzun bir nokta tanımlayarak ve "açık" nokta kademeli olarak artırarak bundan yararlanarak, nokta uzunluğunu canlandırırken kontur verildiğinde çizgi çizme yanılsaması verecektir.

Kapalı nokta çok uzun olduğu için yinelenen desen görünmez (uzunluk, kullanılan yazı tipinin boyutuna ve özelliklerine göre değişir). Mektubun yolu bir uzunluğa sahip olacak, bu yüzden her noktanın en azından bu uzunluğu kapladığından emin olmalıyız.

Anahat için olduğu gibi birden fazla yoldan (örn. O, R, P vb.) Oluşan harfler için, biri içi boş kısım içindir, çizgiler aynı anda çizilmiş gibi görünecektir. Bu teknikle bu konuda fazla bir şey yapamayız, çünkü her bir yol segmentine ayrı ayrı konulmasını gerektirir.

uygunluk

Tuval öğesini desteklemeyen tarayıcılar için metni göstermenin alternatif bir yolu, örneğin stilize bir metin yerleştirilebilir:

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

gösteri

Bu canlı animasyonlu inme üretir ( bağımlılık yok ) -

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>

2019'u Düzenle

Gerçekçi animasyonlar oluşturabilen bir javascript kütüphanesi oluşturdum. Kullanımı kolaydır ve yazı tipi görevi gören özel bir JSON dosyası gerektirir.

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>

Ödemeye Github sayfasını dokümantasyon ve örnekler için. Ve Codepen

Önceki Cevap

Aşağıdaki örnek, tspanöğeleri dinamik olarak oluşturmak ve her birinin animasyonlarını oluşturmak için snap.js'yi kullanır 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>

Önceki Cevap

SVG'leri kullanarak böyle bir şey yapabilirsiniz 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>

keyframesAnimasyon olmadan böyle bir şey yapabilirsiniz

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

IE desteği için jquery / javascript kullanabilirsiniz

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

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

Birçok testten sonra, bazı notlar. Amaç, kullanıcı etkileşimi gerektiren DOM ağır sayfalarında hızlı metin verilerini en az engelleme yöntemiyle görüntülemektir .

Elbette aynı şeyi başarmanın birçok yolu vardır. Bu örnekte, farklar açık olmayabilir, gerçekten karmaşık arayüzler için geçerlidir.

En yavaş : innerHTMLve satır içi stil. DOM her bir yinelemede yeniden hesaplanır. Tarayıcı treni korumak için çok çalışıyor. Hızlı bir şekilde başarısız olur ve bellek sızıntılarına ve donmalara neden olur:

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

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

Daha iyi bir yol : kullanma textContent, requestAnimationFrameve web animasyon API. Bu daha da sorunsuz gidiyor, DOM ağır sayfalarında açıkça görülüyor. Kullanıcı etkileşimleri yeniden çizimleri engellemez. Arayüzün iyi yanıt vermesini sağlamak için bazı boyamalar atlanabilir.

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>

Yukarıdaki örnekte, DOM hala metin taşması için yeniden hesaplanmaktadır. Hata ayıklayıcının sert yanıp söndüğünü görebiliriz. Bu gerçekten basamaklı unsurlar için önemlidir! Bu, javascript ve kullanıcı kaydırma işlemlerini yavaşlatabilir.

Tam güç : Verileri css contentkuralı ve css değişkenleriyle yenilemek için yalnızca css kullanmak mümkündür . Metin daha sonra seçilemez.

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>

Testlerim büyük gelişmeler gösterdi, javascript motoru diğer görevlerde hızla atlıyor. Bazen yukarıdaki örnekten biraz daha yavaş başlayabilir. Ancak bunun yanı sıra, bu, kullanıcıların kaydırmasını engellemez ve hata ayıklayıcı da beğenir, daha fazla sıçrama yapmaz.