Animazione di una linea tracciata tra 2 elementi senza quadro, collegamento tramite ID

Sto utilizzando una libreria denominata Pattern Lock di Sudhanshu Yadav. Fondamentalmente è un imitazione della schermata di blocco del modello Android. Sto cercando di disegnare un'animazione, mostrando i passaggi di sblocco (da usare come un captcha). Non voglio farlo come ha fatto in uno dei suoi altri progetti - dove ha una foto con le frecce sulla linea, che mostra le direzioni, vorrei eseguire un'animazione sullo schermo di sblocco esatto in modo che l'utente può completarlo. Ho provato a utilizzare SVG, ma non ha funzionato così bene perché non li capisco completamente e le uniche esercitazioni che ho trovato rilevanti erano piuttosto tecniche. Ho provato anche a usare @keyframes in CSS. Il progetto qui non funziona se il contenitore è una tela, deve essere un div o una sezione.Animazione di una linea tracciata tra 2 elementi senza quadro, collegamento tramite ID

Il mio obiettivo finale è quello di passare attraverso l'animazione a partire da questo:

starting point

di passare al successivo parte dell'animazione - tracciato della linea:

animating 1

animating 2

Con il risultato finale di:

end result

ho bisogno di vedere l'animazione accadendo in modo che io so dove i punti di inizio e fine sono. Devo essere in grado di regolare i tempi su quell'animazione, se possibile. Ho provato jsplumb ma non ha fatto quello che mi serviva, e la documentazione è confusa.

Ma qui è il mio codice:

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

eventuali modi che posso farlo utilizzando jQuery? Devo essere in grado di cambiare la sequenza password/numero in modo dinamico. Quindi voglio creare una sequenza casuale come "1-2-6-9" e quindi il pattern deve animarlo e quindi consentire all'utente di inserirlo, in modo che la password non sia statica per tutto il tempo.

P.s: Ogni punto (punto) ha il proprio ID univoco, quindi ho bisogno di collegarmi a ciascun ID in questo modo. In modo che se la sequenza inizia a uno, inizierebbe con id "numero_1" (per esempio) e poi passerà a "numero_2", "numero_6", "numero_9"

fonte

2015-04-09 Haring10

sequenza di blocco * è * codificato in jQuery – Downgoat

@ vihan1086, sì, ma non è codificato con _animation_ – Haring10

@JoshHarington Se si desidera utilizzarlo come Captcha, farlo con CSS rivelare il passcode? –

DEMO: CODEPEN

suo semplicemente SVG e CSS keyframe di animazione . Ho aggiunto percorsi separati per ciascuna delle linee in modo che ci siano animazioni separate per tutti i percorsi.

Per tempi e ritardi osservare le proprietà dell'animazione dei diversi percorsi.

Come animation: Drawpath 1s linear 2s forwards;
Il primo numero è la durata dell'animazione in modo da 1 secondo.

2s è il ritardo. Quindi ci sono 2 secondi di ritardo. In avanti è solo che mantiene la proprietà di fine, non vogliamo che la nostra linea sparisca quando l'animazione è terminata.

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

fonte

2015-04-14 09:51:35 Persijn

@JoshHarington - Questa è assolutamente la soluzione che dovresti perseguire. Il tuo caso d'uso è esattamente il tipo che gli SVG sono perfetti per risolvere. –

@JoshBurgess, ci stavo giocando. Non riuscivo a farlo funzionare perché il plugin non usa SVG, ma sì è stato il più vicino e mi ha aiutato ad avvicinarmi a risolverlo. – Haring10

Non so se c'è una libreria per aiutare a farlo, ma potresti semplicemente creare il tuo metodo di animazione. Creo un elemento di linea (usando un span per esempio) e creo un metodo che disegna una linea da un punto a un altro.

È possibile utilizzare il metodo jQuery .position() per ottenere il (x, y) coordinate della elementi e .width() o .height() per cambiare la lunghezza della vostra linea. Ho scritto un rapido violino per mostrare come questo potrebbe funzionare con un semplice javascript.

http://jsfiddle.net/zaekfzwx/

Questo solo si sposta da sinistra a destra, ma si ottiene l'idea generale su come creare una funzione per disegnare al DOM senza utilizzare un elemento canvas.Ad esempio, è possibile utilizzare CSS3 rotate trasformazioni per disegnare la linea in un'altra direzione, in questo modo:

http://jsfiddle.net/46g8s1xe/

Ma come Daniele accennato, gli attributi posizione della linea proprio nel codice HTML per qualsiasi computer per leggere , che sconfigge il punto di captcha.

fonte

2015-04-12 17:40:04 APTy

Grazie APTy, come posso farlo partire sempre dal centro del cerchio? Se provo a far andare la linea diagonalmente, la linea crescerà dal cerchio interno e si muoverà verso l'alto – Haring10

Ho modificato la mia risposta per includerla. Usa '-webkit-transform-origin:' con la dimensione impostata a metà della larghezza della linea (es. '5px 5px' per una linea di altezza' 10px') e quindi ruota la linea usando 'webkit-transform: ruotare() 'per impostare la quantità che si desidera ruotare la linea – APTy

Si prega di provare a usare questo plugin: http://ignitersworld.com/lab/patternLock.html

Spero che vi aiuterà,

Grazie

fonte

2015-04-14 07:59:59 user3629322

Dai un'occhiata alla domanda, il Blocco Pattern è da quel plugin. – Haring10

Animazione di una linea tracciata tra 2 elementi senza quadro, collegamento tramite ID

risposta

Problemi correlati