diff --git a/animations/overview.md b/animations/overview.md index cde78c9..df3ad6f 100644 --- a/animations/overview.md +++ b/animations/overview.md @@ -1,304 +1,216 @@ --- layout: page -title: "Animations: Technical Overview" +title: "动画:技术概述" permalink: /animations/overview.html --- * TOC Placeholder {:toc} -The animation system in Flutter is based on typed -[`Animation`](https://docs.flutter.io/flutter/animation/Animation-class.html) -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. +Flutter中的动画系统是基于类型化的动画[`Animation`](https://docs.flutter.io/flutter/animation/Animation-class.html)对象。 +组件可以通过读取自身的当前值和监听它们的状态变化，将这些动画直接合并到它们的build函数中， +或者以这些动画作为复杂动画的一个基础的部分传递给其他组件使用 ## Animation - -The primary building block of the animation system is the -[`Animation`](https://docs.flutter.io/flutter/animation/Animation-class.html) -class. An animation represents a value of a specific type that can change -over the lifetime of the animation. Most widgets that perform an animation -receive an `Animation` object as a parameter, from which they read the current -value of the animation and to which they listen for changes to that value. +动画系统的主要模块是[`Animation`](https://docs.flutter.io/flutter/animation/Animation-class.html)类。 +一个Animation代表了特定值在动画生命周期内的可以不断的改变。 +动画表示可以在动画的生命周期内更改的特定类型的值。 +大多数执行动画的组件都会接收一个Animation对象作为参数，从中可以读取动画的当前值以及监听该值的改变。 ### `addListener` -Whenever the animation's value changes, the animation notifies all the -listeners added with -[`addListener`](https://docs.flutter.io/flutter/animation/Animation/addListener.html). -Typically, a [`State`](https://docs.flutter.io/flutter/widgets/State-class.html) -object that listens to an animation will call -[`setState`](https://docs.flutter.io/flutter/widgets/State/setState.html) on -itself in its listener callback to notify the widget system that it needs to -rebuild with the new value of the animation. - -This pattern is so common that there are two widgets that help widgets rebuild -when animations change value: +每当动画的值发生变化时，动画都会通知所有添加了[`addListener`](https://docs.flutter.io/flutter/animation/Animation/addListener.html)的侦听器。 +通常来说，监听动画的[`State`](https://docs.flutter.io/flutter/widgets/State-class.html)对象 +将在其侦听器的回调中调用setState方法，以通知组件使用新值来重新构建. + +这种模式很常见，当动画的值改变时下面这两个组件都可以用来帮助组件重新构建： [`AnimatedWidget`](https://docs.flutter.io/flutter/widgets/AnimatedWidget-class.html) -and +和 [`AnimatedBuilder`](https://docs.flutter.io/flutter/widgets/AnimatedBuilder-class.html). -The first, `AnimatedWidget`, is most useful for stateless animated widgets. -To use `AnimatedWidget`, simply subclass it and implement the -[`build`](https://docs.flutter.io/flutter/widgets/AnimatedWidget/build.html) -function. The second, `AnimatedBuilder`, is useful for more complex widgets -that wish to include an animation as part of a larger build function. To use -`AnimatedBuilder`, simply construct the widget and pass it a `builder` function. +第一个是AnimatedWidget，对于无状态动画组件最有用。 +要使用AnimatedWidget，只需实现其子类并实现构建函数。 +第二个是AnimatedBuilder，对于一些复杂的组件希望将动画作为它的大构造方法的一部分来说，AnimatedBuilder将会非常有用。 +要使用AnimatedBuilder，你只需要简单的构造一个组件，然后通过`builder`方法来使用. ### `addStatusListener` -Animations also provide an -[`AnimationStatus`](https://docs.flutter.io/flutter/animation/AnimationStatus-class.html), -which indicates how the animation will evolve over time. Whenever the animation's -status changes, the animation notifies all the listeners added with -[`addStatusListener`](https://docs.flutter.io/flutter/animation/Animation/addStatusListener.html). -Typically, animations start out in the `dismissed` status, which means they're -at the beginning of their range. For example, animations that progress from 0.0 -to 1.0 will be `dismissed` when their value is 0.0. An animation might then run -`forward` (e.g., from 0.0 to 1.0) or perhaps in `reverse` (e.g., from 1.0 to -0.0). Eventually, if the animation reaches the end of its range (e.g., 1.0), the -animation reaches the `completed` status. +动画还提供了一个[`AnimationStatus`](https://docs.flutter.io/flutter/animation/AnimationStatus-class.html),它展示动画将如何随时间演变。 +每当动画的状态发生变化时，动画都会通知addStatusListener添加的所有侦听器。 +通常情况下，如果动画脱离`dismissed` 状态，这意味着动画进入指定的范围内开始运行了。 +例如，当值为0.0时，从0.0到1.0的动画将处于`dismissed`状态。 +一个动画可以正向执行（例如，从0.0到1.0）也可以反向执行（例如，从1.0到0.0）。 +最终，如果动画到达其范围的末尾（例如，1.0），则动画进入`completed` 状态. ## AnimationController -To create an animation, first create an +想要创建一个动画，首先需要创建一个 [`AnimationController`](https://docs.flutter.io/flutter/animation/AnimationController-class.html). -As well as being an animation itself, an `AnimationController` lets you control -the animation. For example, you can tell the controller to play the animation +除了动画自身，`AnimationController`也可以让你控制 +动画。 例如，您可以告诉控制器控制动画正向播放 [`forward`](https://docs.flutter.io/flutter/animation/AnimationController/forward.html) -or [`stop`](https://docs.flutter.io/flutter/animation/AnimationController/stop.html) -the animation. You can also [`fling`](https://docs.flutter.io/flutter/animation/AnimationController/fling.html) -animations, which uses a physical simulation, such as a spring, to drive the -animation. - -Once you've created an animation controller, you can start building other -animations based on it. For example, you can create a +或者停止 [`stop`](https://docs.flutter.io/flutter/animation/AnimationController/stop.html) +动画. 你也可以使用 [`fling`](https://docs.flutter.io/flutter/animation/AnimationController/fling.html) +方法，他可以模拟物理环境下的速度变化，比如弹簧一样来控制动画的播放。 +一旦你创建了动画控制器，你就可以基于此开始构建其他的动画了.比如 [`ReverseAnimation`](https://docs.flutter.io/flutter/animation/ReverseAnimation-class.html) -that mirrors the original animation but runs in the opposite direction (e.g., -from 1.0 to 0.0). Similarly, you can create a -[`CurvedAnimation`](https://docs.flutter.io/flutter/animation/CurvedAnimation-class.html) -whose value is adjusted by a [curve](https://docs.flutter.io/flutter/animation/Curves-class.html). +它控制了一个原始动画，以相反的方向运行（例如，从1.0到0.0). +同样，你可以创建一个[`CurvedAnimation`](https://docs.flutter.io/flutter/animation/CurvedAnimation-class.html) +，它使用曲线[curve](https://docs.flutter.io/flutter/animation/Curves-class.html)的方式来控制value的变化. ## Tweens -To animate beyond the 0.0 to 1.0 interval, you can use a -[`Tween`](https://docs.flutter.io/flutter/animation/Tween-class.html), which -interpolates between its +如果你的动画取值间隔超过了0.0到1.0，你可以使用 +[`Tween`](https://docs.flutter.io/flutter/animation/Tween-class.html)来控制动画从 [`begin`](https://docs.flutter.io/flutter/animation/Tween/begin.html) -and [`end`](https://docs.flutter.io/flutter/animation/Tween/end.html) -values. Many types have specific `Tween` subclasses that provide type-specific -interpolation. For example, +到[`end`](https://docs.flutter.io/flutter/animation/Tween/end.html) +进行插值运算。许多类型都有特定的`Tween`子类，它们提供特定类型的 +插值。 例如， [`ColorTween`](https://docs.flutter.io/flutter/animation/ColorTween-class.html) -interpolates between colors and +可以在不同颜色间进行插值运算 [`RectTween`](https://docs.flutter.io/flutter/animation/RectTween-class.html) -interpolates between rects. You can define your own interpolations by creating -your own subclass of `Tween` and overriding its -[`lerp`](https://docs.flutter.io/flutter/animation/Tween/lerp.html) -function. - -By itself, a tween just defines how to interpolate between two values. To get -a concrete value for the current frame of an animation, you also need an -animation to determine the current state. There are two ways to combine a tween -with an animation to get a concrete value: - -1. You can [`evaluate`](https://docs.flutter.io/flutter/animation/Tween/evaluate.html) - the tween at the current value of an animation. This approach is most useful - for widgets that are already listening to the animation and hence - rebuilding whenever the animation changes value. - -2. You can [`animate`](https://docs.flutter.io/flutter/animation/Animatable/animate.html) - the tween based on the animation. Rather than returning a single value, the - animate function returns a new `Animation` that incorporates the tween. This - approach is most useful when you want to give the newly created animation to - another widget, which can then read the current value that incorporates - the tween as well as listen for changes to the value. +可以在两个矩形间进行插值运算. 你甚至可以自己定义一个插值器通过构建一个`Tween`的子类，并且重写它的方法 +[`lerp`](https://docs.flutter.io/flutter/animation/Tween/lerp.html). + +补间本身只定义了如何在两个值之间进行插值。要得到动画的当前帧的具体值，您还需要一个动画确定当前状态。 +有两种方法可以将补间和动画组合在一起来获取动画当前的状态值: + +1. 你可以使用[`evaluate`](https://docs.flutter.io/flutter/animation/Tween/evaluate.html) + 来获取补间动画的当前值。这个方式对已经在监听动画的组件来说非常有用，每当动画的值修改后组件都会执行重新构建. + +2. 你可以使用 [`animate`](https://docs.flutter.io/flutter/animation/Animatable/animate.html) + 方法在基于一个动画对象，创建一个补间动画. 该方法将返回一个 + 使用了补间动画的插值器的`Animation`动画对象. + 当你想要为其他组件创建一个新的动画，这是非常有效的实践能够让你读取插值器的当前值就像在监听 +   补间动画值的改变一样。 # Architecture -Animations are actually built from a number of core building blocks. +实际上一个动画是由很多模块构建而成的 ## Scheduler -The +这个调度绑定器 [`SchedulerBinding`](https://docs.flutter.io/flutter/scheduler/SchedulerBinding-class.html) -is a singleton class that exposes the Flutter scheduling primitives. - -For this discussion, the key primitive is the frame callbacks. Each -time a frame needs to be shown on the screen, Flutter's engine -triggers a "begin frame" callback which the scheduler multiplexes to -all the listeners registered using -[`scheduleFrameCallback()`](https://docs.flutter.io/flutter/scheduler/SchedulerBinding/scheduleFrameCallback.html). -All these callbacks are given the official time stamp of the frame, in -the form of a `Duration` from some arbitrary epoch. Since all the -callbacks have the same time, any animations triggered from these -callbacks will appear to be exactly synchronised even if they take a -few milliseconds to be executed. +是一个单例模式，它暴露了一个flutter调度器的原函数. + +在本次讨论中，关键原函数是帧回调函数。当每一帧在屏幕上渲染时，flutter引擎都会触发"begin frame"回调 +函数，调度器使用方法[`scheduleFrameCallback()`](https://docs.flutter.io/flutter/scheduler/SchedulerBinding/scheduleFrameCallback.html)以多路复用的方式回调给所有注册了监听器的单位. ## Tickers -The [`Ticker`](https://docs.flutter.io/flutter/scheduler/Ticker-class.html) -class hooks into the scheduler's -[`scheduleFrameCallback()`](https://docs.flutter.io/flutter/scheduler/SchedulerBinding/scheduleFrameCallback.html) -mechanism to invoke a callback every tick. - -A `Ticker` can be started and stopped. When started, it returns a -`Future` that will resolve when it is stopped. + 类挂载了调度器的 +[`scheduleFrameCallback()`](https://docs.flutter.io/flutter/scheduler/SchedulerBinding/scheduleFrameCallback.html)方法,每当帧变化时都会调用该回调. -Each tick, the `Ticker` provides the callback with the duration since -the first tick after it was started. +`Ticker`可以被启动和停止，调用开始方法后会返回一个`Future`任务，该任务将在`Ticker`被停止后才会完成. -Because tickers always give their elapsed time relative to the first -tick after they were started, tickers are all synchronised. If you -start three ticks at different times between two frames, they will all -nonetheless be synchronised with the same starting time, and will -subsequently tick in lockstep. +因为`Tickers`回调时提供的经过时间总是相对与第一个Ticker的启动时间，所以`Tickers`永远都是同步执行的. +假设如果你再两帧之间的不同时间内分别启动了3个Ticker，尽管如此他们仍然会以相同的启动时间同步执行，随后按照固定的步骤滴答. ## Simulations -The [`Simulation`](https://docs.flutter.io/flutter/physics/Simulation-class.html) -abstract class maps a relative time value (an elapsed time) to a -double value, and has a notion of completion. +是一个抽象类，它将一个相对的时间值（经过的时间）映射成一个double值，并且`Simulation`有一个完成的状态. -In principle simulations are stateless but in practice some simulations -(for example, -[`BouncingScrollSimulation`](https://docs.flutter.io/flutter/widgets/BouncingScrollSimulation-class.html) and +原则上，`Simulation`是无状态的，但在实践中是一些模拟(比如说, +[`BouncingScrollSimulation`](https://docs.flutter.io/flutter/widgets/BouncingScrollSimulation-class.html) 和 [`ClampingScrollSimulation`](https://docs.flutter.io/flutter/widgets/ClampingScrollSimulation-class.html)) -change state irreversibly when queried. +当需要时，他们会不可逆的改变状态值 -There are [various concrete implementations](https://docs.flutter.io/flutter/physics/physics-library.html) -of the `Simulation` class for different effects. +这里有一些关于`Simulation` 的[实践](https://docs.flutter.io/flutter/physics/physics-library.html)，实现了一些不同的物理特效. ## Animatables -The [`Animatable`](https://docs.flutter.io/flutter/animation/Animatable-class.html) -abstract class maps a double to a value of a particular type. +是一个抽象类，将一个特定的值映射成一个double值 -`Animatable` classes are stateless and immutable. +`Animatable`类是无状态和不可变的。 ### Tweens -The [`Tween`](https://docs.flutter.io/flutter/animation/Tween-class.html) -abstract class maps a double value nominally in the range 0.0-1.0 to a -typed value (e.g. a `Color`, or another double). It is an -`Animatable`. +抽象类将[0.0-1.0]的范围值映射成一个名义上是double类型的特定值（比如`Color`值，或者其他double类型值） +它是一个`Animatable`. -It has a notion of an output type (`T`), a `begin` value and an `end` -value of that type, and a way to interpolate (`lerp`) between the -begin and end values for a given input value (the double nominally in -the range 0.0-1.0). +它有一个输出类型（`T`），一个`begin`值和一个`end`的概念， +以及在输入的开始和结束值之间插入（`lerp`）的方法（double名义上是在[0.0-1.0】范围内）. -`Tween` classes are stateless and immutable. +`Tween` 是一个无状态不可变的类. ### Composing animatables -Passing an `Animatable` (the parent) to an `Animatable`'s -`chain()` method creates a new `Animatable` subclass that applies the -parent's mapping then the child's mapping. +将`Animatable `（父类）传递给`Animatable` +`chain（）`方法来创建一个新的`Animatable`子类，它采用了 +父类的映射然后是子类的映射. ## Curves -The [`Curve`](https://docs.flutter.io/flutter/animation/Curve-class.html) -abstract class maps doubles nominally in the range 0.0-1.0 to doubles -nominally in the range 0.0-1.0. +抽象类将[0.0-1.0]的范围内的double值映射成一个[0.0-1.0]范围内的double值. -`Curve` classes are stateless and immutable. +`Curve` 是一个无状态不可变的类. ## Animations -The [`Animation`](https://docs.flutter.io/flutter/animation/Animation-class.html) -abstract class provides a value of a given type, a concept of -animation direction and animation status, and a listener interface to -register callbacks that get invoked when the value or status change. +抽象类提供了一个给定类型的值，一个动画方向和动画状态的概念， +以及一个监听器接口用来注册值或状态变化时调用的回调. -Some subclasses of `Animation` have values that never change +一些 `Animation`的子类持续有的值永远不会改变 ([`kAlwaysCompleteAnimation`](https://docs.flutter.io/flutter/animation/kAlwaysCompleteAnimation-constant.html), [`kAlwaysDismissedAnimation`](https://docs.flutter.io/flutter/animation/kAlwaysDismissedAnimation-constant.html), [`AlwaysStoppedAnimation`](https://docs.flutter.io/flutter/animation/AlwaysStoppedAnimation-class.html)); -registering callbacks on these has no effect as the callbacks are -never called. +在这些动画上注册回调将永远不会被触发. -The `Animation` variant is special because it can be used to -represent a double nominally in the range 0.0-1.0, which is the input -expected by `Curve` and `Tween` classes, as well as some further -subclasses of `Animation`. +`Animation`是一个特殊的变体，因为他被用在输入值希望是在[0.0-1.0]范围内的double值的类上， +比如 `Curve` 和 `Tween` 类，以及其他一些`Animation`的子类. -Some `Animation` subclasses are stateless, merely forwarding listeners -to their parents. Some are very stateful. +一些`Animation`子类是无状态的，只是转发监听器给他们的父类. 有些是有状态的. ### Composable animations -Most `Animation` subclasses take an explicit "parent" -`Animation`. They are driven by that parent. +大部分`Animation` 子类都有明确的"父类"`Animation`. +他们被父类所驱动. -The `CurvedAnimation` subclass takes an `Animation` class (the -parent) and a couple of `Curve` classes (the forward and reverse -curves) as input, and uses the value of the parent as input to the -curves to determine its output. `CurvedAnimation` is immutable and -stateless. +`CurvedAnimation`子类采用`Animation `类（父类）和几个`Curve`类（正向和反向曲线） +作为输入，并使用父值作为输入曲线确定其输出。 `CurvedAnimation`是不可变的无状态的. -The `ReverseAnimation` subclass takes an `Animation` class as -its parent and reverses all the values of the animation. It assumes -the parent is using a value nominally in the range 0.0-1.0 and returns -a value in the range 1.0-0.0. The status and direction of the parent -animation are also reversed. `ReverseAnimation` is immutable and -stateless. +`ReverseAnimation`子类将`Animation `类作为 +它的父级并反转动画的所有值。 它假定父类使用名义上在0.0-1.0范围内的值并返回 +值范围为1.0-0.0。 父类的状态和动画方向也是逆转的. + `ReverseAnimation`是不可变的无状态的. -The `ProxyAnimation` subclass takes an `Animation` class as -its parent and merely forwards the current state of that parent. -However, the parent is mutable. +`ProxyAnimation`子类将`Animation `类作为它的父类 +只是转发父类的当前状态。但是，父类是可变的 -The `TrainHoppingAnimation` subclass takes two parents, and switches -between them when their values cross. +`TrainHoppingAnimation`子类需要两个父类，当他们的值交叉时在两者之间进行切换. ### Animation Controllers -The -[`AnimationController`](https://docs.flutter.io/flutter/animation/AnimationController-class.html) -is stateful `Animation` that uses a `Ticker` to give itself -life. It can be started and stopped. Each tick, it takes the time -elapsed since it was started and passes it to a `Simulation` to obtain -a value. That is then the value it reports. If the `Simulation` -reports that at that time it has ended, then the controller stops -itself. +该[`AnimationController`](https://docs.flutter.io/flutter/animation/AnimationController-class.html) +是有状态的`Animation `，它使用`Ticker`来给提供自己的生命周期。 +它可以启动和停止. 每个滴答都需要花费时间，自从它启动后通过`Simulation`来获取值. +然后他将值报告出去。如果是`Simulation`报告值的时候`Ticker`停止了，那么控制器也会把它自己给停止. -The animation controller can be given a lower and upper bound to -animate between, and a duration. +动画控制器可以给出两者动画之间的下限和上限和持续时间. -In the simple case (using `forward()`, `reverse()`, `play()`, or -`resume()`), the animation controller simply does a linear -interpolation from the lower bound to the upper bound (or vice versa, -for the reverse direction) over the given duration. +在简单的情况下(使用`forward()`，`reverse()`，`play()`，或 +`resume()`)，动画控制器只是根据上限和下限在给定的时间内做一个线性的插值（反向动画亦然）. -When using `repeat()`, the animation controller uses a linear -interpolation between the given bounds over the given duration, but -does not stop. +当使用`repeat())`时，动画控制器在给定时间内给定边界之间的使用线性插值， +并且不会停止. -When using `animateTo()`, the animation controller does a linear -interpolation over the given duration from the current value to the -given target. If no duration is given to the method, the default -duration of the controller and the range described by the controller's -lower bound and upper bound is used to determine the velocity of the -animation. +使用`animateTo()`时，动画控制器会在给定时间内从当前值到目标值进行线性化的插值. +如果方法没有给出持续时间，则为默认使用控制器的持续时间和控制器描述的范围 +这个时候，上限下限的范围将决定动画的速度. -When using `fling()`, a `Force` is used to create a specific -simulation which is then used to drive the controller. +当使用`fling()`时，`Force`用于创建特定的模拟器，然后用于驱动控制器. -When using `animateWith()`, the given simulation is used to drive the -controller. +当使用`animateWith()`时，给定的模拟被用于驱动控制器. -These methods all return the future that the `Ticker` provides and -which will resolve when the controller next stops or changes -simulation. +这些方法都返回了“Ticker”提供的Future，这些Future将在控制器下次停止或者改变模拟器时完成结束. ### Attaching animatables to animations -Passing an `Animation` (the new parent) to an `Animatable`'s -`animate()` method creates a new `Animation` subclass that acts like -the `Animatable` but is driven from the given parent. +将`Animation `（父类）传递给`Animatable`的`animate（）`方法创建一个新的`Animation`子类， +这种写法作用类似于`Animatable`，但是来是由给定父类来驱动动画. diff --git a/animations/staggered-animations/index.md b/animations/staggered-animations/index.md index 720dc8c..2b459b3 100644 --- a/animations/staggered-animations/index.md +++ b/animations/staggered-animations/index.md @@ -24,47 +24,36 @@ permalink: /animations/staggered-animations/ [Flutter动画教程](/tutorials/animation/) -Staggered animations are a straightforward concept: visual changes -happen as a series of operations, rather than all at once. -The animation might be purely sequential, with one change occuring after -the next, or it might partially or completely overlap. It might also -have gaps, where no changes occur. - -所谓交错动画，直接来说就是：视觉变化发生在一系列操作中，而不是一次性发生。 动画可能是纯粹顺序的，在下一个动画之后会发生一次更改，或者可能部分或完全重叠。 它也可能有间隙，没有发生变化。 - -This guide shows how to build a staggered animation in Flutter. +交错动画的概念：由一系列操作引发的视觉变化，而不是一次性的操作。动画可能是单纯的顺序执行，比如一个动画跟在另一个动画后面执行，也可能是一部分或者所有动画都重叠起来一块执行.动画之间也可能有间隔，在这个时候什么都不会发生。 +下面展示了如何在flutter上构建一个交错动画 * TOC Placeholder {:toc} -The following video demonstrates the animation performed by -basic_staggered_animation: +接下来的视频演示了一个基本的交错动画：
-In the video, you see the following animation of a single widget, -which begins as a bordered blue square with slightly rounded corners. -The square runs through changes in the following order: +在视频中你可以看到，随后的动画变换都在同一个组件中执行，一开始是一个蓝色椭圆边框的矩形。 +该矩形按照以下顺序开始变换： -1. Fades in -1. Widens -1. Becomes taller while moving upwards -1. Transforms into a bordered circle -1. Changes color to orange +1. 淡入 +1. 变宽 +1. 向上移动时变高 +1. 变成带边框的圆形 +1. 变成橙色 -After running forward, the animation runs in reverse. +交错动画正向执行后，我们又反向执行了一遍 -## Basic structure of a staggered animation +## 交错动画的基本构成
- What's the point? + 有哪些重点? -* All of the animations are driven by the same +* 所有的动画都使用同一个 [AnimationController](https://docs.flutter.io/flutter/animation/AnimationController-class.html). -* Regardless of how long the animation lasts in real time, - the controller's values must be between 0.0 and 1.0, inclusive. -* Each animation has an +* 无论动画最后的实际运行时间有多长，controller的输入值都控制在0.0到1.0之间. +* 每个动画的 [Interval](https://docs.flutter.io/flutter/animation/Interval-class.html) - between 0.0 and 1.0, inclusive. -* For each property that animates in an interval, create a + 输入值都在0.0到1.0之间. +* 想要为每个属性定义动画过程中的值，使用 [Tween.](https://docs.flutter.io/flutter/animation/Tween-class.html) - The Tween specifies the start and end values for that property. -* The Tween produces an + Tween将决定该属性在动画过程中的起始值和结束值 +* Tween 可以生成一个 [Animation](https://docs.flutter.io/flutter/animation/Animation-class.html) - object that is managed by the controller. + 对象，通过传入当前负责的controller来生成.
{% comment %} @@ -119,39 +106,37 @@ inner container around and an Opacity widget that's used to fade everything in and out. {% endcomment %} -The following diagram shows the Intervals used in the +下图显示了 [basic_staggered_animation](https://github.com/flutter/website/tree/master/_includes/code/animation/basic_staggered_animation) -example. You might notice the following characteristics: - -* The opacity changes during the first 10% of the timeline. -* A tiny gap occurs between the change in opacity, and the change in width. -* Nothing animates during the last 25% of the timeline. -* Increasing the padding makes the widget appear to rise upward. -* Increasing the border radius to 0.5, transforms the square with rounded - corners into a circle. +示例中使用的Intervals。 +您可能会注意到以下特征：: + +* 不透明度在时间轴的前10％期间发生变化. +* 在不透明度变化和宽度变化的过程中，有一点小小的间隙. +* 在最后25％的时间线中没有任何动画. +* 通过增加padding使组件向上出现上升. +* 将borderRadius变化成0.5，使得矩形变换成了圆形. * The padding and border radius changes occur during the same exact interval, but they don't have to. +* padding和borderRadius变化时interval是相同的，但是他们并不是必要的. Diagram showing the interval specified for each motion. -To set up the animation: +设置动画: -* Create an AnimationController that manages all of the Animations. -* Create a Tween for each property being animated. - * The Tween defines a range of values. - * The Tween's `animate` method requires the `parent` controller, and - produces an Animation for that property. -* Specify the interval on the Animation's `curve` property. +* 创建一个AnimationController管理所有的动画. +* 为每个属性创建一个Tween. + * 为Tween定义一个范围值. + * Tween的`animate` 方法要求传入 `parent` controller, 然后才能生成一个属性动画. +* 为动画的 `curve` 属性指定一个interval. -When the controlling animation's value changes, the new animation's -value changes, triggering the UI to update. +当控制过程中动画的值发生改变，或者新创建动画的值发生改变的时候, 就会触发UI的更新. -The following code creates a tween for the `width` property. -It builds a +下面的代码为“宽度”属性创建了一个tween, 它构建一个 [CurvedAnimation](https://docs.flutter.io/flutter/animation/CurvedAnimation-class.html), -specifying an eased curve. -See [Curves](https://docs.flutter.io/flutter/animation/Curves-class.html) -for other available pre-defined animation curves. +指定了一条宽松的动画曲线. +查看 [Curves](https://docs.flutter.io/flutter/animation/Curves-class.html) +可以找到一些系统已经预设好的动画曲线. {% prettify dart %} @@ -169,10 +154,7 @@ width = new Tween( ), {% endprettify %} -The `begin` and `end` values don't have to be doubles. -The following code builds the tween for the `borderRadius` property -(which controls the roundness of the square's corners), using -`BorderRadius.circular()`. +`begin` 和 `end` 值没有必要翻倍.接下来的代码将为`borderRadius`属性构建一个tween(将矩形的角变成圆角),这里使用`BorderRadius.circular()`. {% prettify dart %} borderRadius = new BorderRadiusTween( @@ -189,33 +171,25 @@ borderRadius = new BorderRadiusTween( ), {% endprettify %} -### Complete staggered animation +### 完整的交错动画 -Like all interactive widgets, the complete animation consists -of a widget pair: a stateless and a stateful widget. +就像所有的交互组件一样，一个完整的动画是由无状态和有状态组件构成. -The stateless widget specifies the Tweens, -defines the Animation objects, and provides a `build()` function -responsible for building the animating portion of the widget tree. +无状态组件指定了Tweens，定义了动画对象，并且提供了`build()` 方法来构建组件的动画部分. -The stateful widget creates the controller, plays the animation, -and builds the non-animating portion of the widget tree. -The animation begins when a tap is detected anywhere in the screen. +有状态组件创建了一个controller控制器，用来控制播放动画，并且负责构建了组件的无动画部分。 +当屏幕的任何地方被点击后，动画就会开始执行。 [Full code for basic_staggered_animation's main.dart](https://raw.githubusercontent.com/flutter/website/master/_includes/code/animation/basic_staggered_animation/main.dart) -### Stateless widget: StaggerAnimation +### 无状态组件: StaggerAnimation -In the stateless widget, StaggerAnimation, the `build()` function instantiates an -[AnimatedBuilder](https://docs.flutter.io/flutter/widgets/AnimatedBuilder-class.html)—a -general purpose widget for building animations. The AnimatedBuilder -builds a widget and configures it using the Tweens' current values. -The example creates a function named `_buildAnimation()` (which performs -the actual UI updates), and assigns it to its `builder` property. -AnimatedBuilder listens to notifications from the animation controller, -marking the widget tree dirty as values change. -For each tick of the animation, the values are updated, -resulting in a call to `_buildAnimation()`. +AnimatedBuilder--一个用于构建动画的通用小部件。 +[AnimatedBuilder](https://docs.flutter.io/flutter/widgets/AnimatedBuilder-class.html)— +AnimatedBuilder构建一个小部件并使用Tweens的当前值配置它。 +该示例创建一个名为_buildAnimation（）的函数（执行实际的UI更新），并将其分配给其构建器属性。 +AnimatedBuilder监听来自动画控制器的通知，在值发生变化时将组件树标记为dirty。 +对于动画的每个刻度，值都会更新，从而调用_buildAnimation（）。 {% prettify dart %} @@ -289,11 +263,10 @@ resulting in a call to `_buildAnimation()`. ### Stateful widget: StaggerDemo -The stateful widget, StaggerDemo, creates the AnimationController -(the one who rules them all), specifying a 2000 ms duration. It plays -the animation, and builds the non-animating portion of the widget tree. -The animation begins when a tap is detected in the screen. -The animation runs forward, then backward. +有状态小部件StaggerDemo创建了AnimationController（唯一的控制器用来控制组件内的动画），指定了动画续时间为2000毫秒。 +它不但负责播放动画，并构建了组件的非动画部分。 +在屏幕中检测到点击时动画开始。 +动画先正向播放，然后再反向播放。 {% prettify dart %} @@ -361,7 +334,7 @@ class _StaggerDemoState extends State with TickerProviderStateMixin ## Resources -The following resources might help when writing animations: +当你编写动画时以下资源可能对你有所帮助: [Animations landing page](/animations/) : Lists the available documentation for Flutter animations.