在没有画布的两个元素之间绘制一条线，由ID链接 [英] Animating a line drawn between 2 elements without canvas, linking by ID's
问题描述
我在Sudhanshu Yadav使用名为
它只是简单的svg和css关键帧动画。
我为每个行添加了单独的路径，因此所有路径都有单独的动画。
对于时间和延迟，请查看不同路径的动画属性。
喜欢动画：Drawpath 1s linear 2s forward;
第一个数字是动画的持续时间，所以1秒。
2s是延迟。所以有2秒的延迟。
转发只是它保留最终的属性，我们不希望我们的行在动画完成时消失。
.key-anim1 {-webkit-animation：Drawpath 1s linear forward;动画：Drawpath 1s线性向前; stroke-dasharray：0，100;}。key-anim2 {-webkit-animation：Drawpath 1s linear 1s forward;动画：Drawpath 1s线性1s向前; stroke-dasharray：0，100;}。key-anim3 {-webkit-animation：Drawpath 1s linear 2s forward;动画：Drawpath 1s线性2s向前; stroke-dasharray：0，100;} @ - webkit-keyframes Drawpath {from {stroke-dasharray：0，100; }到{stroke-dasharray：100，100; }} @关键帧Drawpath {from {stroke-dasharray：0，100; }到{stroke-dasharray：100，100; }}
< svg class =testviewbox = 0 0 400 200> < path class =key-anim1fill =nonestroke-width =5pxstroke =rgba（200,10,10,0.5）d =M50 50,100 100/> < path class =key-anim2fill =nonestroke-width =5pxstroke =rgba（200,10,10,0.5）d =M100 100,150 100/> < path class =key-anim3fill =nonestroke-width =5pxstroke =rgba（200,10,10,0.5）d =M150 100,150 150/> < circle r =10cy =50cx =50fill =＃f33/> < circle r =10cy =100cx =50fill =＃f33/> < circle r =10cy =150cx =50fill =＃f33/> < circle r =10cy =50cx =100fill =＃f33/> < circle r =10cy =100cx =100fill =＃f33/> < circle r =10cy =150cx =100fill =＃f33/> < circle r =10cy =50cx =150fill =＃f33/> < circle r =10cy =100cx =150fill =＃f33/> < circle r =10cy =150cx =150fill =＃f33/>< / svg>
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"
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>
这篇关于在没有画布的两个元素之间绘制一条线，由ID链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
