Код-ревью Middle Анимации обновлено
Код-ревью: анимация пульса
Вопрос
Виджет с пульсирующей кнопкой. Найдите проблемы.
class _PulseState extends State<Pulse> with SingleTickerProviderStateMixin {
late AnimationController _c;
late AnimationController _glow;
@override
void initState() {
super.initState();
_c = AnimationController(vsync: this, duration: const Duration(seconds: 1))..repeat(reverse: true);
_glow = AnimationController(vsync: this, duration: const Duration(seconds: 2))..repeat();
_c.addListener(() => setState(() {}));
}
@override
Widget build(BuildContext context) {
return Opacity(
opacity: 0.5 + _c.value / 2,
child: Transform.scale(scale: 1 + _c.value * 0.1, child: const HeavyCard()),
);
}
}
Коротко
Исправление: TickerProviderStateMixin (или один контроллер), FadeTransition(opacity: ..., child: ScaleTransition(scale: ..., child: const HeavyCard())), без addListener, и dispose для каждого контроллера.
Что должен найти ревьюер
- Ошибкастрока 1
SingleTickerProviderStateMixinразрешает один тикер, а контроллеров два: на втором будет ошибка. НуженTickerProviderStateMixin. - Производительностьстрока 10
addListenerсsetStateперестраивает весьbuildна каждом кадре. ИспользоватьAnimatedBuilder/FadeTransition/ScaleTransition. - Производительностьстрока 15
Opacityс меняющимся значением над тяжёлой карточкой дорог для отрисовки:FadeTransitionменяет альфу слоя без перестроения. - Ошибкастрока 8Нет
dispose: оба контроллера и их тикеры продолжат работать после удаления виджета, будет ошибка о неосвобождённом тикере. - Стильстрока 9
_glowсоздаётся и крутится, но нигде не используется: лишняя работа на каждом кадре.
Разбор
Исправление: TickerProviderStateMixin (или один контроллер), FadeTransition(opacity: ..., child: ScaleTransition(scale: ..., child: const HeavyCard())), без addListener, и dispose для каждого контроллера.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.