Animating a line drawn between 2 elements without canvas, linking by ID's
Question
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.
Ps: 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"
3 answers
solution1
21 ACCPTED 2015-04-14 09:51:35
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>
solution2
3 2015-04-14 07:59:59
Please try to use this plugin : http://ignitersworld.com/lab/patternLock.html
I hope it will help you ,
Thank you
solution3
1 2015-04-12 17:40:04
I don't know if there's a library to help do this, but you could just create your own animation method. I'd create a line element (using a span for example) and create a method that draws a line from one point to another.
You can use jQuery .position() method to get the (x, y) coordinates of your elements and .width() or .height() to change the length of your line. I wrote up a quick fiddle to display how this could work with plain javascript.
This only moves from left to right, but you get the general idea on how to create a function to draw to the DOM without using a canvas element. For example, you could use CSS3 rotate transformations to draw the line in another direction, like so:
But like Daniel mentioned, the position attributes of the line are right in the HTML for any computer to read, which sort of defeats the point of captcha.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.