В некоторых руководствах по анимации 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,
),
),
);
}
}


Tweens — это объекты, используемые для преобразования вывода анимации (например, AnimationController).
С AnimationController у вас обычно есть плавающее значение 0-1. Но ты редко этого хочешь.
Tweens позволяет сопоставить это 0-1 с чем-то более конкретным, например, с красным на синий, слева направо, ...
Да, но подростки могут отображать значения, отличные от двойных.
Фон — это цвет моей последовательности анимации движения.
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),
),
...
и результат моего кода:

Вывод
AnimationController указывает, как долго будет длиться анимация и как управлять временем, верхней и нижней границей, как управлять данными с помощью времени, длины, последовательности и т. д., а АнимацияTween — для диапазона анимации со временем, цветом, диапазоном, последовательностью. , и т. д., пока анимация будет.
_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.