Как я могу анимировать рисунок текста на веб-странице?

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

Я хочу, чтобы это слово было нарисовано с помощью анимации, так что страница "пишет" слово так же, как и мы, т.е. начинается с одной точки и рисует линии и кривые с течением времени, так что конечный результат глиф.

Мне все равно, если это делается с помощью <canvas> или DOM, и мне все равно, было ли это сделано с помощью JavaScript или CSS. Отсутствие jQuery было бы неплохо, но не требовалось.

Как я могу это сделать? Я искал исчерпывающе не повезло.

+223
28 апр. '15 в 5:38
источник поделиться
3 ответа

Я хочу, чтобы это слово было нарисовано с помощью анимации, так что страница "пишет" слово так же, как мы

Версия холста

Это приведет к тому, что отдельные символы будут больше похожи на записи вручную. Он использует длинный штрих-код, в котором порядок включения/выключения менялся со временем за char. Он также имеет параметр скорости.

Snapshot
Пример анимации (см. демонстрацию ниже)

Чтобы повысить реализм и органическое чувство, я добавил случайный интервал между буквами, смещение по треугольнику, прозрачность, очень тонкое вращение и, наконец, использование уже "рукописного" шрифта. Они могут быть завернуты как динамические параметры, чтобы обеспечить широкий диапазон "стилей записи".

Для еще более реалистичного просмотра потребуются данные о пути, которые не по умолчанию. Но это короткий и эффективный фрагмент кода, который приближается к ручному поведению и легко реализуется.

Как это работает

Определяя шаблон тире, мы можем создавать маршевые муравьи, пунктирные линии и так далее. Воспользовавшись этим, определив очень длинную точку для "выключенной" точки и постепенно увеличивая точку "on", она даст иллюзию рисования линии при глажении при анимации длины точки.

Так как длина точки слишком длинная, повторяющийся шаблон не будет виден (длина будет варьироваться в зависимости от размера и характеристик используемого шрифта). Путь буквы будет иметь длину, поэтому нам нужно убедиться, что мы имеем каждую точку, по крайней мере, покрывающую эту длину.

Для букв, которые состоят из нескольких путей (f.ex.O, R, P и т.д.), поскольку один для контура, один для полого участка, линии будут отображаться одновременно. Мы не можем много сделать с этим методом, поскольку для этого потребуется доступ к каждому сегменту пути, который должен быть поглажен отдельно.

Совместимость

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

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

Demo

Это создает живой анимированный штрих-код (без зависимостей) -

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>
+254
28 апр. '15 в 7:25
источник

Редактировать 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 для документации и примеров. И Codepen


Предыдущий ответ

Приведенный ниже пример использует snap.js для динамического создания элементов tspan а затем 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>
+209
28 апр. '15 в 5:42
источник

Только 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>
+2
30 сент. '17 в 4:28
источник

Посмотрите другие вопросы по меткам или Задайте вопрос