在没有 canvas 的 2 个元素之间绘制一条线的动画，通过 ID 链接

Question

我正在使用一个名为 Pattern Lock 的库，作者是 Sudhanshu Yadav。基本上它是 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”这样的随机序列，然后模式必须为它设置动画，然后允许用户输入它，这样密码就不会一直是静态的。

P.s: 每个点（点）都有自己唯一的 ID，所以我需要 link 这样每个 ID。因此，如果序列从 1 开始，它将以 id "number_1" 开始（例如），然后移动到 "number_2"、"number_6"、"number_9"

Answer 1

我不知道是否有库可以帮助执行此操作，但您可以创建自己的动画方法。我会创建一个线元素（例如使用 span）并创建一个从一个点到另一个点绘制一条线的方法。

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

一起工作

http://jsfiddle.net/zaekfzwx/

这只会从左向右移动，但您可以大致了解如何创建一个函数来绘制到 DOM 而无需使用 canvas 元素。例如，您可以使用 CSS3 rotate 转换在另一个方向绘制线，如下所示：

http://jsfiddle.net/46g8s1xe/

但是就像大牛提到的，该行的位置属性在 HTML 中，任何计算机都可以读取，这有点破坏了验证码的意义。

Answer 2

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

希望对你有所帮助,

谢谢

Answer 3

演示版：CODEPEN

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

有关时间和延迟，请查看不同路径的动画属性。

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

2s是延迟。所以有2秒的延迟。 Forwards只是它保持结束属性，我们不希望我们的线在动画完成时消失。

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

在没有 canvas 的 2 个元素之间绘制一条线的动画，通过 ID 链接

Animating a line drawn between 2 elements without canvas, linking by ID's

javascript

css

jquery

animation

dynamic