Как анимировать строки с помощью SVG.js - PullRequest
Новая
       31

Как анимировать строки с помощью SVG.js

0 голосов
/ 04 июля 2018

Я пытаюсь анимировать линию, которую я нарисовал, используя библиотеку SVG.js. Я попытался добавить метод animate (), но по какой-то причине он не работает.

Я пытался спрятать () линию, которую я нарисовал сначала, затем показать и оживить ее после. Что я здесь не так делаю?

Линии должны быть скрыты при загрузке, а затем анимироваться на свои позиции после.

Пожалуйста, запустите код, чтобы посмотреть. 

$(document).ready(function() {
  var draw = SVG('frame-1').size(300, 268);
  var line = draw.line(0, 0, 0, 268).stroke({
    width: 1,
    color: '#000'
  });
  var line2 = draw.line(0, 60, 300, 60).stroke({
    width: 1,
    color: '#000'
  });

  var draw2 = SVG('frame-2').size(300, 268);

  var line3 = draw2.line(300, 0, 300, 268).stroke({
    width: 1,
    color: '#000'
  });

  var line4 = draw2.line(0, 208, 300, 208).stroke({
    width: 1,
    color: '#000'
  });

  line3.hide();
  line3.show().animate({
    ease: '<',
    delay: '1.5s'
  });


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="frame-1"></div>
<div id="frame-2"></div>

1 Ответ

0 голосов
/ 04 июля 2018

Функции hide () & show () отключает эффект анимации. Я думаю, что вы пытаетесь что-то вроде этого:

line3.attr('opacity',0).animate(1500,'<').attr('opacity',1);

...