Pregunta Animar una línea dibujada entre 2 elementos sin lienzo, unir por ID


Estoy usando una biblioteca llamada Patrón de bloqueo por Sudhanshu Yadav. Básicamente es una imitación de la pantalla de bloqueo del patrón de Android. Estoy tratando de dibujar una animación, mostrando los pasos de desbloqueo (para usar como un captcha). No quiero hacerlo de la manera en que lo hizo en uno de sus otros proyectos, donde tiene una imagen con flechas en la línea, que muestra las direcciones, me gustaría ejecutar una animación sobre la pantalla de desbloqueo exacta para que el usuario puede completar eso. He intentado usar SVG, pero no funcionó tan bien como no los entiendo completamente y los únicos tutoriales que he encontrado que son relevantes fueron bastante técnicos. He intentado usar @keyframes en CSS también. El proyecto aquí no funciona si el contenedor es un lienzo, debe ser un div o una sección.

Mi objetivo final es pasar por la animación comenzando por esto:

starting point

Pasando a la siguiente parte de la animación, dibujando la línea:

animating 1

animating 2

Con el resultado final de:

end result

Necesito ver la animación para saber dónde están los puntos de inicio y fin. Necesito poder ajustar el tiempo en esa animación también si es posible. He intentado jsplumb pero no hice lo que necesitaba, y la documentación es confusa.

Pero aquí está mi código:

<html>
<head>
    <link href="css/patternLock.css"  rel="stylesheet" type="text/css" />
    <script src="js/jquery.js"></script>
    <script src="js/patternLock.js"></script>
    <script>
        $(document).ready(function() {
            var lock = new PatternLock("#patternContainer", {enableSetPattern: true});
            lock.setPattern('123');
        });
    </script>
</head>
<body>

    <h1>Memorize!</h1>
    <div class="container">
        <div id="patternContainer"></div>
    </div>
</body>
</html>

¿De qué manera puedo hacer esto usando jQuery? Necesito poder cambiar dinámicamente la secuencia de contraseña / número. Así que quiero crear una secuencia aleatoria como "1-2-6-9" y luego el patrón debe animar eso, y luego permitir que el usuario lo ingrese, para que la contraseña no sea estática todo el tiempo.

PD: Cada punto (punto) tiene su propio ID único, así que necesito vincularlo a cada ID de esa manera. De modo que si la secuencia comienza en uno, comenzaría con id "number_1" (por ejemplo) y luego pasaría a "number_2", "number_6", "number_9"


32
2018-04-09 22:02


origen


Respuestas:


MANIFESTACIÓN: CODEPEN

Es simplemente la animación svg y css keyframe. Agregué rutas separadas para cada una de las líneas, por lo que hay animaciones separadas para todas las rutas.

Para el tiempo y la demora mira las propiedades de la animación de las diferentes rutas.

Me gusta animation: Drawpath 1s linear 2s forwards;
El primer número es la duración de la animación por 1 segundo.

2s es la demora. Entonces hay 2 segundos de retraso. Forwards es solo que mantiene la propiedad final, no queremos que nuestra línea desaparezca cuando termina la animación.

.key-anim1 {
  -webkit-animation: Drawpath 1s linear forwards;
  animation: Drawpath 1s linear forwards;
  stroke-dasharray: 0, 100;
}
.key-anim2 {
  -webkit-animation: Drawpath 1s linear 1s forwards;
  animation: Drawpath 1s linear 1s forwards;
  stroke-dasharray: 0, 100;
}
.key-anim3 {
  -webkit-animation: Drawpath 1s linear 2s forwards;
  animation: Drawpath 1s linear 2s forwards;
  stroke-dasharray: 0, 100;
}
@-webkit-keyframes Drawpath {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 100, 100;
  }
}
@keyframes Drawpath {
  from {
    stroke-dasharray: 0, 100;
  }
  to {
    stroke-dasharray: 100, 100;
  }
}
<svg class="test" viewbox="0 0 400 200">
  <path class="key-anim1" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M50 50, 100 100" />
  <path class="key-anim2" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M100 100, 150 100" />
  <path class="key-anim3" fill="none" stroke-width="5px" stroke="rgba(200,10,10,0.5)" d="M150 100, 150 150" />
  <circle r="10" cy="50" cx="50" fill="#f33" />
  <circle r="10" cy="100" cx="50" fill="#f33" />
  <circle r="10" cy="150" cx="50" fill="#f33" />
  <circle r="10" cy="50" cx="100" fill="#f33" />
  <circle r="10" cy="100" cx="100" fill="#f33" />
  <circle r="10" cy="150" cx="100" fill="#f33" />
  <circle r="10" cy="50" cx="150" fill="#f33" />
  <circle r="10" cy="100" cx="150" fill="#f33" />
  <circle r="10" cy="150" cx="150" fill="#f33" />
</svg>


21
2018-04-14 09:51



Por favor intente usar este plugin: http://ignitersworld.com/lab/patternLock.html

Espero que te ayude ,

Gracias


3
2018-04-14 07:59



No sé si hay una biblioteca que ayude a hacer esto, pero podrías crear tu propio método de animación. Crearía un elemento de línea (usando un span por ejemplo) y crea un método que dibuja una línea de un punto a otro.

Puedes usar jQuery .position() método para obtener las coordenadas (x, y) de sus elementos y .width() o .height() para cambiar la longitud de tu línea Escribí un violín rápido para mostrar cómo esto podría funcionar con javascript simple.

http://jsfiddle.net/zaekfzwx/

Esto solo se mueve de izquierda a derecha, pero obtienes la idea general de cómo crear una función para dibujar en el DOM sin usar un elemento canvas. Por ejemplo, puedes usar CSS3 rotate transformaciones para dibujar la línea en otra dirección, así:

http://jsfiddle.net/46g8s1xe/

Pero, como mencionó Daniel, los atributos de posición de la línea están en el código HTML para que cualquier computadora los lea, lo que de alguna manera derrota el punto de captcha.


1
2018-04-12 17:40