Анимация линии, нарисованной между двумя элементами без холста, привязка по идентификаторам

Я использую библиотеку, называемую Pattern Lock от Sudhanshu Yadav. В основном это мимика экрана блокировки экрана андроида. Я пытаюсь нарисовать анимацию, показывая шаги разблокировки (использовать как капчу). Я не хочу делать это так, как он делал в одном из своих других проектов, - где у него есть изображение со стрелками на линии, показывающее направления, я хотел бы запустить анимацию по точному экрану разблокировки, чтобы пользователь может завершить это. Я пробовал использовать SVG, но это не сработало так хорошо, как я не совсем понимаю их, и единственные учебники, которые я нашел, которые имеют отношение, были довольно техничными. Я также попытался использовать @keyframes в CSS. Проект здесь не работает, если контейнер является холстом, он должен быть div или секцией.

Моя конечная цель - пройти анимацию, начинающуюся с этого:

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 "number_1" (например), а затем переходите к "number_2", "number_6", "number_9"

Ответы

Ответ 1

DEMO: CODEPEN

Его просто простая анимация svg и css keyframe. Я добавил отдельные пути для каждой из строк, поэтому для всех путей есть отдельные анимации.

Для синхронизации и задержки посмотрите на свойство анимации различных путей.

Как animation: Drawpath 1s linear 2s forwards;
Первое число - это продолжительность анимации, так что 1 секунда.

2s - это задержка. Таким образом, есть 2 секунды задержки. Форвард просто то, что он сохраняет свойство конца, мы не хотим, чтобы наша строка исчезла, когда анимация выполнена.

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

Ответ 3

Я не знаю, есть ли библиотека для этого, но вы можете просто создать свой собственный метод анимации. Я бы создал элемент строки (например, с помощью span) и создаю метод, который рисует линию из одной точки в другую.

Вы можете использовать метод jQuery .position() для получения координат (x, y) ваших элементов и .width() или .height() для изменения длины вашей линии. Я написал быстрый скрипт, чтобы показать, как это может работать с простым javascript.

http://jsfiddle.net/zaekfzwx/

Это перемещается только слева направо, но вы получаете общее представление о том, как создать функцию для рисования в DOM без использования элемента canvas. Например, вы можете использовать преобразования CSS3 rotate для рисования линии в другом направлении, например:

http://jsfiddle.net/46g8s1xe/

Но, как упоминал Даниэль, атрибуты позиции строки соответствуют HTML для любого компьютера, который читается, и который поражает точку капчей.