Блог

Главная - Вопросы по программированию - Как динамически анимировать круг SVG с учетом списка значений?

Как динамически анимировать круг SVG с учетом списка значений?

#javascript #react-native #svg #react-native-svg

Вопрос:

У меня есть список таких ценностей, как:

[10, 20, 20, 30, 10, 10, 10, 20, 20, ...]

Это может измениться до начала анимации.

Цель состоит в том, чтобы взять круг SVG и сделать следующее:

  • Индекс i = 0
  • Плавно установите радиус для перечисления[i] в течение X секунд
  • Увеличение i
  • Плавно установите радиус для перечисления[i] в течение X секунд
  • Увеличение i
  • …

В настоящее время я использую Animate.timing и onComplete начинаю новую, но это кажется неэффективным способом (и, возможно, это может добавить некоторые задержки) для настройки заранее запланированной анимации. Есть ли способ сообщить объекту SVG об изменении формы в заданное время и с заданной длительностью?

Я воображаю, что смогу сказать кругу, чтобы:

[{from_radius: 10, to_radius: 20, duration: 0.25}, {from_radius: 20, to_radius: 20, duration: 0.25}, {from_radius: 20, to_radius: 30, duration: 0.25}, ...]

И передайте это кругу, чтобы он справился с этим автоматически.

Комментарии:

1. Конечно, используйте СМАЙЛ.

2. @RobertLongson не могли бы вы дать мне небольшое вступление/фрагмент, чтобы начать с этого? Я никогда не слышал о СМАЙЛЕ и не могу найти ничего с react-native-svg

3. w3.org/Graphics/SVG/IG/resources/svgprimer.html#SMIL_animations предполагая, что react-native-svg поддерживает это.

4. Спасибо @RobertLongson, но в этом примере, похоже, есть простая анимация, а не взятие значений из списка. Мне просто интересно, возможно ли это.

5. Да, это возможно. Проверьте атрибут значения есть несколько примеров в MDN

Метки: