动画在没有画布的2个元素之间绘制的线，按ID链接

Question

我正在使用Sudhanshu Yadav创建的一个名为Pattern Lock的库。 基本上它是android模式锁屏的模仿。 我正在尝试绘制动画，显示解锁步骤（用作验证码）。 我不想像他在其他一个项目中那样做 - 他在线上有一个带箭头的图片，显示方向，我想在确切的解锁屏幕上运行一个动画，以便用户可以完成。 我已经尝试过使用SVG了，但它没有那么好用，因为我不完全理解它们，我发现的唯一相关的教程非常技术性。 我也试过在CSS中使用@keyframes。 如果容器是画布，则此处的项目不起作用，它必须是div或section。

我的最终目标是从此处开始动画：

初始点

移动到动画的下一部分 - 绘制线条：

动画1

动画2

最终结果是：

最终结果

我需要看到动画发生，以便我知道起点和终点在哪里。 如果可能的话，我还需要能够调整动画的时间。 我已经尝试过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”这样的随机序列，然后该模式必须为其设置动画，然后允许用户将其放入，这样密码就不会一直保持静态。

Ps：每个点（点）都有自己唯一的ID，所以我需要链接到每个ID。 因此，如果序列从1开始，它将以id“number_1”开始（例如），然后转到“number_2”，“number_6”，“number_9”

Answer 1

演示： CODEPEN

它只是简单的svg和css关键帧动画。 我为每一行添加了单独的路径，因此所有路径都有单独的动画。

对于计时和延迟，请查看不同路径的动画属性。

像animation: Drawpath 1s linear 2s forwards;一样animation: Drawpath 1s linear 2s forwards;
第一个数字是动画的持续时间，所以1秒。

2s是延迟。 所以有2秒的延迟。 前锋只是它保留了最终属性，我们不希望我们的线在动画完成时消失。

 .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>

Answer 2

请尝试使用此插件： http ： //ignitersworld.com/lab/patternLock.html

我希望它能帮助你，

谢谢

Answer 3

我不知道是否有一个库可以帮助你做到这一点，但你可以创建自己的动画方法。 我创建了一个线元素（例如使用span ）并创建一个从一个点到另一个点绘制线的方法。

您可以使用jQuery .position()方法获取元素的（x，y）坐标，使用.width()或.height()来更改行的长度。 我写了一个快速小提琴来展示如何使用普通的javascript。

http://jsfiddle.net/zaekfzwx/

这只是从左向右移动，但是你可以大致了解如何在不使用canvas元素的情况下创建一个绘制到DOM的函数。 例如，您可以使用CSS3 rotate变换在另一个方向上绘制线条，如下所示：

http://jsfiddle.net/46g8s1xe/

但是像丹尼尔提到的那样，该行的位置属性正好在HTML中供任何计算机阅读，这有点类似于验证验证码。

动画在没有画布的2个元素之间绘制的线，按ID链接

问题描述

3 个解决方案

解决方案1
21 已采纳 2015-04-14 09:51:35

解决方案2
3 2015-04-14 07:59:59

解决方案3
1 2015-04-12 17:40:04

动画在没有画布的2个元素之间绘制的线，按ID链接

问题描述

3 个解决方案

解决方案1 21 已采纳 2015-04-14 09:51:35

解决方案2 3 2015-04-14 07:59:59

解决方案3 1 2015-04-12 17:40:04

解决方案1
21 已采纳 2015-04-14 09:51:35

解决方案2
3 2015-04-14 07:59:59

解决方案3
1 2015-04-12 17:40:04