В конце прошлого года я создал сайт для Chrome Dev Summit . Я хотел, чтобы он имел внешний вид и функциональность в стиле Material Design , поскольку это отличный язык дизайна, и я чувствовал, что он идеально подойдёт для сайта, который я хотел создать. Но, как и с любым новым языком дизайна, возникают вопросы, сложности и приходится принимать решения, особенно когда речь идёт о веб-концепциях.
Одним из аспектов сайта, создание которого было особенно сложным, был эффект «захвата» при нажатии на карточку.
Чтобы добиться такого эффекта с частотой 60 кадров в секунду, пришлось потратить немало времени на размышления, создание прототипов и пойти на несколько интересных компромиссов. На Chrome Dev Summit я рассказал об этом эффекте и подробно объяснил, как я его реализовал.
Создание высокопроизводительной анимации
Высокопроизводительные анимации , по крайней мере сегодня, — это те, которые отдают предпочтение компоновщику браузера. Если вы можете ограничиться изменением свойств трансформации и прозрачности, то, как правило, увидите отличную производительность. Общий подход, который я использовал для анимации карточек, именно это и делает:
- Измерьте положение всех элементов карточки, когда карточка свернута.
- Переключите классы карты, чтобы развернуть ее (без анимации).
- Повторно измерьте положение элементов на карте, теперь, когда карта развернута.
- Вычислите разницу.
- Примените отрицательные преобразования, чтобы вернуть элементы в исходные позиции.
- Включить анимацию.
- Удалите отрицательные преобразования и наблюдайте, как элементы перемещаются в свои окончательные положения на экране.
Всё это может показаться затратным, но с момента взаимодействия пользователя до начала анимации существует временной интервал в 100 мс. Если этот интервал превысит этот, пользователь почувствует задержку. Это время можно использовать для выполнения дорогостоящей подготовительной работы, чтобы снизить затраты на саму анимацию. Также в конце есть временной интервал примерно 50–100 мс для выполнения подготовительных работ, что может быть удобно в зависимости от ваших задач.
Вся трудоемкая работа по созданию анимации выполняется в течение первых 100 мс, а на Nexus 5 эта работа занимает около 70 мс, так что остается запас времени.
Получить код
Если вам интересно более подробно рассмотреть сайт, вам будет приятно услышать, что код был опубликован на GitHub , так что зайдите и посмотрите!