Как интерполировать атрибут d пути SVG в React Active, чтобы использовать его для анимации? - PullRequest
0 голосов
/ 09 апреля 2020

Я хочу иметь кнопку в своем проекте React Native, которая должна открывать модальное всплывающее окно при нажатии. Однако мне бы хотелось, чтобы модал был из того же «материала», что и кнопка, и открывался с плавной анимацией, где кнопка становится модальной. Я создал атрибуты d пути SVG, в результате чего следующие два состояния path:


enter image description here

TRY 1

Теперь я добавляю Animated API-анимацию, но, к сожалению, ничего не происходит, и я предполагаю, что это просто потому, что нечего интерполировать, поскольку атрибут d является строкой, но я нужен номер, который можно как-то интерполировать.

TRY 2

Итак, еще одна моя попытка состояла в том, чтобы создать путь круга с тем же количеством вершин, что и модальный путь, а затем использовать значения координат для интерполяции. Тем не менее, я использую Inkscape для экспорта SVG, но результирующий атрибут d круга не совпадает с модальным с точки зрения отсутствия одинаковых команд SVG (например, таких как вертикальная линия v или кривая Безье * 1025). *).

Вопрос

Поэтому я был бы рад, если кто-нибудь знает способ анимации пути SVG описанным способом. Будь то использование библиотеки, которую я пропустил до сих пор, или манипулирование SVG таким образом, чтобы я мог использовать его для интерполяции значений с помощью React Native Animated API.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...