Angular 动画

Angular 动画

---

Angular 的动画系统除了可以构建出与原生CSS动画性能相同的动画，还可以保持动画逻辑与应用代码的紧密集成能力，让动画更容易被触发和控制

基于 Web 动画 API 构建，而不支持 WAAPI 的浏览器，则需要引入 web-animations.min.js 作为 polyfill

首先：

引入与动画有关的函数

import { 
    Component,
    Input,
    trigger,
    state,
    style,
    transition,
    animate
} from '@angular/core'

然后：

在组件元数据中定义动画触发器

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

以动画状态机为控制开关，定义每个状态的样式和切换时的动画过程

再然后：

绑定到一个或多个元素

<ul> 
    <li *ngFor="let hero of heroes"
        [@heroState]='hero.state'
        (click)="hero.toggleState()">
        {{hero.name}}
    </li>
</ul>

---

状态与转场

实际上，动画状态代表了元素的不同样式、功能、结构，当元素的动画状态变化时，以一段时间内的过程，完成状态的切换就是动画

在上面的定义中，规定了两个状态：active 和 inactive，

在这个两种状态下，元素的样式是有差别的，需要分别定义，

当状态进行切换时，定义了 100ms 完成的一个渐进的过程，动画的进行速率为 WAAPI 预设的缓动曲线，

最后，我们通过模版绑定动画的宿主，实现对用户操作的响应

**

前行的路上，感谢您的鼓励！！

**