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:

starting point

moving next part of animation - drawing line:

animating 1

animating 2

with end result of:

end result

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>


-

Popular posts from this blog

html/hta mutiple file in audio player -

ok started coding .hta application , pretty html page .hta extension , adde mp3 player , did work <object data="test.mp3" type="audio/mp3" width="200" height="40"> <param name="src" value="test.mp3"> <param name="autostart" value="0"> </object> but it's 1 song playing again , again , plz there way add multiple files playlist believe it's should added "src" parameters not sure, i'm starting did add "," in between , , tried ";" none of them working i'm waiting answers :d i wanna know if can show me how become familiar tag see it's helpful , powerful activex, audio,video,pdf .... files i'm waiting impatiently [i don't know object, plz plz more clear] get inspired example hta_audio_player.hta <html> <head> <title>hackoo audio player playlist hackoo 2014</title> <hta:app...
Read more

debugging - Reference - What does this error mean in PHP? -

what this? this number of answers warnings, errors , notices might encounter while programming php , have no clue how fix. community wiki, invited participate in adding , maintaining list. why this? questions "headers sent" or "calling member of non-object" pop on stack overflow. root cause of questions same. answers questions typically repeat them , show op line change in his/her particular case. these answers not add value site because apply op's particular code. other users having same error can not read solution out of because localized. sad, because once understood root cause, fixing error trivial. hence, list tries explain solution in general way apply. what should here? if question has been marked duplicate of this, please find error message below , apply fix code. answers contain further links investigate in case shouldn't clear general answer alone. if want contribute, please add "favorite" error message, warning or notic...
Read more