Разница между Animation Tween и Animation Controlller

В некоторых руководствах по анимации Flutter используются объекты Tween и Animation. Некоторые используют только AnimationController. Оба приведенных ниже кода, похоже, выводят один и тот же результат. Итак, когда мы используем Tween с анимацией, а когда — только AnimationController?

С Tween и анимацией

import 'dart:core';
import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _State createState() {
    return _State();
  }
}

class _State extends State<Test> with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;
   bool faded = true;
  @override
  void initState() {
    super.initState();
    _animationController = new AnimationController(
        value:0.0,
        vsync: this,
        upperBound: 1.0,
        lowerBound: 0.0,
      duration: new Duration(seconds:1),
    );
    _animation = Tween(begin: 0.0, end: 1.0).animate(_animationController);

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        elevation: 0.5,
        title: new Text(
          "Testing views",
          style: Theme.of(context).textTheme.title,
        ),
      ),
      body: _buildBodyAnimationTest(),
//      body:  _buildTuto(),
    );
  }
  Widget _buildBodyAnimationTest(){
    return FadeTransition(
      opacity: _animation, //here is the difference
      child: InkWell(
        onTap: (){
          if (faded){
            faded = false;
            _animationController.reverse();
          }else{
            faded = true;
            _animationController.forward();
          }
        },
        child: new Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

Без твина и анимации

import 'dart:core';
import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _State createState() {
    return _State();
  }
}

class _State extends State<Test> with TickerProviderStateMixin {
  AnimationController _animationController;
   bool faded = true;
  @override
  void initState() {
    super.initState();
    _animationController = new AnimationController(
        value:0.0,
        vsync: this,
        upperBound: 1.0,
        lowerBound: 0.0,
      duration: new Duration(seconds:1),
    );

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        elevation: 0.5,
        title: new Text(
          "Testing views",
          style: Theme.of(context).textTheme.title,
        ),
      ),
      body: _buildBodyAnimationTest(),
//      body:  _buildTuto(),
    );
  }
  Widget _buildBodyAnimationTest(){
    return FadeTransition(
      opacity: _animationController, //here is the difference
      child: InkWell(
        onTap: (){
          if (faded){
            faded = false;
            _animationController.reverse();
          }else{
            faded = true;
            _animationController.forward();
          }
        },
        child: new Container(
          color: Colors.red,
        ),
      ),
    );
  }
}
Animista - анимация на ходу!
Animista - анимация на ходу!
Если вы веб-дизайнер или разработчик, вы знаете, что добавление анимации на ваш сайт может помочь сделать его более привлекательным и динамичным....
Повысьте уровень своего сайта с помощью анимации CSS и JavaScript: Пошаговое руководство
Повысьте уровень своего сайта с помощью анимации CSS и JavaScript: Пошаговое руководство
Если вы хотите добавить визуальный интерес к своему сайту, то внедрение анимации с помощью CSS и JavaScript может стать отличным способом сделать это....
2
0
405
2

Ответы 2

Tweens — это объекты, используемые для преобразования вывода анимации (например, AnimationController).

С AnimationController у вас обычно есть плавающее значение 0-1. Но ты редко этого хочешь. Tweens позволяет сопоставить это 0-1 с чем-то более конкретным, например, с красным на синий, слева направо, ...

_animationController = new AnimationController( vsync: this, lowerBound: 0.0, value: 20.0, upperBound: 500.0, duration: new Duration(seconds: 1), ); _animationController.animateTo(300.0); Я видел, что мы можем иметь значения выше 0-1 с помощью animationController.
TSR 02.02.2019 19:34

Да, но подростки могут отображать значения, отличные от двойных.

Rémi Rousselet 02.02.2019 19:36

Фон — это цвет моей последовательности анимации движения.

Animatable<Color> background = TweenSequence<Color>(
      [
        TweenSequenceItem(
          weight: 1.0,
          tween: ColorTween(
            begin: colors[_Substance.dayEndBackground],
            end: colors[_Substance.dayStartBackground],
          ),
        ),
        TweenSequenceItem(
          weight: 1.0,
          tween: ColorTween(
            begin: colors[_Substance.dayStartBackground],
            end: colors[_Substance.dayEndBackground],
          ),
        ),
      ],
    );

Это мой контроллер, определенный на initState() и обновляющийся каждую секунду:

bgUpdateController = AnimationController(
      value: _currentDateTime.hour / 24,
      upperBound: 1,
      lowerBound: 0,
      duration: const Duration(hours: 24),
      vsync: this,
    )..repeat();

Я использовал вышеуказанный фон и контроллер как AnimatedBuilder, как показано ниже:

AnimatedBuilder(
      animation: bgUpdateController,
      builder: (context, child) {
        return Scaffold(
          backgroundColor: background
              .chain(
                CurveTween(curve: Curves.easeInOutCirc),
              )
              .evaluate(
                AlwaysStoppedAnimation(bgUpdateController.value),
              ),
              ...

и результат моего кода:

clock demo

Вывод

AnimationController указывает, как долго будет длиться анимация и как управлять временем, верхней и нижней границей, как управлять данными с помощью времени, длины, последовательности и т. д., а АнимацияTween — для диапазона анимации со временем, цветом, диапазоном, последовательностью. , и т. д., пока анимация будет.

Другие вопросы по теме