Sobes.tech
Назад к вопросам
Junior — Middle
73

Каково определение явных анимаций и в чем заключается их применение?

Компании, где спрашивали
ЯндексЯндекс

Ответ от нейросети

sobes.tech AI

Что хотят услышать интервьюеры:

Явные анимации в Flutter — это анимации, которыми разработчик управляет вручную через AnimationController. Интерполяция значений, старт, остановка и направление анимации задаются явно в коде. Такой подход нужен, когда требуется точный контроль над поведением анимации.

Определение:

Явные анимации — это анимации, где состояние анимации не скрыто внутри виджета, а управляется напрямую через контроллер и анимационные значения. Обычно используются AnimationController, Tween, CurvedAnimation и слушатели обновления. Это дает возможность задавать длительность, запускать анимацию вперед и назад, останавливать ее и синхронизировать с другими событиями.

Пример использования:

Например, нужно плавно увеличивать кнопку при нажатии и уменьшать обратно при отпускании, а также иметь возможность прервать анимацию в любой момент.

import 'package:flutter/material.dart';

class ScaleButton extends StatefulWidget {
  const ScaleButton({super.key});

  @override
  State<ScaleButton> createState() => _ScaleButtonState();
}

class _ScaleButtonState extends State<ScaleButton>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200),
    );

    _scaleAnimation = Tween<double>(begin: 1.0, end: 1.1).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _onTapDown() => _controller.forward();
  void _onTapUp() => _controller.reverse();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => _onTapDown(),
      onTapUp: (_) => _onTapUp(),
      onTapCancel: _onTapUp,
      child: AnimatedBuilder(
        animation: _scaleAnimation,
        builder: (context, child) {
          return Transform.scale(
            scale: _scaleAnimation.value,
            child: child,
          );
        },
        child: Container(
          padding: const EdgeInsets.all(16),
          color: Colors.blue,
          child: const Text(
            'Tap me',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

Пояснение кода:

AnimationController создает и управляет временем анимации. Tween<double> задает диапазон значений от 1.0 до 1.1, а CurvedAnimation добавляет плавность. При onTapDown вызывается forward(), и масштаб растет; при onTapUp и onTapCancel вызывается reverse(), и масштаб возвращается обратно. AnimatedBuilder перестраивает только нужную часть UI, когда значение анимации меняется.

Ключевые моменты:

  • Явная анимация управляется вручную через AnimationController.
  • Подходит, когда нужен точный контроль над стартом, остановкой и направлением анимации.
  • Часто используется вместе с Tween и CurvedAnimation.
  • Требует корректного dispose() для освобождения ресурсов.
  • Обычно применяется для сложных интерактивных эффектов: перетаскивание, реакции на жесты, синхронизация нескольких анимаций.