使用Angular动画使您的应用程序栩栩如生

动画是改善应用中用户体验的好方法。看看Google的Material Design！使用Angular动画，您可以轻松地向您的应用添加一些不错的效果。本文将向您展示如何入门。

在我们讨论Angular动画的全部含义之前，首先要谈谈为什么动画如此重要很重要。看看Google的Material Design。设计语言的核心原则之一是运动提供意义。这就是运动可以帮助吸引用户的注意力并提供反馈的想法。

这不是什么新鲜事；这个想法已经存在于传统动画领域数十年了。运动是一种通过屏幕上角色的动作将意图传达给观看者的机制。这些动作使我们能够了解动画对象要做什么。简而言之，它为特定操作创建了上下文。

这个概念可以应用到我们的应用程序中，因为我们可以使用运动来创建上下文并将用户交互转换为出色的用户体验。Angular Animations建立在Web Animations API之上，并在支持它的浏览器中本地运行。如果需要，它具有CSS关键帧回退。

那么，我们如何开始创建这些很棒的用户体验？首先，我们需要导入Angular动画模块。本质上，Angular Animations是DSL。通过从@ angular / platform-browser / animations导入BrowserAnimationsModule，我们可以开始在我们的应用程序中添加一些很酷的动画。导入后，我们在NgModule中对其进行配置，如下所示。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations’; @NgModule({   declarations: [     AppComponent,   ],   imports: [     BrowserModule,     BrowserAnimationsModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

动画使用“ trigger”属性链接。该触发器以“ @”开头，并放置在要进行动画处理的组件上。当更改触发器的属性或从舞台上打开或关闭某个元素时，就会触发基础动画。在下面的示例中，每次图像长度更改时，它将触发动画。

<section [@fade]="images.length" class="gallery-block compact-gallery">   <div class="container”>   ...   </div> </section>

当某种值发生变化时，动画将以“淡入淡出”触发器从元素开始。对于带有enter和离开的情况，`ngIf`可以向DOM中添加或删除元素，这也会触发动画。

现在，我们需要定义动画本身。这发生在组件的元数据中。我们将在装饰器中添加animations属性。动画被配置为一系列过渡，因此在动画数组中，我们为动画组织了不同的状态（即fadeIn和fadeOut）。我们可以定义应该在其中的那些状态上呈现的样式。在状态之后，我们定义了过渡，这些过渡描述了当我们在定义的状态之间移动时样式如何变化。

“ void”过渡是在DOM中添加元素或从DOM中删除元素的过渡。*代表任何状态；如果元素多次更改方向，这将很有用。

@Component({   ...   animations: [     trigger('fade', [       transition(‘void => *', [         style({ opacity: ‘0' }),         animate('300ms ease-in', style({ opacity: 1 }))       ]),       transition('* => void', animate('300ms ease-out', style({ opacity: 0 })))     ])   ] }) export class GalleryComponent {   ... }

我们如何定义样式更改？我们使用`style`和`animate`函数。这些本质上是完成所有工作的功能。如果我们仅使用样式函数，并使用css属性和值传递对象，它将立即应用样式。如果我们传递动画和样式（或关键帧），那么它将在一段时间内执行该操作。

例如，要使用fadeIn动画设置开始状态，您的初始样式将设置“不透明度：0”。然后，在准备过渡时，在适当的时间应用animate函数，并将样式设置为“ opacity：1”。上面的代码显示了一个示例，其中我们在移入屏幕和再次移出屏幕的组件之间进行转换。

<section [@fade]="images.length” (@fade.start)=“triggerTangent($event)">   <div class="container”>   ...   </div> </section>

有时候，我们希望获得有关动画所处于不同状态的反馈。为此，我们有可用的动画回调。使用上面定义的语法，我们可以定义这些生命周期挂钩，例如动画开始和结束的时间，因此我们可以根据需要执行其他任何操作。每个回调都会发出一个动画事件，其中包含有关动画的所有信息，例如其名称，时间，fromState，toState，甚至是当前所在的phaseName。

这就完成了Angular Animations模块的高级体系结构。但是，动画模块远远超出了此范围，并且还提供了一些更复杂的功能。这些包括“查询”，“组”和“错位”。

@Component({   ...   animations: [     trigger('fade', [       transition(‘void => *', [         query(':enter', [           style({             opacity: '0'           }),           stagger(30, [             animate('300ms ease-in', style({ opacity: 1 }))           ])         ])       ]),       transition('* => void', animate('300ms ease-out', style({ opacity: 0 })))     ])   ] }) export class GalleryComponent {   ... }

“查询”用于定位父组件中的特定元素并将动画应用于它们。最好的部分是，Angular在页面上协调这些元素时会处理设置，拆卸和清理这些元素。例如，我有一个图库中的图像列表。如果要定位图库的每个元素，可以使用查询为所有元素设置动画。或者，如上例所示，我可以定位视图中的所有（子）元素。

“错开”是您在查询中使用的东西。顾名思义，随着样式的变化，它交错了多个元素。换句话说，它间隔了每个元素的动画以产生强烈的影响。它与`group`捆绑在一起，使您可以将多个动画组合在一起。“组”允许用户用几行代码创建复杂而精美的动画。上面的例子是将列表动画化。'：enter'查询的对象是刚在DOM上创建并进入画布的元素。

还有更复杂的工具，例如“ animateChlid”和“ AnimationBuilder”，这些工具只有在您确实需要进行一些认真的自定义工作时才会出现。Angular Animations模块背后的基本思想是，无论是简单的动画淡入淡出还是整个页面上多个元素的复杂编排，它都应该成为使应用程序动画化的事实上的标准。