教程 | 在 Flutter 应用里实现动画效果
本教程将讲解如何在 Flutter 中构建显式动画。我们先来介绍一些动画库中的基本概念,类和方法,然后列举五个动画示例。这些示例互相关联,展示了动画库的不同方面。
This tutorial shows you how to build explicit animations in Flutter. After introducing some of the essential concepts, classes, and methods in the animation library, it walks you through 5 animation examples. The examples build on each other, introducing you to different aspects of the animation library.
Flutter SDK 也提供过渡动画,比如
FadeTransition
,SizeTransition
和 SlideTransition
。这些简单的动画可以通过设置起点和终点来触发。它们比下面介绍的显式动画更容易实现。
The Flutter SDK also provides implicit transition animations,
such as FadeTransition
, SizeTransition
,
and SlideTransition
. These simple animations are
triggered by setting a beginning and ending point.
They are simpler to implement
than explicit animations, which are described here.
基本动画概念和类
Essential animation concepts and classes
Flutter 中的动画系统基于类型化的 Animation
对象。
Widgets 既可以通过读取当前值和监听状态变化直接合并动画到 build 函数,也可以作为传递给其他 widgets
的更精细动画的基础。
The animation system in Flutter is based on typed
Animation
objects. Widgets can either incorporate
these animations in their build functions directly by
reading their current value and listening to their state
changes or they can use the animations as the basis of
more elaborate animations that they pass along to
other widgets.
<double>
Animation在 Flutter 中,动画对象无法获取屏幕上显示的内容。
Animation
是一个已知当前值和状态(已完成或已解除)的抽象类。一个比较常见的动画类型是 Animation<double>
。
In Flutter, an Animation
object knows nothing about what
is onscreen. An Animation
is an abstract class that
understands its current value and its state (completed or dismissed).
One of the more commonly used animation types is Animation<double>
.
一个 Animation
对象在一段时间内,持续生成介于两个值之间的插入值。这个 Animation
对象输出的可能是直线,曲线,阶梯函数,或者任何自定义的映射。根据 Animation
对象的不同控制方式,它可以反向运行,或者中途切换方向。
An Animation
object sequentially generates
interpolated numbers between two values over a certain duration.
The output of an Animation
object might be linear,
a curve, a step function, or any other mapping you can devise.
Depending on how the Animation
object is controlled,
it could run in reverse, or even switch directions in the
middle.
动画还可以插入除 double 以外的类型,比如 Animation<Color>
或者 Animation<Size>
。
Animations can also interpolate types other than double, such as
Animation<Color>
or Animation<Size>
.
Animation
对象具有状态。它的当前值在 .value
中始终可用。
An Animation
object has state. Its current value is
always available in the .value
member.
Animation
对象与渲染或 build()
函数无关。
An Animation
object knows nothing about rendering or
build()
functions.
CurvedAnimation
[CurvedAnimation][] 定义动画进程为非线性曲线。
A CurvedAnimation
defines the animation’s progress
as a non-linear curve.
animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);
CurvedAnimation
和 AnimationController
(下面将会详细说明)都是 Animation<double>
类型,所以可以互换使用。
CurvedAnimation
封装正在修改的对象 —
不需要将 AnimationController
分解成子类来实现曲线。
CurvedAnimation
and AnimationController
(described in the next section)
are both of type Animation<double>
, so you can pass them interchangeably.
The CurvedAnimation
wraps the object it’s modifying—you
don’t subclass AnimationController
to implement a curve.
AnimationController
AnimationController
是个特殊的 Animation
对象,每当硬件准备新帧时,他都会生成一个新值。默认情况下,AnimationController
在给定期间内会线性生成从 0.0 到 1.0 的数字。例如,这段代码创建了一个动画对象,但是没有启动运行。
AnimationController
is a special Animation
object that generates a new value whenever the hardware
is ready for a new frame. By default,
an AnimationController
linearly produces the numbers
from 0.0 to 1.0 during a given duration.
For example, this code creates an Animation
object,
but does not start it running:
controller = AnimationController(duration: const Duration(seconds: 2), vsync: this);
AnimationController
源自于 Animation<double>
,所以可以用在任何需要 Animation
对象的地方。但是 AnimationController
还有其他方法控制动画。例如,使用 .forward()
方法启动动画。数字的生成与屏幕刷新关联,所以一般来说每秒钟会生成 60 个数字。数字生成之后,每个动画对象都调用附加 Listener 对象。为每个 child 创建自定义显示列表,请参考 RepaintBoundary
。
AnimationController
derives from Animation<double>
, so it can be used
wherever an Animation
object is needed. However, the AnimationController
has additional methods to control the animation. For example, you start
an animation with the .forward()
method. The generation of numbers is
tied to the screen refresh, so typically 60 numbers are generated per
second. After each number is generated, each Animation
object calls the
attached Listener
objects. To create a custom display list for each
child, see RepaintBoundary
.
创建 AnimationController
的同时,也赋予了一个 vsync
参数。
vsync
的存在防止后台动画消耗不必要的资源。您可以通过添加 SingleTickerProviderStateMixin
到类定义,将有状态的对象用作 vsync。可参考 GitHub 网站 animate1
中的示例。
When creating an AnimationController
, you pass it a vsync
argument.
The presence of vsync
prevents offscreen animations from consuming
unnecessary resources.
You can use your stateful object as the vsync by adding
SingleTickerProviderStateMixin
to the class definition.
You can see an example of this in animate1 on GitHub.
Tween
在默认情况下,AnimationController
对象的范围是 0.0-0.1。如果需要不同的范围或者不同的数据类型,可以使用 Tween
配置动画来插入不同的范围或数据类型。例如下面的示例中,Tween
的范围是 -200 到 0.0。
By default, the AnimationController
object ranges from 0.0 to 1.0.
If you need a different range or a different data type, you can use a
Tween
to configure an animation to interpolate to a
different range or data type. For example, the
following Tween
goes from -200.0 to 0.0:
tween = Tween<double>(begin: -200, end: 0);
Tween
是无状态的对象,只有 begin
和 end
。
Tween
的这种单一用途用来定义从输入范围到输出范围的映射。输入范围一般为 0.0-1.0,但这并不是必须的。
A Tween
is a stateless object that takes only begin
and end
.
The sole job of a Tween
is to define a mapping from an
input range to an output range. The input range is commonly
0.0 to 1.0, but that’s not a requirement.
Tween
源自 Animatable<T>
,而不是 Animation<T>
。像动画这样的可动画元素不必重复输出。例如,ColorTween
指定了两种颜色之间的过程。
A Tween
inherits from Animatable<T>
, not from Animation<T>
.
An Animatable
, like Animation
, doesn’t have to output double.
For example, ColorTween
specifies a progression between two colors.
colorTween = ColorTween(begin: Colors.transparent, end: Colors.black54);
Tween
对象不存储任何状态。而是提供 evaluate(Animation<double> animation)
方法,将映射函数应用于动画当前值。
Animation
对象的当前值可以在 .value
方法中找到。
evaluate 函数还执行一些内部处理内容,比如确保当动画值在 0.0 和1.0 时分别返回起始点和终点。
A Tween
object does not store any state. Instead, it provides the
evaluate(Animation<double> animation)
method that
applies the mapping function to the current value of the animation.
The current value of the Animation
object can be found in the
.value
method. The evaluate function also performs some housekeeping,
such as ensuring that begin and end are returned when the
animation values are 0.0 and 1.0, respectively.
Tween.animate
要使用 Tween
对象,请在 Tween
调用 animate()
,传入控制器对象。例如,下面的代码在 500 ms 的进程中生成 0-255 范围内的整数值。
To use a Tween
object, call animate()
on the Tween
,
passing in the controller object. For example,
the following code generates the
integer values from 0 to 255 over the course of 500 ms.
AnimationController controller = AnimationController( duration: const Duration(milliseconds: 500), vsync: this); Animation<int> alpha = IntTween(begin: 0, end: 255).animate(controller);
下面的示例展示了一个控制器,一个曲线,和一个 Tween
。
The following example shows a controller, a curve, and a Tween
:
AnimationController controller = AnimationController( duration: const Duration(milliseconds: 500), vsync: this); final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut); Animation<int> alpha = IntTween(begin: 0, end: 255).animate(curve);
动画通知
Animation notifications
一个 Animation
对象可以有不止一个
Listener
和 StatusListener
,用 addListener()
和 addStatusListener()
来定义。当动画值改变时调用 Listener
。
Listener
最常用的操作是调用 setState()
进行重建。当一个动画开始,结束,前进或后退时,会调用 StatusListener
,用 AnimationStatus
来定义。下一部分有关于 addListener()
方法的示例,在 监控动画过程
中也有 addStatusListener()
的示例。
An Animation
object can have Listener
s and StatusListener
s,
defined with addListener()
and addStatusListener()
.
A Listener
is called whenever the value of the animation changes.
The most common behavior of a Listener
is to call setState()
to cause a rebuild. A StatusListener
is called when an animation begins,
ends, moves forward, or moves reverse, as defined by AnimationStatus
.
The next section has an example of the addListener()
method,
and Monitoring the progress of the animation shows an
example of addStatusListener()
.
动画示例
Animation examples
这部分列举了五个动画示例,每个示例都提供了源代码的链接。
This section walks you through 5 animation examples. Each section provides a link to the source code for that example.
渲染动画
Rendering animations
目前为止,我们学习了如何随着时间生成数字序列。但屏幕上并未显示任何内容。要显示一个 Animation
对象,需将 Animation
对象存储为您的 widget 成员,然后用它的值来决定如何绘制。
So far you’ve learned how to generate a sequence of numbers over time.
Nothing has been rendered to the screen. To render with an
Animation
object, store the Animation
object as a
member of your widget, then use its value to decide how to draw.
参考下面的应用程序,它没有使用动画绘制 Flutter logo。
Consider the following app that draws the Flutter logo without animation:
import 'package:flutter/material.dart'; void main() => runApp(LogoApp()); class LogoApp extends StatefulWidget { _LogoAppState createState() => _LogoAppState(); } class _LogoAppState extends State<LogoApp> { @override Widget build(BuildContext context) { return Center( child: Container( margin: EdgeInsets.symmetric(vertical: 10), height: 300, width: 300, child: FlutterLogo(), ), ); } }
源代码: animate0
App source: animate0
下面的代码是加入动画效果的,logo 从无到全屏。当定义 AnimationController
时,必须要使用一个 vsync
对象。在 AnimationController
部分
会具体介绍 vsync
参数。
The following shows the same code modified to animate the
logo to grow from nothing to full size.
When defining an AnimationController
, you must pass in a
vsync
object. The vsync
parameter is described in the
AnimationController
section.
对比无动画示例,改动部分被突出显示:
The changes from the non-animated example are highlighted:
@@ -1,3 +1,4 @@
|
|
1
|
+
import 'package:flutter/animation.dart';
|
1
2
|
import 'package:flutter/material.dart';
|
2
3
|
void main() => runApp(LogoApp());
|
@@ -6,16 +7,39 @@
|
|
6
7
|
_LogoAppState createState() => _LogoAppState();
|
7
8
|
}
|
8
|
-
class _LogoAppState extends State<LogoApp> {
|
9
|
+
class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
|
10
|
+
Animation<double> animation;
|
11
|
+
AnimationController controller;
|
12
|
+
|
13
|
+
@override
|
14
|
+
void initState() {
|
15
|
+
super.initState();
|
16
|
+
controller =
|
17
|
+
AnimationController(duration: const Duration(seconds: 2), vsync: this);
|
18
|
+
animation = Tween<double>(begin: 0, end: 300).animate(controller)
|
19
|
+
..addListener(() {
|
20
|
+
setState(() {
|
21
|
+
// The state that has changed here is the animation object’s value.
|
22
|
+
});
|
23
|
+
});
|
24
|
+
controller.forward();
|
25
|
+
}
|
26
|
+
|
9
27
|
@override
|
10
28
|
Widget build(BuildContext context) {
|
11
29
|
return Center(
|
12
30
|
child: Container(
|
13
31
|
margin: EdgeInsets.symmetric(vertical: 10),
|
14
|
-
height:
|
15
|
-
width:
|
32
|
+
height: animation.value,
|
33
|
+
width: animation.value,
|
16
34
|
child: FlutterLogo(),
|
17
35
|
),
|
18
36
|
);
|
19
37
|
}
|
38
|
+
|
39
|
+
@override
|
40
|
+
void dispose() {
|
41
|
+
controller.dispose();
|
42
|
+
super.dispose();
|
43
|
+
}
|
20
44
|
}
|
源代码: animate1
App source: animate1
因为addListener()
函数调用 setState()
,所以每次 Animation
生成一个新的数字,当前帧就被标记为 dirty,使得 build()
再次被调用。在 build()
函数中,container 会改变大小,因为它的高和宽都读取 animation.value
,而不是固定编码值。当 State
对象销毁时要清除控制器以防止内存溢出。
The addListener()
function calls setState()
,
so every time the Animation
generates a new number,
the current frame is marked dirty, which forces
build()
to be called again. In build()
,
the container changes size because its height and
width now use animation.value
instead of a hardcoded value.
Dispose of the controller when the State
object is
discarded to prevent memory leaks.
经过这些小改动,你成功创建了第一个 Flutter 动画。
With these few changes, you’ve created your first animation in Flutter!
使用 AnimatedWidget 进行简化
Simplifying with AnimatedWidget
AnimatedWidget
基本类可以从动画代码中区分出核心 widget 代码。
AnimatedWidget
不需要保持 State
对象来 hold 动画。可以添加下面的 AnimatedLogo
类:
The AnimatedWidget
base class allows you to separate out
the core widget code from the animation code.
AnimatedWidget
doesn’t need to maintain a State
object to hold the animation. Add the following AnimatedLogo
class:
class AnimatedLogo extends AnimatedWidget { AnimatedLogo({Key key, Animation<double> animation}) : super(key: key, listenable: animation); Widget build(BuildContext context) { final animation = listenable as Animation<double>; return Center( child: Container( margin: EdgeInsets.symmetric(vertical: 10), height: animation.value, width: animation.value, child: FlutterLogo(), ), ); } }
在绘制时,AnimatedLogo
会读取 animation
当前值。
AnimatedLogo
uses the current value of the animation
when drawing itself.
LogoApp
持续控制 AnimationController
和 Tween
,并将 Animation
对象传给 AnimatedLogo
:
The LogoApp
still manages the AnimationController
and the Tween
,
and it passes the Animation
object to AnimatedLogo
:
@@ -10,2 +27,2 @@
|
|
10
27
|
class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
|
11
28
|
Animation<double> animation;
|
@@ -13,32 +30,18 @@
|
|
13
30
|
@override
|
14
31
|
void initState() {
|
15
32
|
super.initState();
|
16
33
|
controller =
|
17
34
|
AnimationController(duration: const Duration(seconds: 2), vsync: this);
|
18
|
-
animation = Tween<double>(begin: 0, end: 300).animate(controller)
|
35
|
+
animation = Tween<double>(begin: 0, end: 300).animate(controller);
|
19
|
-
..addListener(() {
|
20
|
-
setState(() {
|
21
|
-
// The state that has changed here is the animation object’s value.
|
22
|
-
});
|
23
|
-
});
|
24
36
|
controller.forward();
|
25
37
|
}
|
26
38
|
@override
|
27
|
-
Widget build(BuildContext context)
|
39
|
+
Widget build(BuildContext context) => AnimatedLogo(animation: animation);
|
28
|
-
return Center(
|
29
|
-
child: Container(
|
30
|
-
margin: EdgeInsets.symmetric(vertical: 10),
|
31
|
-
height: animation.value,
|
32
|
-
width: animation.value,
|
33
|
-
child: FlutterLogo(),
|
34
|
-
),
|
35
|
-
);
|
36
|
-
}
|
37
40
|
@override
|
38
41
|
void dispose() {
|
39
42
|
controller.dispose();
|
40
43
|
super.dispose();
|
41
44
|
}
|
源代码: animate2
App source: animate2
监控动画过程
Monitoring the progress of the animation
了解动画何时改变状态通常是很有用的,比如完成,前进或后退。可以通过 addStatusListener()
来获得提示。下面是之前示例修改后的代码,这样就可以监听状态的改变和更新。修改部分会突出显示:
It’s often helpful to know when an animation changes state,
such as finishing, moving forward, or reversing.
You can get notifications for this with addStatusListener()
.
The following code modifies the previous example so that
it listens for a state change and prints an update.
The highlighted line shows the change:
class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
Animation<double> animation;
AnimationController controller;
@override
void initState() {
super.initState();
controller =
AnimationController(duration: const Duration(seconds: 2), vsync: this);
animation = Tween<double>(begin: 0, end: 300).animate(controller)
..addStatusListener((state) => print('$state'));
controller.forward();
}
// ...
}
运行这段代码,得到如下结果:
Running this code produces this output:
AnimationStatus.forward
AnimationStatus.completed
下一步,在起始或结束时,使用 addStatusListener()
反转动画。制造“呼吸”效果:
Next, use addStatusListener()
to reverse the animation
at the beginning or the end. This creates a “breathing” effect:
@@ -32,7 +32,15 @@
|
|
32
32
|
void initState() {
|
33
33
|
super.initState();
|
34
34
|
controller =
|
35
35
|
AnimationController(duration: const Duration(seconds: 2), vsync: this);
|
36
|
-
animation = Tween<double>(begin: 0, end: 300).animate(controller)
|
36
|
+
animation = Tween<double>(begin: 0, end: 300).animate(controller)
|
37
|
+
..addStatusListener((status) {
|
38
|
+
if (status == AnimationStatus.completed) {
|
39
|
+
controller.reverse();
|
40
|
+
} else if (status == AnimationStatus.dismissed) {
|
41
|
+
controller.forward();
|
42
|
+
}
|
43
|
+
})
|
44
|
+
..addStatusListener((state) => print('$state'));
|
37
45
|
controller.forward();
|
38
46
|
}
|
源代码: animate3
App source: animate3
使用 AnimatedBuilder 进行重构
Refactoring with AnimatedBuilder
animate3 示例代码中有个问题,就是改变动画需要改变渲染 logo 的widget。较好的解决办法是,将任务区分到不同类里:
One problem with the code in the animate3 example, is that changing the animation required changing the widget that renders the logo. A better solution is to separate responsibilities into different classes:
-
渲染 logo
Render the logo
-
定义动画对象
Define the
Animation
object -
渲染过渡效果
Render the transition
您可以使用 AnimatedBuilder
类方法来完成分配。
AnimatedBuilder
作为渲染树的一个单独类。像 AnimatedWidget
,AnimatedBuilder
自动监听动画对象提示,并在必要时在 widget 树中标出,所以这时不需要调用 addListener()
。
You can accomplish this separation with the help of the
AnimatedBuilder
class. An AnimatedBuilder
is a
separate class in the render tree. Like AnimatedWidget
,
AnimatedBuilder
automatically listens to notifications
from the Animation
object, and marks the widget tree
dirty as necessary, so you don’t need to call addListener()
.
应用于 animate4 示例的 widget 树长这样:
The widget tree for the animate4 example looks like this:
从 widget 树底部开始,渲染 logo 的代码很容易:
Starting from the bottom of the widget tree, the code for rendering the logo is straightforward:
class LogoWidget extends StatelessWidget { // Leave out the height and width so it fills the animating parent Widget build(BuildContext context) => Container( margin: EdgeInsets.symmetric(vertical: 10), child: FlutterLogo(), ); }
图表中间的三部分都是用 GrowTransition
中的 build()
方法创建的,如下。 GrowTransition
widget 本身是无状态的,而且拥有定义过渡动画所需的一系列最终变量。
build() 函数创建并返回 AnimatedBuilder
,
AnimatedBuilder
使用(Anonymous
builder)方法并将 LogoWidget 对象作为参数。渲染过渡效果实际上是在(Anonymous
builder)方法中完成的,该方法创建一个适当大小 Container
强制 LogoWidget
配合。
The middle three blocks in the diagram are all created in the
build()
method in GrowTransition
, shown below.
The GrowTransition
widget itself is stateless and holds
the set of final variables necessary to define the transition animation.
The build() function creates and returns the AnimatedBuilder
,
which takes the (Anonymous
builder) method and the
LogoWidget
object as parameters. The work of rendering the
transition actually happens in the (Anonymous
builder)
method, which creates a Container
of the appropriate size
to force the LogoWidget
to shrink to fit.
在下面这段代码中,一个比较棘手的问题是 child 看起来被指定了两次。其实是 child 的外部参照被传递给了 AnimatedBuilder
,再传递给匿名闭包,然后用作 child 的对象。最终结果就是 AnimatedBuilder
被插入渲染树的两个 widgets 中间。
One tricky point in the code below is that the child looks
like it’s specified twice. What’s happening is that the
outer reference of child is passed to AnimatedBuilder
,
which passes it to the anonymous closure, which then uses
that object as its child. The net result is that the
AnimatedBuilder
is inserted in between the two widgets
in the render tree.
class GrowTransition extends StatelessWidget { GrowTransition({this.child, this.animation}); final Widget child; final Animation<double> animation; Widget build(BuildContext context) => Center( child: AnimatedBuilder( animation: animation, builder: (context, child) => Container( height: animation.value, width: animation.value, child: child, ), child: child), ); }
最后,初始动画的代码看起来很像 animate2 的示例。
initState()
方法创建了 AnimationController
和 Tween
,然后用 animate()
绑定它们。神奇的是 build()
方法,它返回一个以LogoWidget
为 child 的 GrowTransition
对象,和一个驱动过渡的动画对象。上面列出了三个主要因素。
Finally, the code to initialize the animation looks very
similar to the animate2 example. The initState()
method creates an AnimationController
and a Tween
,
then binds them with animate()
. The magic happens in
the build()
method, which returns a GrowTransition
object with a LogoWidget
as a child, and an animation object to
drive the transition. These are the three elements listed
in the bullet points above.
@@ -27,22 +36,25 @@
|
|
27
36
|
class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
|
28
37
|
Animation<double> animation;
|
29
38
|
AnimationController controller;
|
30
39
|
@override
|
31
40
|
void initState() {
|
32
41
|
super.initState();
|
33
42
|
controller =
|
34
43
|
AnimationController(duration: const Duration(seconds: 2), vsync: this);
|
35
44
|
animation = Tween<double>(begin: 0, end: 300).animate(controller);
|
36
45
|
controller.forward();
|
37
46
|
}
|
38
47
|
@override
|
39
|
-
Widget build(BuildContext context) =>
|
48
|
+
Widget build(BuildContext context) => GrowTransition(
|
49
|
+
child: LogoWidget(),
|
50
|
+
animation: animation,
|
51
|
+
);
|
40
52
|
@override
|
41
53
|
void dispose() {
|
42
54
|
controller.dispose();
|
43
55
|
super.dispose();
|
44
56
|
}
|
45
57
|
}
|
源代码: animate4
App source: animate4
同步动画
Simultaneous animations
在这部分内容中,您会根据 监控动画过程 (animate3) 创建示例,该示例将使用 AnimatedWidget
持续进行动画。可以用在需要对透明度进行从透明到不透明动画处理的情况。
In this section, you’ll build on the example from
monitoring the progress of the animation
(animate3), which used AnimatedWidget
to animate in and out continuously. Consider the case
where you want to animate in and out while the
opacity animates from transparent to opaque.
每个补间动画控制一个动画的不同方面,例如:
Each tween manages an aspect of the animation. For example:
controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); sizeAnimation = Tween<double>(begin: 0, end: 300).animate(controller); opacityAnimation = Tween<double>(begin: 0.1, end: 1).animate(controller);
通过 sizeAnimation.value
我们可以得到尺寸,通过 opacityAnimation.value
可以得到不透明度,但是 AnimatedWidget
的构造函数只读取单一的 Animation
对象。为了解决这个问题,该示例创建了一个 Tween
对象并计算确切值。
You can get the size with sizeAnimation.value
and the opacity
with opacityAnimation.value
, but the constructor for AnimatedWidget
only takes a single Animation
object. To solve this problem,
the example creates its own Tween
objects and explicitly calculates the
values.
修改 AnimatedLogo
来封装其 Tween
对象,以及其 build()
方法在母动画对象上调用
Tween.evaluate()
来计算所需的尺寸和不透明度值。下面的代码中将这些改动突出显示:
Change AnimatedLogo
to encapsulate its own Tween
objects,
and its build()
method calls Tween.evaluate()
on the parent’s animation object to calculate
the required size and opacity values.
The following code shows the changes with highlights:
class AnimatedLogo extends AnimatedWidget { // Make the Tweens static because they don't change. static final _opacityTween = Tween<double>(begin: 0.1, end: 1); static final _sizeTween = Tween<double>(begin: 0, end: 300); AnimatedLogo({Key key, Animation<double> animation}) : super(key: key, listenable: animation); Widget build(BuildContext context) { final animation = listenable as Animation<double>; return Center( child: Opacity( opacity: _opacityTween.evaluate(animation), child: Container( margin: EdgeInsets.symmetric(vertical: 10), height: _sizeTween.evaluate(animation), width: _sizeTween.evaluate(animation), child: FlutterLogo(), ), ), ); } } class LogoApp extends StatefulWidget { _LogoAppState createState() => _LogoAppState(); } class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin { Animation<double> animation; AnimationController controller; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(seconds: 2), vsync: this); animation = CurvedAnimation(parent: controller, curve: Curves.easeIn) ..addStatusListener((status) { if (status == AnimationStatus.completed) { controller.reverse(); } else if (status == AnimationStatus.dismissed) { controller.forward(); } }); controller.forward(); } @override Widget build(BuildContext context) => AnimatedLogo(animation: animation); @override void dispose() { controller.dispose(); super.dispose(); } }
源代码: animate5
App source: animate5
下面的步骤
Next steps
本指南是在 Flutter 中应用 Tweens
创建动画的基础介绍,还有很多其他类可供探索。比如指定 Tween
类,Material Design 特有的动画,
ReverseAnimation
,共享元素过渡(也称为 Hero 动画),物理模拟和 fling()
方法。关于最新的文档和示例可参见 动画效果介绍。
This tutorial gives you a foundation for creating animations in
Flutter using Tweens
, but there are many other classes to explore.
You might investigate the specialized Tween
classes,
animations specific to Material Design,
ReverseAnimation
,
shared element transitions (also known as Hero animations),
physics simulations and fling()
methods.
See the animations landing page
for the latest available documents and examples.