Я хочу мати веб-сторінку з одним центрованим словом.

Я хочу, щоб це слово було намальовано анімацією, щоб сторінка "записувала" слово так само, як і ми, тобто воно починається в один момент і малює лінії та криві з часом, так що кінцевим результатом є гліф.

Мені все одно, чи це робиться з <canvas>DOM або DOM, і мені байдуже, чи це робиться за допомогою JavaScript або CSS. Відсутність jQuery було б непогано, але не потрібно.

Як я можу це зробити? Я шукав вичерпно, не пощастивши.

Я хочу, щоб це слово було намальовано анімацією, щоб сторінка "записувала" це слово так само, як і ми

Полотна версія

Це дозволить намалювати поодинокі символи, подібні до того, як писали б від руки. Він використовує довгу схему тире, де замовлення на вмикання / вимкнення змінюється з часом за графік. Він також має параметр швидкості.

^{Приклад анімації (див. Демонстрацію нижче)}

Для посилення реалізму та органічного почуття я додав випадкові інтервали між літерами, зсув дельти y, прозорість, дуже тонке обертання і, нарешті, використовуючи вже "рукописний" шрифт. Вони можуть бути завершені як динамічні параметри, щоб забезпечити широкий спектр "стилів написання".

Для ще більш реалістичного вигляду потрібні будуть дані про шлях, які за замовчуванням не є. Але це короткий та ефективний фрагмент коду, який наближає рукописну поведінку та простий у виконанні.

Як це працює

Визначаючи малюнок тире, ми можемо створити маршові мурашки, пунктирні лінії тощо. Скориставшись цим, визначивши дуже довгу точку для "вимкненої" точки та поступово збільшуючи крапку "ввімкнено", це створить ілюзію промальовування лінії при погладжуванні під час анімації довжини точки.

Оскільки точка відключення настільки довга, повторюваний візерунок не буде видно (довжина буде змінюватися залежно від розміру та характеристик використовуваного шрифту). Шлях листа буде мати довжину, тому нам потрібно переконатися, що у нас є кожна крапка, щонайменше покриває цю довжину.

Для літер, які складаються з декількох контурів (f.ex. O, R, P тощо), як один для контуру, один для порожнистої частини, лінії, здається, малюються одночасно. З цим методом ми не можемо багато чого зробити, оскільки це вимагатиме окремого проходження доступу до кожного сегменту шляху.

Сумісність

Для веб-переглядачів, які не підтримують елемент канви, альтернативний спосіб відображення тексту може бути розміщений між тегами, наприклад стильовий текст:

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

Демо

Це створює анімований інсульт ( без залежностей ) -

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 рік

Я створив бібліотеку javascript, яка може створювати реалістичні анімації. Він простий у використанні і вимагає спеціального файлу JSON, який виконує функції шрифту.

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>

Витягує сторінку GitHub для документації та прикладів. І Кодпен

Попередній відповідь

У наведеному нижче прикладі використовується snap.js для динамічного створення tspanелементів, а потім анімації кожного з них 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>

Попередній відповідь

Ви можете зробити щось подібне, використовуючи 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>

Без keyframesанімації ви можете зробити щось подібне

<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 ви можете використовувати 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>

Тільки 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>

Після багатьох тестів, ось кілька приміток. Мета - відображення швидких текстових даних якнайменше блокуючим способом на важких сторінках DOM, що вимагають взаємодії користувачів.

Звичайно, існує багато способів досягти одного і того ж. На цьому прикладі відмінності можуть бути не очевидні, вони дійсно стосуються складних інтерфейсів.

Найповільніший : innerHTMLі вбудований стиль. DOM перераховується при кожному ітерації. Браузер наполегливо працює, щоб утримати поїзд. Він швидко вийде з ладу, спричиняючи витік пам'яті та зависання:

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

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

Шлях краще : використання textContent, requestAnimationFrameі веб - анімації апі. Це стає більш плавним, це очевидно на важких сторінках DOM. Взаємодія користувача не блокує перефарбовування. Деякі перефарбовування можуть бути пропущені, щоб інтерфейс добре відповідав.

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>

На наведеному вище прикладі DOM все ще перераховується для переповнення тексту. Ми можемо бачити, як відладчик сильно блимає. Це справді має значення для каскадних елементів! Це все ще може уповільнити JavaScript та прокрутки користувачів.

Повна потужність : Можливо використовувати css поодинці, щоб оновити дані за допомогою contentправила css та змінних css. Після цього текст не можна вибрати.

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>

Мої тести показують великі вдосконалення, механізм javascript швидко пропускає інші завдання. Іноді це може починатися трохи повільніше, ніж наведений вище приклад. Але крім цього, це не блокує прокрутки користувачів, а налагоджувач також подобається, більше немає стрибків.