Блог

Главная - Вопросы по программированию - как добавить анимацию в пользовательские радиостанции D3

как добавить анимацию в пользовательские радиостанции D3

#javascript #reactjs #svg #d3.js

Вопрос:

У меня рации выровнены на арке.

Я хотел бы добавить переход, который перемещает выбранную внутреннюю синюю точку вдоль арки к недавно выбранному радио.

изображение

У меня есть рабочая демонстрационная установка. РАБОЧАЯ ДЕМОНСТРАЦИЯ

Ответ №1:

Смотрите решение в скрипке (нажмите на синюю кнопку):

Просто поместите кнопку в «g» и поверните ее с переходом:

 const button = d3.select("#button");
let angle = 60;

button.on("click", () => {
 angle = -angle;
 button.transition().duration(1000).attr("transform", `translate(${cX}, ${cY}) rotate(${angle})`);
});

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

1. мне нужно, чтобы он работал, когда я выбрал невыбранное радио. это работает только с уже выбранным радио

2. также можете ли вы использовать мою демо-версию?

Ответ №2:

Другой вариант-использовать анимацию вдоль пути:

 <svg width="300" height="200">
    <path fill="none" stroke="blue" stroke-width="3"
      d="M 20,20 A 100,100 0 0 0 220,20" />
      <circle r="10" fill="white" stroke="blue" stroke-width="3">
        <animateMotion dur="3s" repeatCount="indefinite"
        path="M 20,20 A 100,100 0 0 0 220,20 A 100,100 1 1 1 20,20" />
    </circle>
</svg>
Метки: