Статику мы рассмотрели в прошлом посте, а теперь давайте посмотрим что произойдет, если оживить элементы.
Возьмем исходный проект.
И теперь начнем менять в динамике скейл каждого компонента, угол поворота и цвет фона.
Получим через какое-то время набор компонентов, напоминающий цветные стикеры на доске. Много стикеров. Надеюсь, это не скрамборд с багрепортами 😄
Теперь увеличим диапазон скейла и угла поворота.
Нам это нужно для того, чтобы более наглядно увидеть текущий вариант работы движка рендеринга. А еще увидеть, что после обновления всех объектов, образовался вполне себе интересный паттерн.
Видно, что наши «стикеры» скейлятся, вращаются и меняют цвет фона дискретно. Это все потому, что после обновления свойств компонента запускается метод его перерисовки — update. И в нем нет ничего плохого и некорректного. Но мне все же нужна анимация. В данном случае анимации не будет, т.к. при вызове этого метода, компонент удаляется из DOM и заменяется новым экземпляром. Стало быть и анимации нет 😢
Что же делать? 🤔
Нужно придумать решение. И если рассуждать абстрактно, то все просто — нужен еще один метод, который не вызывал бы перемонтирование элемента в DOM-дереве, а «мягко» заменял его стили. В данном случае, нужен именно еще один метод, а не обновление существующего. Т.к. существующий работает более чем корректно и он нужен точно.
После этой идеи, я добавил еще один метод, «мягко» обновляющий стиль компонента — patch. Теперь все работает отлично, как мне и требуется 🔥
Кстати, на реализацию этого метода у меня ушло примерно 5 минут и все надежно заработало. Можно добавить для него еще событие жизненного цикла, но я решил его не делать. Т.к. слабо могу представить, когда он может потребоваться.
Время на добавление новой фичи — для меня это один из самых основных маркеров эффективности и устойчивости архитектуры. Позже опубликую пост о том, как можно вообще посчитать эффективность разработки, там рассмотрим все в деталях.
А пока я радуюсь тому, что в моей сцене есть перманентная анимация и пойду заниматься перемещением компонентов по экрану.
Хорошей и эффективной разработки всем!
Подписывайся на мой канал в TG: https://t.me/cantfailcode