我正在使用Sudhanshu Yadav的一个名为Pattern Lock的库。基本上，它是一个模仿android模式的锁屏。我试图画一个动画，显示解锁步骤（用作验证码）。我不想像他在其他项目中那样做——他有一张线上有箭头的图片，显示方向，我想在精确的解锁屏幕上运行一个动画，以便用户能够完成。我尝试过使用SVG，但效果不太好，因为我不完全理解它们，我发现唯一相关的教程都是技术性的。我也尝试过在CSS中使用@keyframes。如果容器是画布，则此处的项目不起作用，它需要是div或section
我的最终目标是从以下几点开始浏览动画：
移动到动画的下一部分-绘制线条：
最终结果是：
我需要看到动画的发生，这样我才能知道起点和终点在哪里。如果可能的话，我需要能够调整动画的计时。我尝试过jsplumb，但它没有达到我所需要的效果，而且文档很混乱
但这是我的代码：
<；html>；
<；头>；
<；链接href=”https://stackoverflow.com/questions/29549845/css/patternLock.css“rel=“stylesheet”type=“text/css”/>；
<；脚本src=”https://stackoverflow.com/questions/29549845/js/jquery.js“></脚本>；
<；脚本src=”https://stackoverflow.com/questions/29549845/js/patternLock.js“></脚本>；
<；脚本>；
$（文档）.ready（函数（）{
var lock=newpatternlock（“#patterncainer”{enableSetPattern:true}）；
lock.setPattern（'123'）；
});
</脚本>；
</头>；
<；车身>；
<；h1>；记住</h1>；
<；div class=“container”>；
<；div id=“patterncainer”></部门>；
</部门>；
</车身>；
</html>；
使用jQuery有什么方法可以做到这一点吗？我需要能够动态更改密码/号码序列。所以我想创建一个像“1-2-6-9”这样的随机序列，然后模式必须设置动画，然后允许用户输入，这样密码就不会一直是静态的
附言：
每个点（点）都有自己唯一的ID，所以我需要以这种方式链接到每个ID。因此，如果序列从1开始，它将从id“number_1”（例如）开始，然后移动到“number_2”、“number_6”、“number_9”
演示：CODEPEN
它只是简单的svg和css关键帧动画。
我为每条线添加了单独的路径，因此所有路径都有单独的动画
有关计时和延迟，请查看不同路径的动画属性
像动画：Drawpath 1s线性2s向前
第一个数字是动画的持续时间，因此为1秒
2s是延迟。因此有2秒的延迟。
向前只是因为它保留了end属性，我们不希望在动画完成时线条消失
.key-anim1{
-webkit动画：Drawpath 1s线性向前；
动画：Drawpath 1s线性向前；
笔划数组：0，100；
}
.key-2{
-webkit动画：Drawpath 1s线性1s向前；
动画：Drawpath 1s线性1s向前；
笔划数组：0，100；
}
.key-3{
-webkit动画：Drawpath 1s线性2向前；
动画：Drawpath 1s线性2s向前；
笔划数组：0，100；
}
@-webkit关键帧绘制路径{
从{
笔划数组：0，100；
}
到{
笔划数组：100100；
}
}
@关键帧绘制路径{
从{
笔划数组：0，100；
}
到{
笔划数组：100100；
}
}<；svg class=“test”viewbox=“0 400 200”>；
<；path class=“key-anim1”fill=“none”stroke width=“5px”stroke=“rgba（200,10,10,0.5）”d=“M50 50,100”/gt；
<；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”/>；
<；圆圈r=“10”cy=“50”cx=“50”fill=“#f33”/>；
<；圆圈r=“10”cy=“100”cx=“50”fill=“#f33”/>；
<；圆圈r=“10”cy=“150”cx=“50”fill=“#f33”/>；
<；圆圈r=“10”cy=“50”cx=“100”fill=“#f33”/>；
<；圆圈r=“10”cy=“100”cx=“100”fill=“#f33”/>；
<；圆圈r=“10”cy=“150”cx=“100”fill=“#f33”/>；
<；圆圈r=“10”cy=“50”cx=“150”fill=“#f33”/>；
<；圆圈r=“10”cy=“100”cx=“150”fill=“#f33”/>；
<；圆圈r=“10”cy=“150”cx=“150”fill=“#f33”/>；
</svg>