Menu
I am using a library called Pattern Lock by Sudhanshu Yadav. Basically it is an mimic of the android pattern lock screen. I am trying to draw an animation, showing the unlock steps (to use as a captcha). I do not want to do it the way he has done in one of his other projects - where he has a picture with arrows on the line, showing the directions, I would like to run an animation over the exact unlock screen so that the user can complete that. I have tried using SVG's, but it did not work out so well as I do not fully understand them and the only tutorials that I have found that is relevant were quite technical. I have tried using @keyframes in CSS as well. The project here does not work if the container is a canvas, it needs to be a div or a section.
My end goal is to go through the animation starting at this:
Moving to the next part of the animation - drawing the line:
With the end result of:
I need to see the animation happening so that I know where the start and end points are. I need to be able to adjust the timing on that animation as well if possible. I have tried jsplumb but it did not do what I needed, and the documentation is confusing.
But here is my 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 I can do this using jQuery? I need to be able to change the password / number sequence dynamically. So I want to create a random sequence like "1-2-6-9" and then the pattern must animate that, and then allow the user to put that in, so that the password is not static all the time.
P.s: Each point (dot) has it's own unique ID, so I need to link to each ID that way. So that if the sequence starts at one, it would start with id "number_1" (for example) and then move on to "number_2", "number_6", "number_9"
815
You can use an AnimationController to control the animation duration. To draw the line "step by step" you can use a Tween (linear interpolation between a beginning and ending value).
Since we're using JavaScript to control <canvas> elements, it's also very easy to make (interactive) animations. In this chapter we will take a look at how to do some basic animations. Probably the biggest limitation is, that once a shape gets drawn, it stays that way.
DEMO: CODEPEN
Its just plain svg and css keyframe animation. I added separate paths for each of the lines so there are separate animations for all the paths.
For timing and delay look at the animation property's of the different paths.
Like animation: Drawpath 1s linear 2s forwards;
The first number is the duration of the animation so 1 second.
2s is the delay. So there is 2 seconds of delay. Forwards is just that it keeps the end property, we don't want our line to disappear when the animation is 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 { 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>Please try to use this plugin : http://ignitersworld.com/lab/patternLock.html
I hope it will help you ,
Thank you
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
