javascript - Animating a line drawn between 2 elements without canvas, linking by ID's -
i using library called pattern lock sudhanshu yadav. mimic of android pattern lock screen. trying draw animation, showing unlock steps (to use captcha). not want way has done in 1 of other projects - has picture arrows on line, showing directions, run animation on exact unlock screen user can complete that. have tried using svg's, did not work out not understand them , tutorials have found relevant quite technical. have tried using @keyframes in css well. project here not work if container canvas, needs div or section.
my end goal go through animation starting @ this:
moving next part of animation - drawing line:
with end result of:
i need see animation happening know start , end points are. need able adjust timing on animation if possible. have tried jsplumb did not needed, , documentation confusing.
but here code:
<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> any ways can using jquery? need able change password / number sequence dynamically. want create random sequence "1-2-6-9" , pattern must animate that, , allow user put in, password not static time.
p.s: each point (dot) has it's own unique id, need link each id way. if sequence starts @ one, start id "number_1" (for example) , move on "number_2", "number_6", "number_9"
demo: codepen
its plain svg , css keyframe animation. added separate paths each of lines there separate animations paths.
for timing , delay @ animation property's of different paths.
like animation: drawpath 1s linear 2s forwards;
first number duration of animation 1 second.
2s delay. there 2 seconds of delay. forwards keeps end property, don't want our line disappear when animation done.
.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 { { stroke-dasharray: 0, 100; } { stroke-dasharray: 100, 100; } } @keyframes drawpath { { stroke-dasharray: 0, 100; } { 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>