Я пытаюсь создать простую анимацию в React, где набор узлов перемещается из одного набора координат в другой.Вместо того, чтобы использовать библиотеку анимации React, я пытаюсь добиться этого эффекта самостоятельно, выполняя собственную интерполяцию.
У меня есть три компонента: App, Map и Node.Прямо сейчас, Map принимает значение опоры между 0 и 1, которое представляет процент завершения анимации.Основываясь на этом десятичном значении, Map выполняет интерполяцию положений x и y для каждого Node, учитывая некоторые начальные и конечные координаты для каждого.Когда определенная кнопка нажата, событие щелчка вызывается в App.В обработчике событий я использую setInterval для вызова функции с именем animate каждые 15 миллисекунд.animate просто увеличивает процентное значение завершения, прежде чем оно будет передано Map в качестве реквизита в функции render.Когда это процентное значение завершения достигает 1, я использую clearInterval, чтобы периодически прекращать вызов animate.
Анимация прекрасно работает с точки зрения позиционирования и времени, но в Chrome она ужасно запинается.Я знаю, что такая анимация может работать плавно, но я не уверен, как это сделать.Исходя из моего описания того, что я делаю, могу ли я что-то сделать для этого?Я знаю, что с каждым изменением и рендерингом связано много накладных расходов, учитывая, что я делаю каждый Node повторный рендеринг каждые 15 миллисекунд, поэтому мне интересно, есть ли способ обойти это.Спасибо!