Анимируй линию в нужном направлении с Vivus.js - PullRequest
Новая
       27

Анимируй линию в нужном направлении с Vivus.js

0 голосов
/ 17 мая 2018

Я пытаюсь анимировать эту линию, чтобы она начиналась сверху вниз, а затем поворачивалась направо, чтобы нарисовать себя, с Vivus.js.Тем не менее, графика, кажется, не оживляет, и я не могу понять, почему .. у кого-то есть некоторый опыт с анимацией отрисовки SVG, возможно?Вот ручка: https://codepen.io/anon/pen/mLzYyE

Код: 

var animate = ["animate1"];

animate.forEach(function (svgId) {
    return new Vivus(svgId, {
        type: "async",
        start: "autostart",
        duration: 100
    });
});

1 Ответ

0 голосов
/ 17 мая 2018

Как я понимаю Vivus.js работает только с элементом path.Так что в вашем случае вы должны заменить rect элементов на path.Я также изменил тип на oneByOne для последовательной анимации.Вот упрощенный пример: 

var animate = ["animate1"];

animate.forEach(function (svgId) {
    return new Vivus(svgId, {
        type: 'oneByOne',
        start: "autostart",
        duration: 100
    });
});
svg {
  height: 500px;
  width: 200px;
}

path {
  stroke-width: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.3/vivus.min.js"></script>

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="animate1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 66.598 221.333" enable-background="new 0 0 66.598 221.333" xml:space="preserve">
	<path stroke="red" d="M0 0 l 0 20"/>
  <path stroke="red" d="M0 25 l 0 20"/>
  <path stroke="red" d="M0 50 l 0 20"/>
  <path stroke="red" d="M0 75 l 30 0"/>

</svg>
...