2015-07-22 10 views
1

Как я могу сделать цвет заливки SVG circle анимировать один раз от заданного начала (непрозрачный черный) до заданного конца (прозрачный/нет). Это должно быть вызвано функцией JavaScript, а анимация - одноразовой, длительностью несколько сотен миллисекунд. Как я могу сделать это с помощью DOM/CSS без необходимости рисовать стороннюю библиотеку, такую ​​как Snap.svg?Анимировать свойство SVG, такое как цвет заливки без сторонней библиотеки

Так что, когда мой обратного вызова

  • устанавливается сразу fill: black
  • переход через период 200мс к fill: none

ответ

1

Попробуйте функцию <animate>. Вот demo, у которого нет внешней библиотеки.

Вы можете запустить анимацию из этого SO answer

+0

Спасибо за расклеивание демонстрации! –

1

Использование чистого JS вы можете добиться этого. Этот поток имеет функцию, которая будет делать то, что вы просите: Animate without JQuery.

Функция принимает элемент, атрибут для анимации и скорость в мс для выполнения анимации. В вашем случае будет что-то вроде этого animate(circle, fill, 300). Вероятно, вам придется немного изменить его, чтобы адаптироваться к альфа-значению, но это идея.

Смежные вопросы