javascript - validacion - ¿Cómo puedo animar el dibujo de texto en una página web?

validar formulario javascript html5

Question

Quiero tener una página web que tenga una palabra centrada.

Quiero que esta palabra se dibuje con una animación, de modo que la página "escriba" la palabra de la misma manera que lo haríamos, es decir, comienza en un punto y dibuja líneas y curvas con el tiempo de modo que el resultado final sea un glifo.

No me importa si esto se hace con <canvas> o el DOM, y no me importa si se hace con JavaScript o CSS. La ausencia de jQuery sería agradable, pero no es obligatorio.

¿Cómo puedo hacer esto? He buscado exhaustivamente sin suerte.

Answer 1

Quiero que esta palabra se dibuje con una animación, de modo que la página "escriba" la palabra de la misma manera que lo haríamos

Versión de lona

Esto dibujará caracteres individuales más como uno escribiría a mano. Utiliza un patrón de guión largo donde el orden de encendido / apagado se intercambia con el tiempo por char. También tiene un parámetro de velocidad.

^{Ejemplo de animación (ver demo a continuación)}

Para aumentar el realismo y la sensación orgánica, agregué un espaciado aleatorio de letras, un desplazamiento y delta, transparencia, una rotación muy sutil y finalmente uso una fuente ya "escrita a mano". Estos pueden envolverse como parámetros dinámicos para proporcionar una amplia gama de "estilos de escritura".

Para una apariencia aún más realista, se requerirían los datos de ruta, que no son por defecto. Pero este es un código corto y eficiente que se aproxima al comportamiento escrito a mano y fácil de implementar.

Cómo funciona

Al definir un patrón de guión, podemos crear hormigas marchantes, líneas punteadas, etc. Aprovechando esto definiendo un punto muy largo para el punto "apagado" y aumentando gradualmente el punto "encendido", dará la ilusión de dibujar la línea cuando se acaricia mientras se anima la longitud del punto.

Dado que el punto fuera es tan largo, el patrón repetitivo no será visible (la longitud variará con el tamaño y las características del tipo de letra que se esté utilizando). La ruta de la letra tendrá una longitud, por lo que debemos asegurarnos de que cada punto cubra al menos esta longitud.

Para las letras que consisten en más de una ruta (por ejemplo, O, R, P, etc.) como una es para el contorno, una es para la parte hueca, las líneas aparecerán dibujadas simultáneamente. No podemos hacer mucho al respecto con esta técnica, ya que requeriría el acceso a cada segmento de ruta para ser trazado por separado.

Compatibilidad

Para los navegadores que no admiten el elemento de lienzo, se puede colocar una forma alternativa de mostrar el texto entre las etiquetas, por ejemplo, un texto con estilo:

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

Manifestación

Esto produce el trazo animado en vivo ( sin dependencias ):

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>

Answer 2

Editar 2019

Creé una biblioteca de JavaScript que puede crear animaciones realistas. Es fácil de usar y requiere un archivo JSON especial que actúe como fuente.

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>

Consulte la página de Github para obtener documentación y ejemplos. Y Codepen

Respuesta anterior

El siguiente ejemplo usa snap.js para crear dinámicamente elementos tspan y luego animar cada uno de sus 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>

Respuesta anterior

Puedes hacer algo como esto usando el 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>

Sin la animación de keyframes , puede hacer algo como esto

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

Y para el soporte de IE puede usar 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>

Answer 3

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