From acc8321c273980a18c90a76e38313bdbafa54ba2 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Sat, 18 Jun 2016 23:53:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=88=9D=E8=AF=91=E5=AE=8C?= =?UTF-8?q?=E6=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/ts/latest/guide/_data.json | 4 +- public/docs/ts/latest/guide/animations.jade | 216 ++++++++++++++++++++ 2 files changed, 218 insertions(+), 2 deletions(-) diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index 02309f1de1..ede782fb58 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/public/docs/ts/latest/guide/_data.json @@ -64,8 +64,8 @@ }, "animations": { - "title": "Animations", - "intro": "A guide to Angular's animation system." + "title": "动画", + "intro": "Angular动画系统指南。" }, "attribute-directives": { diff --git a/public/docs/ts/latest/guide/animations.jade b/public/docs/ts/latest/guide/animations.jade index 4bf6fe2be6..42aaf1597b 100644 --- a/public/docs/ts/latest/guide/animations.jade +++ b/public/docs/ts/latest/guide/animations.jade @@ -6,52 +6,102 @@ include ../_util-fns that call attention where it's needed. Well-designed animations can make a UI not only more fun but also easier to use. + 动画是现代Web应用设计中一个很重要的方面。我们希望用户界面能在不同的状态之间更平滑的转换。只要需要，还可以用适当的动画来吸引注意力。 + 设计良好的动画不但可以让UI更有趣，而且还会更易于使用。 + Angular's animation system gives us what we need to make the kinds of animations we want. We can build animations that run with the same kind of native performance that we're used to with pure CSS animations. But we can also have our animation logic tightly integrated with the rest of our application code, where they can be easily triggered and controlled. + Angular的动画系统赋予我们制作各种动画效果的能力，构建出与原生CSS动画性能相同的动画。 + 但是我们又获得了让动画逻辑与其它应用代码紧紧集成在一起的能力，这些动画可以更容易的被触发和控制。 + .alert.is-helpful :marked Angular animations are built on top of the standard [Web Animations API](https://w3c.github.io/web-animations/) and they run natively on [browsers that support it](http://caniuse.com/#feat=web-animation). + Angular动画是基于标准的[Web动画API(Web Animations API)](https://w3c.github.io/web-animations/)构建的，它们在[支持此API的浏览器中](http://caniuse.com/#feat=web-animation)用原生方式工作。 + For other browsers, a polyfill is required. Grab [`web-animations.min.js` from here](https://github.com/web-animations/web-animations-js) and add it to your page. + 对于其它浏览器，就需要一个填充库(polyfill)了。[从这里获取`web-animations.min.js`](https://github.com/web-animations/web-animations-js)，并把它加入你的页面中。 + A more lightweight polyfill maintained by the Angular team is coming soon. + Angular开发组还在开发另一个更加轻量级的填充库，预计不久就会完工。 + :marked # Table of Contents + # 目录 + * [Quickstart Example: Transitioning Between Two States](#example-transitioning-between-states) + + * [快速起步范例：在两个状态之间过渡(Transition)](#example-transitioning-between-states) + * [States and Transitions](#states-and-transitions) + + * [状态与过渡](#states-and-transitions) + * [Example: Entering and Leaving](#example-entering-and-leaving) + + * [范例：进场与离场](#example-entering-and-leaving) + * [Example: Entering and Leaving from Different States](#example-entering-and-leaving-from-different-states) + + * [范例：从其它状态进场与离场](#example-entering-and-leaving-from-different-states) + * [Animatable Properties and Units](#animatable-properties-and-units) + + * [可参与动画的属性与单位](#animatable-properties-and-units) + * [Automatic Property Calculation](#automatic-property-calculation) + + * [自动计算属性值](#automatic-property-calculation) + * [Animation Timing](#animation-timing) + + * [动画时间线(Timing)](#animation-timing) + * [Multi-Step Animations with Keyframes](#multi-step-animations-with-keyframes) + + * [基于关键帧(Keyframes)的多阶段动画](#multi-step-animations-with-keyframes) + * [Parallel Animation Groups](#parallel-animation-groups) + * [并行动画组(Group)](#parallel-animation-groups) + .l-sub-section :marked The examples referenced in this chapter are available as a [live example](/resources/live-examples/animations/ts/plnkr.html). + 本章中引用的这个例子可以到[在线例子](/resources/live-examples/animations/ts/plnkr.html)去体验。 + a(id="example-transitioning-between-states") .l-main-section :marked ## Quickstart Example: Transitioning Between Two States + + ## 快速起步范例：在两个状态间过渡 + figure img(src="/resources/images/devguide/animations/animation_basic_click.gif" alt="A simple transition animation" align="right" style="width:220px;margin-left:20px" ) + :marked Let's build a simple animation that transitions an element between two states driven by a model attribute. + 我们来构建一个简单的动画，它会让一个元素用模型驱动的方式在两个状态之间过渡。 + Animations are defined inside `@Component` metadata. Before we can add some, we need to import a few animation-specific functions: + 动画会被定义在`@Component`元数据中。在添加动画之前，我们得先引入一些与动画有关的函数： + +makeExample('animations/ts/app/hero-list-basic.component.ts', 'imports')(format=".") :marked @@ -59,6 +109,9 @@ figure metadata. It has animated transitions between two states: `active` and `inactive`. When a hero is active, we display a the element in slightly larger size and lighter color. + 通过这些，我们现在可以在组件元数据中定义一个名叫`heroState`的*动画触发器*。它在两个状态`active`和`inactive`之间完成动画过渡。 + 当英雄处于激活状态时，它会把该元素显示的稍微大一点、亮一点。 + +makeExample('animations/ts/app/hero-list-basic.component.ts', 'animationdef')(format=".") .alert.is-helpful @@ -67,11 +120,15 @@ figure animation metadata. In an upcoming release of Angular, support will be added for pulling the styles in from the component CSS stylesheet instead. + 在这个例子中，我们在动画元数据中用内联的方式定义了动画样式(`color`和`transform`)。在即将到来的一个Angular发布中，还将支持从组件的CSS样式表中取得样式。 + :marked We now have an animation defined but it is not yet used anywhere. We can change that by attaching it to one or more elements in the component's template using the "`@triggerName`" syntax: + 我们现在定义了一个动画，但是它还没有被用在任何地方。要想使用它，我们可以在模板中用`@triggerName`语法把它附加到一个或多个元素上。 + +makeExample('animations/ts/app/hero-list-basic.component.ts', 'template')(format=".") :marked @@ -80,25 +137,39 @@ figure attribute to the expression `hero.state`. We expect it to always be either `inactive` or `active`, since that's what we have defined animation states for. + 这里，我们把该动画触发器添加到了由`ngFor`重复出来的每一个元素上。每个重复出来的元素都有独立的动画效果。 + 我们把`@triggerName`属性(Attribute)的值设置成表达式`hero.state`。这个值应该或者是`inactive`或者是`active`，因为我们刚刚为它们定义过动画状态。 + With this setup, an animated transition is shown whenever a hero object changes state! Here's the full component implementation: + 通过这些设置，一旦英雄对象的状态发生了变化，就会触发一个带动画效果的过渡。下面是完整的组件实现： + +makeExample('animations/ts/app/hero-list-basic.component.ts') :marked ## States and Transitions + ## 状态与转换 + Angular animations are defined in terms of logical **states** and **transitions** between states. + Angular动画是由**状态**和**状态之间的过渡效果**所定义的。 + An animation state is a string value that we define in our application code. In the example above we used the states `'active'` and `'inactive'` based on the logical state of hero objects. The source of the state can be a simple object attribute as it was in this case, or it can be a value computed in a method. The important thing is that we can read it into the component's template. + 动画状态是一个由程序代码中定义的字符串值。在上面的例子中，我们基于英雄对象的逻辑状态使用了`'active'`和`'inactive'`这两种状态。 + 状态的来源可以是像本例中这样简单的对象属性，也可以由方法计算出的值。重点是，我们得能从组件模板中读取它。 + We can define *styles* for each animation state: + 我们可以为每个动画状态定义*一组样式*： + +makeExample('animations/ts/app/hero-list-basic.component.ts', 'states')(format=".") :marked @@ -107,9 +178,14 @@ figure *as long as it remains in that state*. In that sense, we are defining more than just animations here. We're actually defining what styles the element has in different states. + 这些`state`具体定义了每个状态的*最终样式*。一旦元素过渡到那个状态，该样式就会被应用到此元素上，*当它留在此状态时*，这些样式也会一直保持着。 + 从这个意义上说，我们其实并非仅仅在定义这里的动画，而是在定义该元素在不同状态时应该具有的样式。 + Once we have states, we can define *transitions* between the states. Each transition controls the timing of switching between one set of styles and the next: + 定义完状态，我们就能定义在状态之间的各种*过渡*了。每种过渡都会控制在一组样式和下一组样式之间切换的时间线： + +makeExample('animations/ts/app/hero-list-basic.component.ts', 'transitions')(format=".") figure.image-display @@ -119,12 +195,16 @@ figure.image-display If we have the same timing configuration for several transitions, we can combine them into the same `transition` definition: + 如果多种过渡都有同样的时间线配置，我们就可以把它们合并金同一个`transition`定义中： + +makeExample('animations/ts/app/hero-list-combined-transitions.component.ts', 'transitions')(format=".") :marked When we have the same timing for both directions of a transition, as we do in the previous example, we can use the `<=>` shorthand syntax: + 如果我们要对一个过渡的两种方向都使用相同的时间线（就像前面的例子中那样），我们可以使用`<=>`这种简写语法： + +makeExample('animations/ts/app/hero-list-twoway.component.ts', 'transitions')(format=".") :marked @@ -134,17 +214,29 @@ figure.image-display When the transition finishes, none of these styles will be kept because they're not defined in a `state`. + 有时我们会希望一些样式只在动画期间生效，但是在结束后并不保存它们。我们可以把这些样式内联在`transition`中进行定义。 + 在这个例子中，该元素立刻获得一组样式，然后动态过渡到下一个状态。当过渡结束时，这些样式并不会保持住，因为它们并没有被定义在`state`中。 + +makeExample('animations/ts/app/hero-list-inline-styles.component.ts', 'transitions')(format=".") :marked ### The wildcard state `*` + ### `*`(通配符)状态 + The `*` ("wildcard") state matches *any* animation state. This is useful for defining styles and transitions that should apply regardless of which state the animation is in. For example: + `*`(通配符)状态匹配*任何*动画状态。当定义那些不用管当前处于什么状态的样式及过渡时，这会很有用。比如： + * The `active => *` transition applies when the element's state changes from `active` to anything else. + + * 当该元素的状态从`active`变成任何其它状态时，`active => *`过渡就会生效。 + * The `* => *` transition applies when *any* change between two states takes place. + * 当*任何*两个状态之间切换时，`* => *`过渡就会生效。 + figure.image-display img(src="/resources/images/devguide/animations/ng_animate_transitions_inactive_active_wildcards.png" alt="The wildcard state can be used to match many different transitions at once" width="400") @@ -152,30 +244,49 @@ figure.image-display :marked ### The `void` state + ### `void`状态 + There's one special state called `void` that may apply to any animation. It applies when the element is *not* attached to a view. This may be because it has not yet been added or because it has been removed. The `void` state is useful for defining "enter" and "leave" animations. + 有一种叫做`void`的特殊状态，它可以应用于任何动画。当元素*没有*被附加到视图时，它就会生效。这种情况可能是由于它尚未被添加或者已经被移除了。 + `void`状态在定义“进场”和“离场”的动画时会非常有用。 + For example the `* => void` transition applies when the element leaves the view, regardless of what state it was in before it left. + 比如当一个元素离开视图时，`* => void`过渡就会生效，而不管它在离场以前是什么状态。 + figure.image-display img(src="/resources/images/devguide/animations/ng_animate_transitions_void_in.png" alt="The void state can be used for enter and leave transitions" width="400") :marked The wildcard state `*` also matches `void`. + `*`通配符状态也能匹配`void`。 + ## Example: Entering and Leaving + + ## 例子：进场与离场 figure img(src="/resources/images/devguide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;" ) + :marked Using the `void` and `*` states we can define transitions that animate the entering and leaving of elements: + 使用`void`和`*`状态，我们可以定义元素进场与离场时的过渡动画： + * Enter: `void => *` + + * 进场：`void => *` + * Leave: `* => void` + * 离场：`* => void` + +makeExample('animations/ts/app/hero-list-enter-leave.component.ts', 'animationdef')(format=".") :marked @@ -184,22 +295,44 @@ figure we want the transforms to be different on enter and leave: The element enters from the left and leaves to the right. + 注意，在这个例子中，这些样式在`transition`定义中被直接应用到了`void`状态，但并没有一个单独的`state(void)`定义。 + 这么做是因为我们希望在进场与离场时使用不一样的转换效果：元素从左侧进场，从右侧离开。 + ## Example: Entering and Leaving from Different States + + ## 范例：从不同的状态下进场和离场 + figure img(src="/resources/images/devguide/animations/animation_enter_leave_states.gif" alt="Enter and leave animations combined with state animations" align="right" style="width:200px" ) + :marked We can also combine this animation with the earlier state transition animation by using the hero state as the animation state. What this will let us do is configure different transitions for entering and leaving based on what the state of the hero is: + 通过把英雄的状态用作动画的状态，我们还能把该动画与以前的状态组合起来设计过渡动画。这让我们能根据该英雄的当前状态为其配置不同的进场与离场动画： + * Inactive hero enter: `void => inactive` + + * 非激活英雄进场：`void => inactive` + * Active hero enter: `void => active` + + * 激活英雄进场：`void => active` + * Inactive hero leave: `active => void` + + * 非激活英雄离场：`active => void` + * Active hero leave: `inactive => void` + * 激活英雄离场：`inactive => void` + We now have fine-grained control over each transition: + 现在我们就对每一种过渡都有了细粒度的控制： + figure.image-display img(src="/resources/images/devguide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400") @@ -209,14 +342,21 @@ figure.image-display :marked ## Animatable Properties and Units + ## 可参与动画的属性和单位 + Since Angular's animation support builds on top of Web Animations, we can animate any property that the browser considers *animatable*. This includes positions, sizes, transforms, colors, borders and many others. The W3C maintains [a list of animatable properties](https://www.w3.org/TR/css3-transitions/#animatable-properties). + 由于Angular的动画支持是构建在Web Animations标准之上的，所以我们也能支持浏览器认为可以*参与动画*的任何属性。这些属性包括位置(position)、大小(size)、转换(transform)、颜色(color)、边框(border)等很多属性。W3C维护着 + [一个可参与动画的属性列表](https://www.w3.org/TR/css3-transitions/#animatable-properties)。 + For positional properties that have a numeric value, we can define a unit by providing the value as a string with the appropriate suffix: + 位置/尺寸类属性可以用一个数字型的值和一个用来定义长度单位的后缀： + * `'50px'` * `'3em'` * `'100%'` @@ -224,51 +364,88 @@ figure.image-display For most dimensinal properties we can also just define a number which is then assumed to be in pixels: + 对大多数的尺寸类属性而言，我们还能只定义一个数字，那表示它使用的是像素(px)数： + * `50` is the same as saying `'50px'` + * `50`相当于`'50px'` + ## Automatic Property Calculation + + ## 自动属性值计算 + figure img(src="/resources/images/devguide/animations/animation_auto.gif" alt="Animation with automated height calculation" align="right" style="width:220px;margin-left:20px" ) + :marked Sometimes the value of a dimensional style property that we want to animate is not known until at runtime. For example, it is quite common for elements to have widths and heights that depend on their content and the screen size. These properties are often tricky to animate with CSS. + 有时候，我们想用在动画中的尺寸类样式的值在开始运行之前都是不可知的。比如，一种常见的情况是元素的宽度和高度依赖于它们的内容和屏幕尺寸。这些属性对CSS动画而言通常是相当棘手的。 + With Angular we can use a special `*` property value in these cases. What it means is that the value of this property will be computed at runtime and then plugged into the animation. + 如果用Angular动画，在这种情况下我们可以使用一个特殊的`*`属性值。它表示该属性的值将会在运行期被计算出来，然后插入到该动画中。 + The "leave" animation in this example takes whatever height the element has before it leaves and animates from that height to zero: + 这个例子中的“离场”动画会取得该元素在离场前的任意高度，并且把它用动画从那个高度过渡到0： + +makeExample('animations/ts/app/hero-list-auto.component.ts', 'animationdef')(format=".") :marked ## Animation Timing + ## 动画时间线 + There are three timing properties we can tune for every animated transition: The duration, the delay, and the easing function. They are all combined into a single transition *timing string*. + 对每一个动画过渡效果，我们有三种时间线属性可以调整：持续时间(duration)、延迟(delay)和缓动(easing)函数。他们被合并到了一个单一的过渡*时间线字符串*。 + ### Duration + ### 持续时间 + The duration controls how long the animation takes to run from start to finish. We can define a duration in three ways: + 持续时间控制动画从开始到结束要花多长时间。我们可以用三种方式定义持续时间： + * As a plain number, in milliseconds: `100` + + * 作为一个普通数字，以毫秒为单位，如：`100` + * In a string, as milliseconds: `'100ms'` + + * 作为一个字符串，以毫秒为单位，如：`'100ms'` + * In a string, as seconds: `'0.1s'` + * 作为一个字符串，以秒为单位，如：`'0.1s'` + ### Delay + ### 延迟 + The delay controls how long to wait after an animation triggers before the transition actually begins. We can define one by adding it in the same string following the duration. It also has the same format options as the duration: + 延迟控制在动画已经被触发，但尚未真正开始转场之前要等待多久。我们可以把它添加到字符串中的持续时间后面，它的选项格式也跟持续时间是一样的： + * Wait for 100ms and then run for 200ms: `'0.2s 100ms'` + * 等待100毫秒，然后运行200毫秒：`'0.2s 100ms'`。 + ### Easing + ### 缓动函数 The [easing function](http://easings.net/) controls how the animation accelerates and decelerates during its runtime. For example, using an `ease-in` function means @@ -276,36 +453,58 @@ figure can control the easing by adding it as a *third* value in the string after the duration and the delay (or as the *second* value when there is no delay): + [缓动函数](http://easings.net/)用于控制动画在运行期间如何加速和减速。比如：使用`ease-in`函数意味着动画开始时相对缓慢，然后在进行中逐步加速。我们可以通过在这个字符串中的持续时间和延迟后面添加*第三个*值来控制缓动函数(如果没有定义延迟就作为*第二个*值)。 + * Wait for 100ms and then run for 200ms, with easing: `'0.2s 100ms ease-out'` + + * 等待100毫秒，然后运行200毫秒，带缓动：`'0.2s 100ms ease-out'` + * Run for 200ms, with easing: `'0.2s ease-in-out'` + * 运行200毫秒，带缓动：`'0.2s ease-in-out'` + figure img(src="/resources/images/devguide/animations/animation_timings.gif" alt="Animations with specific timings" align="right" style="width:220px;margin-left:20px" ) + :marked ### Example + ### 例子 + Here are a couple of custom timings in action. Both "enter" and "leave" last for 200 milliseconds but they have different easings. The leave begins after a slight delay: + 这里是一组自定义时间线的动态演示。“进场”和“离场”都持续200毫秒，但是它们有不同的缓动函数。“离场”动画在轻微的延迟之后开始： + +makeExample('animations/ts/app/hero-list-timings.component.ts', 'animationdef')(format=".") :marked ## Multi-Step Animations with Keyframes + + ## 基于关键帧(Keyframes)的多阶段动画 + figure img(src="/resources/images/devguide/animations/animation_multistep.gif" alt="Animations with some bounce implemented with keyframes" align="right" style="width:220px;margin-left:20px" ) + :marked With animation *keyframes* we can go beyond a simple transition between two sets of styles to a more intricate animation that goes through one or more intermediate styles in between. + 通过定义动画的*关键帧*，我们可以把两组样式之间的简单过渡，升级为一种更复杂的动画，它会在转场期间经过一个或多个中间样式。 + For each keyframe, we can specify an *offset* that defines at which point in the animation that keyframe applies. The offset is a number between zero, which marks the beginning of the animation, and one, which marks the end. + 对于每个关键帧，我们都可以指定一个*偏移量*，用来定义该关键帧应该被用在动画期间的哪个时间点。偏移量是一个介于0(表示动画起点)和1(表示动画终点)之间的数组。 + In this example we add some "bounce" to our enter and leave animations with keyframes: + 在这个例子中，我们使用关键帧来为进场和离场动画添加一些“反弹效果”： + +makeExample('animations/ts/app/hero-list-multistep.component.ts', 'animationdef')(format=".") :marked @@ -313,27 +512,44 @@ figure measures from 0 to 1. The final timeline of the animation will based on the combination of keyframe offsets, duration, delay, and easing. + 注意，这个偏移量并*不是*使用绝对时间定义的术语。它是个在0到1之间的相对值。动画的最终时间线会基于关键帧的偏移量、持续时间、延迟和缓动函数计算出来。 + Defining offsets for keyframes is optional. If we omit them, offsets with even spacing are automatically assigned. For example, three keyframes without predefined offsets will receive offsets `0`, `0.5`, and `1`. + 为关键帧定义偏移量是可选的。如果省略它们，偏移量会自动根据帧数平均计算出来。例如，三个未曾定义偏移量的关键帧会分别获得偏移量：`0`、`0.5`和`1`。 + :marked ## Parallel Animation Groups + + ## 并行动画组 + figure img(src="/resources/images/devguide/animations/animation_groups.gif" alt="Parallel animations with different timings, implemented with groups" align="right" style="width:220px;margin-left:20px" ) + :marked We've already seen how we can animate multiple style properties at the same time: Just put all of them into the same `style()` definition! + 我们已经知道该如何在同一时间进行多种样式属性的动画：只要把它们都放进同一个`style()`定义就行了！ + But we may also want to configure different *timings* for animations that happen in parallel. For example, we may want to animate two CSS properties but use a different easing function for each one. + 但是我们也可能会希望同时发生的几个动画配置不同的*时间线*。比如，我们可能希望同时对两个CSS属性做动画，但又要为它们定义不同的缓动函数。 + For this we can use animation *groups*. In this example we use groups both on enter and leave so that we can use two different timing configurations. Both are applied to the same element in parallel, but run independent of each other: + 这时我们可以使用动画*组*。在这个例子中，我们同时在进场和离场时使用组，以便我们能为它们使用两种不同的时间线配置。 + 它们被同时应用到同一个元素上，但它们彼此独立运行： + +makeExample('animations/ts/app/hero-list-groups.component.ts', 'animationdef')(format=".") :marked One group animates the element transform and width. The other animates the opacity. + + 一个组对元素的`transform`和`width`做动画，另一个则对`opacity`做动画。