Question

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

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

starting point

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

animating 1

animating 2

最终结果为：

end result

我需要看到动画发生，以便我知道起点和终点在哪里。如果可能的话，我还需要能够调整动画的时间。我已经尝试过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，因此我需要以这种方式链接到每个ID。因此，如果序列从1开始，它将以id“number_1”开始（例如），然后转到“number_2”，“number_6”，“number_9”

Answer 1

DEMO： CODEPEN

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

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

赞animation: Drawpath 1s linear 2s forwards;
第一个数字是动画的持续时间，因此为1秒。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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 个答案: