Последовательный анимационный SVG с d3js

Question

У меня запутанный путь SVG, состоящий из множества сегментов, определенных с помощью M #, # L #, # M #, # L #, #. Я хотел бы оживить рисунок этого пути, но в том порядке, в котором они перечислены. Я пробовал решения, перечисленные здесь: Can't make paths draw growing slowly with D3, но они рисуют каждый сегмент пути параллельно. Как изменить это, чтобы они анимировались последовательно?

Answer 1

Переходы D3 имеют функцию delay(), которая позволяет указать, когда начать анимацию. Вы можете использовать это, чтобы начать рисовать последовательные сегменты пути после того, как предыдущие были нарисованы. Вы также можете использовать событие перехода end, чтобы начать следующий переход после завершения предыдущего. Таким образом, вам даже не нужно указывать задержку.

В качестве альтернативы вы можете анимировать путь в SVG самостоятельно без Javascript. См. Пример here. Все, что вам нужно сделать, это в основном добавить animate элемент в path, который подскажет, как его нарисовать.

Answer 2

Я столкнулся с этой проблемой в своем приложении для анимации. Если ваш SVG-файл имеет путь с несколькими сегментами перемещения (M #) в элементе <path>, параллельная анимация неизбежна.

Что вам нужно сделать, так это разбить команды Move (M) в пределах элементов <path> и сохранить их в отдельных элементах.

. Попросите своего графического художника сделать это или напишите простой синтаксический анализатор, чтобы восстановить файл SVG перед его загрузкой в ​​DOM.

например. Этот файл svg с несколькими командами перемещений в элементе <path> будет иметь все сегменты, нарисованные в одно и то же время.

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="792px" height="612px" viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve"> 
<g> 
<path d="M184.258,256.649c1.309-1.742,2.541-3.093,3.696-4.184c-4.34-7.825-10.576-17.045-12.287-29.926 
       c-1.667,21.723-7.667,27.647-7,37.191c0.537,7.686,4.105,13.873,10.521,17.196C178.836,270.993,179.51,262.968,184.258,256.649zM204.334,239.325c-5.241,12.075-8.956,9.837-14.921,15.876c-0.864,0.875-1.775,1.922-2.746,3.213 
       c-4.61,6.135-4.88,14.29-4.363,19.82c0.342,3.666,1.03,6.181,1.03,6.181C202.334,273.554,206.334,247.225,204.334,239.325zM205.477,208.486c0.602-0.338,1.204-0.661,1.803-0.97c-0.694-0.353-1.444-0.719-2.279-1.104 
       c-15-6.911-12.667-21.393-12.667-21.393c-16.355,19.708-12.421,38.267-6.032,47.368 
       C188.276,222.657,194.783,214.486,205.477,208.486zM210.415,209.276c-9.472,4.503-20.029,12.519-21.569,26.141c-0.165,1.458-0.233,2.977-0.179,4.566 
       c0,0,6.64-0.937,14.51-5.51c0.858-0.5,1.729-1.037,2.61-1.626c7.728-5.17,16.045-13.95,20.214-28.738 
       C226,204.108,218.617,205.377,210.415,209.276zM177.84,319.268c-1.606-4.102-3.152-10.643-1.438-18.681c0.966-4.531,2.632-6.883,4.521-8.441 
       c-6.775-6.099-16.252-16.29-16.252-16.29s-2,11.19,2.333,30.938C169.349,317.476,174.032,319.582,177.84,319.268z"/> 

</g> 
</svg> 

Следующий файл svg будет иметь каждый сегмент, нарисованный последовательно. Конечно, вам нужно закодировать анимацию для анимации по одному пути за раз. Если все они находятся внутри элементов пути, это было бы невозможно.

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="792px" height="612px" viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve"> 
<g> 
<path d="M184.258,256.649c1.309-1.742,2.541-3.093,3.696-4.184c-4.34-7.825-10.576-17.045-12.287-29.926 
       c-1.667,21.723-7.667,27.647-7,37.191c0.537,7.686,4.105,13.873,10.521,17.196C178.836,270.993,179.51,262.968,184.258,256.649z 
       "/> 
<path d="M204.334,239.325c-5.241,12.075-8.956,9.837-14.921,15.876c-0.864,0.875-1.775,1.922-2.746,3.213 
       c-4.61,6.135-4.88,14.29-4.363,19.82c0.342,3.666,1.03,6.181,1.03,6.181C202.334,273.554,206.334,247.225,204.334,239.325z"/> 
<path d="M205.477,208.486c0.602-0.338,1.204-0.661,1.803-0.97c-0.694-0.353-1.444-0.719-2.279-1.104 
       c-15-6.911-12.667-21.393-12.667-21.393c-16.355,19.708-12.421,38.267-6.032,47.368 
       C188.276,222.657,194.783,214.486,205.477,208.486z"/> 
<path d="M210.415,209.276c-9.472,4.503-20.029,12.519-21.569,26.141c-0.165,1.458-0.233,2.977-0.179,4.566 
       c0,0,6.64-0.937,14.51-5.51c0.858-0.5,1.729-1.037,2.61-1.626c7.728-5.17,16.045-13.95,20.214-28.738 
       C226,204.108,218.617,205.377,210.415,209.276z"/> 
      <path d="M177.84,319.268c-1.606-4.102-3.152-10.643-1.438-18.681c0.966-4.531,2.632-6.883,4.521-8.441 
       c-6.775-6.099-16.252-16.29-16.252-16.29s-2,11.19,2.333,30.938C169.349,317.476,174.032,319.582,177.84,319.268z"/> 

</g> 
</svg>