Гипотез
У меня есть несколько кругов на пути (см. Начальную фигуру на рисунке), и они должны анимироваться на другой путь (конечная форма на рисунке).
Есть несколько действий, которые анимация должна выполнить:
- переместить всю фигуру в новую позицию
- изменить путь
- уменьшить все радиусы круга
Фигура:
Задача
Raphael.js знает, как анимировать круги от исходных координат до конечных, а также изменять радиус.Поскольку анимация не идет по пути, аналогичному оригинальному и конечному, анимация выглядит не очень хорошо.Круги идут от x1, y1 до x2, y2 по прямой линии.
То, что я пробовал
Выполнение прямой анимации,перемещение кругов от начала до конца, изменение радиуса.Как я уже сказал, это не нормально.
Перемещение каждого круга с интервалами, вычисление нового пути на каждой итерации и вычисление положения кругов.Это выполняется очень медленно.
Расчет позиции временного круга на каждой итерации с помощью Element.getPointAtLength ().Это также очень медленно.
Наличие нескольких промежуточных путей, жестко закодированных в массивах, и запуск анимации по каждому из них.Это лучше с точки зрения скорости, но выглядит отрывисто
Итак, есть идеи?