【发布时间】：2023-03-22 23:26:01
【问题描述】：
我正在使用 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 做会显示密码？
标签： javascript jquery css animation dynamic