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