如何在Angular 6中使用动画

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

动画在用户设计中的作用

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

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

让我们看一些场景ios，其中动画可以证明对用户设计很有用。

• 提供反馈： 动画可用于确认系统已接收到特定操作。例如，当用户输入错误信息时，您可以使用摇动动画让他们知道他们需要再次输入凭据。

• 演示： 动画也可用于演示应用程序的某些方面是如何工作的。这是通过提供视觉提示来完成的，这些提示用于教用户如何操作不同的 UI 元素。

• 过渡：过渡动画可帮助用户将注意力集中在正确的区域。在合并过渡动画时，请记住该过程应该是流畅且轻松的。

动画状态和过渡

在开始向 Angular 应用程序添加动画之前，让我们先看看 Angular 中可用的不同动画状态和转换。

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

• void 状态： 不在视图中的元素由 void 状态表示

• 通配符 (*) 状态： 这代表任何状态

当我们开始编码时，我们将看看这些如何适合实际应用程序。

为了让动画从一种状态变为另一种状态，它需要转换。过渡事件有自己的属性，包括：

• Duration： 此属性定义动画的生命周期。这意味着从动画开始到结束的时间。

• 延迟： 此属性用于定义实际转换开始到触发它的时间之间的时间。

• 缓动： 此属性控制动画速度的变化。动画可以开始缓慢并随着它的进展而加速，反之亦然。

设置 Angular 6 项目

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

ng new angularAnimation

接下来是通过导入 app.module.tsBrowserAnimationsModule来启用动画 ，如下所示。 

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
    ]),
    ]

)

动画属性通常是一个数组，其中包含一个或多个如上定义的触发器。此外，每个触发器还具有状态和转换功能。

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

@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 中动画的全部功能。