如何在Angular 6中使用动画

在本教程中，您将了解动画在改善用户体验方面的重要性。 我将向您展示如何在动画组件和Bootstrap的帮助下将动画合并到Angular 6应用程序中。

动画在用户设计中的作用

大多数网络用户是视觉生物，因此会响应视觉对象。 这意味着作为设计师，您必须找到一种在设计中融入动画的方法。

当涉及到用户与您的网站或应用的交互时，动画可以证明是一种有用的工具。 但是，这并不意味着当您使用动画时，用户会被您的网站所吸引。 您必须在特定时间和地点使用的动画数量要取得平衡。

让我们看一些在动画中可以证明对用户设计有用的场景。

• 提供反馈：动画可用于确认系统已收到特定动作。 例如，当用户输入错误的信息时，您可以使用摇动动画让他们知道他们需要再次输入其凭据。
• 演示：动画还可用于演示应用程序某些方面的工作方式。 这是通过提供可视提示来完成的，这些提示可以教用户如何使用不同的UI元素。
• 过渡：过渡动画可以帮助用户将注意力集中在正确的区域。 合并过渡动画时，请记住该过程应该流畅且轻松。

动画状态和过渡

在开始将动画添加到Angular应用程序之前，让我们首先看一下Angular中可用的不同动画状态和过渡。

这些是Angular动画的主要状态：

• 无效状态：视图中不存在的元素由无效状态表示
• 通配符（*）状态：表示任何状态

当我们开始编码时，我们将研究它们如何适合实际的应用程序。

为了使动画从一种状态变为另一种状态，需要进行过渡。 过渡事件具有其自己的属性，包括：

• 持续时间：此属性定义动画的寿命。 这意味着从动画的开始到完成的时间。
• 延迟：此属性用于定义实际过渡开始到触发之间的时间。
• 缓动：此属性控制动画速度的变化。 动画可以从慢开始并随其进展而加速，反之亦然。

设置Angular 6项目

我们将从初始化新的Angular应用程序开始，如下所示：

ng new angularAnimation

下一步是通过导入app.module.ts中的BrowserAnimationsModule来启用动画，如下所示。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后，将从组件文件中的@angular/animations导入将要使用的所有动画功能，如下所示：

import { trigger, state, style, animate, transition, group } from '@angular/animations';

定义动画

最后，您如图所示在组件装饰器中定义所有动画。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'].

 animations: [
    trigger('trigger1', [
        //state and transitions go here

    ]),
    trigger('trigger2', [
        //state and transitions go here
    ]),
    ]

)

animation属性通常是一个数组，其中包含一个或多个如上所述的触发器。 每个触发器还具有状态和转换功能。

一个简单的动画属性如下所示：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

  animations: [
  trigger('changeBtnColor', [
    state('state1', style({
      backgroundColor: 'yellow',

    })),
    state('state2', style({
      backgroundColor: 'pink',
      border:'1px solid #18ab29',
      height: '100px',
      width: '200px'
    })),
    transition('state1=>state2', animate('1000ms')),
    transition('state2=>state1', animate('1000ms'))
  ]), ]
})

在上面的动画中，触发器的名称是changeBtnColor ，我们有两个状态： state1和state2 。 我们的元素在state1将为黄色，并且过渡到state2时，动画将更改其大小和颜色。

将元素挂接到动画触发器

现在，让我们将元素挂接到模板中的触发器，如下所示。

<h3>Change color Animation</h3>
<button class ="my_button" (click)="changeState()">Click here</button>
<hr>
<button [@changeBtnColor]=current class ="mybutton" (click)="changeState()">Change Color</button>
<br />

现在回到组件并定义侦听按钮单击的函数。

export class AppComponent {
  title = 'Animations in Angular';
  current = 'state1';

    changeState() {
      this.current = this.current === 'state1' ? 'state2' : 'state1';
    }
}

以下是动画的转换前后。

既然我们已经掌握了Angular动画的基础知识，那么让我们更深入地介绍另一个示例。 在下一个示例中，我们将动画添加到列表项。

动画列表项

现在打开app.component.ts并如下更新：

export class AppComponent {
  title = 'Animations';
  mylist = [];
 			
  addElement() {
   this.mylist.push('This list is animated');
  }

  removeElement() {
    this.mylist.length -= 1;
  }
}

在这里，我们创建一个空列表，并创建一个用于向列表中添加元素和从列表中删除元素的函数。

接下来，我们将添加将应用于动画的元素。 如下更新模板：

<h3>Enter and Leave animation</h3>
<a (click)="addElement()" href="#" class="myButton">Add List</a>
<a (click)="removeElement()"href="#" class="myButton">Remove List</a>
<div style="width:200px; margin-left: 20px">
  <ul>
    <li *ngFor="let list of mylist">
    {{list}}
    </li>
  </ul>
</div>

我们将开始在组件中添加动画。 打开app.component.ts并在组件装饰器中添加以下动画。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

  animations: [
    trigger('AnimateList', [
      transition(':enter', [  
        style({opacity: 0, transform: 'translateY(-75%)', offset: 1.0}),
        animate('0.2s 600ms ease-in')
      ]),

      transition(':leave', [
        animate('1.2s ease-out', 
        style({opacity: .5, transform: 'translateY(35px)',  offset: 0.3})  
      ]),
    ])
   ]
})

在这里，我们有一个名为AnimateList的触发器，它具有:enter和:leave别名。 enter表示从void到*的过渡（ void => * ），而:leave表示从*到void的过渡（ * => void ）。 在:enter过渡期间，动画将等待600ms并运行0.2s。 leave过渡将等待0.1秒，并且不会延迟运行。

现在，我们需要更新模板以使用上面定义的动画。 app.component.html中的列表项应如下所示：

<div style="width:200px; margin-left: 20px">
  <ul>
    <li *ngFor="let list of mylist" [@AnimateList]>
    {{list}}
    </li>
  </ul>
</div>

该应用程序的最终演示应如下所示运行。

结论

本教程介绍了在Angular中开始自己的动画所必需的所有内容。 有关更多信息，请转到动画指南，并探索Angular中动画的全部功能。

翻译自: https://code.tutsplus.com/tutorials/how-to-use-animation-in-angular--cms-32488