Angular动画实现的2种方式以及添加购物车动画实例代码

前言

在前端应用中，动画是一个常见的场景。在使用了一系列的动画库之后，终于需要自己来实现一个动画了。这次的动画则是基于 Angular 框架。我的场景是一个类似于添加购物车的动画。在这个场景里，需要两个动画，一个是购物车数量的增加动画，一个则是折叠页面元素的动画。

在实现的过程上，我采用了两种不同的 Angular 动画的方式：

Angular 动画基础

如 Angular 官网中的示例那样，要在 Angular 应用中添加动画是比较简单的一件事——前提是我们懂得添加的法则。如下是官网的示例：

@Component({ selector: 'app-hero-list-basic', template: ` <ul> <li *ngFor="let hero of heroes"  [@heroState]="hero.state"  (click)="hero.toggleState()"> {{hero.name}} </li> </ul> `, styleUrls: ['./hero-list.component.css'], animations: [ trigger('heroState', [ state('inactive', style({ backgroundColor: '#eee', transform: 'scale(1)' })), state('active', style({ backgroundColor: '#cfd8dc', transform: 'scale(1.1)' })), transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out')) ]) ]})

要使用动画，需要在模板中使用 [@heroState]语法，这里的 heroState 对应着 @Component 中的 heroState 相关的动画。

原理上，大概就是这么多了。然后，我就开始了我的动画之旅。

购物车数量增加动画

对于我的场景来说，要添加这个动画并不难。无非就是上一个值淡出，新的值淡入：

 trigger('count', [ transition('void => current', [ animate( '400ms 150ms', keyframes([  style({ opacity: 0.6, transform: 'translateY(0)', offset: 0 }),  style({ opacity: 0.3, transform: 'translateY(-15px)', offset: 0.5 }),  style({ opacity: 0, transform: 'translateY(-30px)', offset: 1 }) ]) ) ]), transition('void => last', [ animate( 250, keyframes([  style({ opacity: 0, transform: 'translateY(100%)', offset: 0 }),  style({ opacity: 0.3, transform: 'translateY(15px)', offset: 0.5 }),  style({ opacity: 0.8, transform: 'translateY(0)', offset: 1.0 }) ]) ) ]) ])

代码就是这么简单，这里用到了关键帧 keyframes，来进行一些简单的动画转换。

页面缩放动画

随后，我需要做的就是对页面的元素进行缩放等效果，这个时候就需要用到 AnimationBuilder 来实现了：