补间动画和动画控制器之间的区别
Posted
技术标签:
【中文标题】补间动画和动画控制器之间的区别【英文标题】:Difference between Animation Tween and Animation Controlller 【发布时间】:2019-06-27 00:10:27 【问题描述】:在一些 Flutter 动画教程中,有些使用了 Tween
和 Animation
对象。有些只使用AnimationController
。下面的两个代码似乎都输出相同的结果。那么我们什么时候使用 Tween 和动画,什么时候只使用 AnimationController?
带有补间和动画
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,
),
),
);
【问题讨论】:
【参考方案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是动画的长度,如何控制时间、上下边界,如何控制数据的时间、长度、顺序等,而AnimationTween 用于动画的范围,包括时间、颜色、范围、序列等,只要动画是 while。
【讨论】:
【参考方案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);
我已经看到我们可以使用animationController获得超过0-1的值
是的,但是补间可以映射到非双精度值。以上是关于补间动画和动画控制器之间的区别的主要内容,如果未能解决你的问题,请参考以下文章