动画在没有画布的 2 个元素之间绘制的线，通过 ID 链接
Posted
技术标签:
【中文标题】动画在没有画布的 2 个元素之间绘制的线，通过 ID 链接【英文标题】：Animating a line drawn between 2 elements without canvas, linking by ID's 【发布时间】：2015-06-15 11:43:37 【问题描述】：我正在使用 Sudhanshu Yadav 的名为 Pattern Lock 的库。基本上它是 android 模式锁屏的模仿。我正在尝试绘制动画，显示解锁步骤（用作验证码）。我不想像他在其他项目中所做的那样做 - 他有一张带箭头的图片，显示方向，我想在确切的解锁屏幕上运行动画，以便用户可以完成。我曾尝试使用 SVG，但效果不佳，因为我不完全理解它们，而且我发现的唯一相关教程非常技术性。我也尝试在 CSS 中使用 @keyframes。如果容器是canvas，这里的项目是不行的，需要是div或者section。
我的最终目标是从这里开始播放动画：
移动到动画的下一部分 - 画线：
最终结果为：
我需要看到动画的发生，以便知道起点和终点在哪里。如果可能的话，我还需要能够调整该动画的时间。我已经尝试过 jsplumb，但它没有做我需要的事情，而且文档很混乱。
但这是我的代码：
<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>
有什么方法可以使用 jQuery 做到这一点？我需要能够动态更改密码/数字序列。所以我想创建一个像“1-2-6-9”这样的随机序列，然后模式必须对其进行动画处理，然后允许用户将其放入，这样密码就不会一直是静态的。
附注： 每个点（点）都有自己的唯一 ID，所以我需要以这种方式链接到每个 ID。因此，如果序列从 1 开始，它将以 id “number_1”（例如）开始，然后移动到“number_2”、“number_6”、“number_9”
【问题讨论】：
模式锁是用jQuery编码的 @vihan1086，是的，但它不是用 animation 编码的 @JoshHarington 如果你想用它作为验证码，用 CSS 做会显示密码？ 【参考方案1】：演示：CODEPEN
它只是简单的 svg 和 css 关键帧动画。 我为每条线添加了单独的路径，因此所有路径都有单独的动画。
有关时间和延迟，请查看不同路径的动画属性。
点赞animation: Drawpath 1s linear 2s forwards;
第一个数字是动画的持续时间，所以 1 秒。
2s 是延迟。所以有2秒的延迟。 forwards 只是它保留了 end 属性，我们不希望我们的 line 在动画完成后消失。
.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- stroke="rgba(200,10,10,0.5)" d="M50 50, 100 100" />
<path class="key-anim2" fill="none" stroke- stroke="rgba(200,10,10,0.5)" d="M100 100, 150 100" />
<path class="key-anim3" fill="none" stroke- 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>【讨论】：
@JoshHarington - 这绝对是您应该追求的解决方案。您的用例正是 SVG 最适合解决的那种。 @JoshBurgess，我在玩它。我无法让它工作，因为该插件不使用 SVG，但它是最接近的，帮助我更接近实际解决它。【参考方案2】：请尝试使用这个插件：http://ignitersworld.com/lab/patternLock.html
希望对你有帮助
谢谢
【讨论】：
看看问题，Pattern Lock 就是来自那个插件。【参考方案3】：我不知道是否有库可以帮助做到这一点，但您可以创建自己的动画方法。我会创建一个线元素（例如使用span）并创建一个从一个点到另一个点绘制一条线的方法。
您可以使用 jQuery .position() 方法来获取元素的 (x, y) 坐标，并使用 .width() 或 .height() 来更改行的长度。我写了一个快速的小提琴来展示这如何与普通的 javascript 一起工作。
http://jsfiddle.net/zaekfzwx/
这只是从左到右移动，但您大致了解如何创建一个函数以在不使用画布元素的情况下绘制到 DOM。例如，您可以使用 CSS3 rotate 转换将线绘制到另一个方向，如下所示：
http://jsfiddle.net/46g8s1xe/
但就像丹尼尔提到的那样，该行的位置属性在 HTML 中是正确的，任何计算机都可以读取，这有点违背了验证码的意义。
【讨论】：
感谢 APTy，我怎样才能让它总是从圆心开始呢？如果我尝试让线对角线，线将从内圈开始向上移动 我编辑了我的答案以包含它。使用-webkit-transform-origin: 并将大小设置为线条宽度的一半（例如5px 5px 用于高度为10px 的线条），然后使用webkit-transform: rotate() 旋转线条以设置要旋转线条的量跨度>
以上是关于动画在没有画布的 2 个元素之间绘制的线，通过 ID 链接的主要内容，如果未能解决你的问题，请参考以下文章