Плавные анимации без рывков
Вопрос
Анимация на экране дёргается. Как вы будете искать и устранять причину?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Профилировать в profile-режиме на реальном устройстве, смотреть UI и raster потоки
Проверить, что перестраивается: `AnimatedBuilder` с `child`, `*Transition` вместо `setState`
`RepaintBoundary` вокруг анимируемой части
Избегать `saveLayer`: `Opacity`, `ShaderMask`, клипы над большими деревьями
Убрать тяжёлую работу с UI-потока, предкешировать изображения (`precacheImage`)
Что могут спросить следом
- Как понять, что тормозит raster-поток?
- Что изменил Impeller для анимаций?
Разбор
Образцовый ответ: «Сначала запускаю в profile на реальном устройстве и включаю performance overlay: видно, какой поток не успевает. Если UI, смотрю в DevTools, что перестраивается на каждом кадре: часто это setState на весь экран, тогда перевожу на AnimatedBuilder с child или готовые Transition. Если raster, ищу дорогие эффекты: Opacity и клипы над большими деревьями, тени, большие изображения. Анимируемую часть отделяю RepaintBoundary, чтобы не перерисовывать фон. Изображения для анимаций заранее декодирую через precacheImage. Рывки при первом показе эффекта раньше были из-за компиляции шейдеров, с Impeller это в основном ушло»
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.