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

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

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

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

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

3 221
javascript css canvas css-shapes html5-canvas

3 ответа:

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

холст версия

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

Snapshot
пример анимации (см. пример ниже)

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

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

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

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

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

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

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

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

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

вы можете сделать что-то подобное с помощью svg stroke-dasharray

EDIT новая красотка

это также можно сделать, обернув каждую букву с элементом tspan вручную

var s = Snap('svg');
var text = 'Some Long Texts'
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-dasharray': 300,
  'stroke-dashoffset': 300
})

$('tspan').each(function(index) {
  $(this).stop(true, true).delay(800 * index).animate({
    'stroke-dashoffset': 0,
  }, 800, 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>

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

только 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