Я использую библиотеку, называемую Pattern Lock от Sudhanshu Yadav. В основном это мимика экрана блокировки экрана андроида. Я пытаюсь нарисовать анимацию, показывая шаги разблокировки (использовать как капчу). Я не хочу делать это так, как он делал в одном из своих других проектов, - где у него есть изображение со стрелками на линии, показывающее направления, я хотел бы запустить анимацию по точному экрану разблокировки, чтобы пользователь может завершить это. Я пробовал использовать SVG, но это не сработало так хорошо, как я не совсем понимаю их, и единственные учебники, которые я нашел, которые имеют отношение, были довольно техничными. Я также попытался использовать @keyframes в CSS. Проект здесь не работает, если контейнер является холстом, он должен быть div или секцией.
Моя конечная цель - пройти анимацию, начинающуюся с этого:
Переход к следующей части анимации - рисование строки:
С конечным результатом:
Мне нужно увидеть анимацию, чтобы я знал, где находятся начальные и конечные точки. Мне нужно иметь возможность настроить время на эту анимацию, если это возможно. Я пробовал 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 "number_1" (например), а затем переходите к "number_2", "number_6", "number_9"
