Примеры Flutter-анимации: фрагменты кода для создания динамических эффектов пользовательского интерфейса

Я могу предоставить вам несколько примеров анимации Flutter с кодом. Вот несколько методов, обычно используемых для создания анимации во Flutter:

  1. AnimatedContainer:
    Виджет AnimatedContainer автоматически анимирует изменения своих свойств, таких как размер, цвет и выравнивание. Вот пример:

    AnimatedContainer(
     duration: Duration(seconds: 1),
     width: _isSelected ? 200.0 : 100.0,
     height: _isSelected ? 200.0 : 100.0,
     color: _isSelected ? Colors.red : Colors.blue,
    )
  2. TweenAnimationBuilder:
    TweenAnimationBuilder позволяет определить диапазон значений для определенного свойства и плавно анимировать его. Вот пример анимации непрозрачности виджета:

    TweenAnimationBuilder(
     tween: Tween<double>(begin: 0.0, end: 1.0),
     duration: Duration(seconds: 1),
     builder: (BuildContext context, double value, Widget child) {
       return Opacity(
         opacity: value,
         child: child,
       );
     },
     child: Container(
       width: 200.0,
       height: 200.0,
       color: Colors.blue,
     ),
    )
  3. Анимация героев.
    Анимация героев используется для создания плавных переходов между двумя экранами путем анимации общего виджета между ними. Вот пример:

    Hero(
     tag: 'avatar',
     child: CircleAvatar(
       backgroundImage: AssetImage('assets/avatar.png'),
       radius: 50.0,
     ),
    )
  4. AnimatedBuilder:
    Виджет AnimatedBuilder позволяет создавать собственные анимации, предоставляя функцию компоновщика, которая обновляет значение анимации. Вот пример анимации положения виджета:

    AnimatedBuilder(
     animation: _controller,
     builder: (BuildContext context, Widget child) {
       return Positioned(
         top: _animation.value,
         child: child,
       );
     },
     child: Container(
       width: 200.0,
       height: 200.0,
       color: Colors.red,
     ),
    )

Это всего лишь несколько примеров, во Flutter доступно гораздо больше методов анимации. Вы можете изучить документацию Flutter для получения более подробной информации об анимации.