Angular Animation

素颜马尾好姑娘i 2022-05-14 02:55 152阅读 0赞

Angular Animation简单来说 就是状态和状态之间的转场效果。每一种状态对应一种样式(style)。Angular Animation指导从一种状态的样式过渡到另一种状态的样式效果过程。

> Angular Animation和咱们Android里面的属性动画类似。

如果想在我们的应用中使用动画，有一个前提条件，得先引入BrowserAnimationsModule模块。建议在app module里面引入。

**开始部分，我们先贴出文章里面涉及到的所有例子的下载的地址：[https://github.com/tuacy/AngularAnimation][https_github.com_tuacy_AngularAnimation]**

>        例子都是非常简单的例子，咱也是个初学者。高深的例子咱也写不出来。

# 一、Angular Animation里面各个函数解释 #

Angular Animation动画使用起来不难，在加上咱之前有Android动画的经验。Angular Animation看起来就更加的简单了。

## 1.1. trigger触发器 ##

trigger触发器，`trigger`将根据提供的`triggerName`值创建一个动画触发器。在模板中使用\[@triggerName\]语法来把它附加到一个或多个元素上去。可以简单的理解为这个时候就把元素和触发器对应的动画绑定起来了。

比如如下的代码我们就定义了一个名字为flyInOut的一个触发器。

import {Component, OnInit} from '@angular/core';
    import {animate, keyframes, state, style, transition, trigger} from '@angular/animations';
    
    @Component({
        selector: 'app-keyframes-animation',
        templateUrl: './keyframes-animation.component.html',
        styleUrls: ['./keyframes-animation.component.css'],
        animations: [
            trigger('flyInOut', [
                state('in', style({transform: 'translateX(0)'})),
                // keyframes多阶段动画(任何状态切换的时候都使用该动画)
                transition('* => *', [
                    animate(1000, keyframes([
                        style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
                        // 多往右边移除一点
                        style({opacity: 1, transform: 'translateX(50%)', offset: 0.5}),
                        style({opacity: 1, transform: 'translateX(0)', offset: 1.0})
                    ]))
                ])
            ])
        ]
    })
    export class KeyframesAnimationComponent implements OnInit { 
    
        constructor() {
        }
    
        ngOnInit() {
        }
    
    }

上面的代码只是定义了一个触发器，但是还没有把触发器和页面上的元素绑定起来(在模板中使用\[@triggerName\]来绑定)，比如如下的代码我们就把div绑定到了这个触发器上。

<br>
    <h5>keyframes关键帧多阶段动画</h5>
    <br>
    
    <div style="width: 200px; height: 200px;background-color: #67ee38" [@flyInOut]></div>
    <br>

## 1.2. state状态 ##

state状态，通过这个state函数来定义每个状态最终的样式(动画开始时候的样子和动画结束之后的样子)；想要动画动起来需要通过改变状态(state)来触发(trigger)动画(animate)。

> 上面咱们贴了trigger触发器时候的代码实例，在trigger函数里面有state函数，定义了一个 in的状态对应的样式为transform: ‘translateX(0)’。

## 1.3. transition转换 ##

transition负责定义各种 state之间的转换关系，并且定义state转换的时候使用什么的样的动画来完成。

这里我们着重要讲下状态装换在Angular Animation中是怎么定义的状态之间装换的。

trigger('animationState', [ // stateA 状态最终样式 state('stateA', style({ backgroundColor: '#67ee38', transform: 'scale(1)' })), // stateB 状态最终样式 state('stateB', style({ backgroundColor: '#4a302c', transform: 'scale(1.1)' })), // stateA 到 stateB 状态动画 transition('stateA => stateB', animate('500ms ease-in')), // stateB 到 stateA 状态动画 transition('stateB => stateA', animate('500ms ease-out')) ]),

上面的代码trigger里面有两个transition。分别定义了’stateA => stateB’和’stateB => stateA’的状态变化。Angular Animation里面两个状态之间的装换就是通过 ‘状态 => 状态’ 这样的表达式来定义的。在Angular Animation里面有两种特殊的状态； ×、void状态。其中×状态匹配任何状态，void状态表示元素没有被附加到视图时候的状态。

讲到状态，那咱们还得提下元素的入场和出场动画的添加了。比如下面的实例。我们定义了入场和出场的动画。

animations: [
            trigger('flyInOut', [
                state('in', style({opacity: 1, transform: 'translateX(0) scale(1)'})),
                // 进场动画
                transition('void => *', [
                    style({opacity: 0, transform: 'translateX(-100%) scale(0)'}),
                    animate(500)
                ]),
                // 出场动画
                transition('* => void', [
                    animate(500, style({opacity: 0, transform: 'translateX(100%) scale(0)'}))
                ])
            ])
        ]

> 应该比较好理解吧，void => \* 表示入场。\* => void 表示出场。当然入场你也可以用:enter代替，出场可以用:leave代替。

![这里写图片描述][70]

## 1.4. style样式 ##

Angular Animation动画的过程就是在改变元素的CSS样式或者CSS3 transform 属性。style函数可以出现在state函数，transition函数，animate函数中。

假设有这样的需求，动画结束但是我们不想保留动画结束点的那个状态。实现过程查看如下代码。

// 动画结束不保留状态
            trigger('animationStateNoSave', [ transition('stateA => stateB', [ style({ backgroundColor: '#4a302c', transform: 'scale(1.1)' }), animate('1000ms ease-in', style({ backgroundColor: '#67ee38', transform: 'scale(1)' })) ]), transition('stateB => stateA', [ style({ backgroundColor: '#67ee38', transform: 'scale(1)' }), animate('1000ms ease-in', style({ backgroundColor: '#4a302c', transform: 'scale(1.1)' })) ]) ])

> 注意这里我们没有通过state函数来指定状态对应的style。

Angular Animation支持的CSS样式如下：

<table> 
 <thead> 
  <tr> 
   <th>css属性的名字</th> 
   <th>animation style 对应名字</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>background-color</td> 
   <td>backgroundColor</td> 
   <td>设置元素的背景颜色</td> 
  </tr> 
  <tr> 
   <td>background-position</td> 
   <td>backgroundPosition</td> 
   <td>设置背景图像的起始位置</td> 
  </tr> 
  <tr> 
   <td>border-bottom-color</td> 
   <td>borderBottomColor</td> 
   <td>设置下边框的颜色</td> 
  </tr> 
  <tr> 
   <td>border-bottom-width</td> 
   <td>borderBottomWidth</td> 
   <td>设置下边框的宽度</td> 
  </tr> 
  <tr> 
   <td>border-left-color</td> 
   <td>borderLeftColor</td> 
   <td>属性设置元素的左边框的颜色</td> 
  </tr> 
  <tr> 
   <td>border-left-width</td> 
   <td>borderLeftWidth</td> 
   <td>属性设置元素的左边框的宽度</td> 
  </tr> 
  <tr> 
   <td>border-right-color</td> 
   <td>borderRightColor</td> 
   <td>属性设置元素的右边框的颜色</td> 
  </tr> 
  <tr> 
   <td>border-right-width</td> 
   <td>borderRightWidth</td> 
   <td>属性设置元素的右边框的宽度</td> 
  </tr> 
  <tr> 
   <td>border-spacing</td> 
   <td>borderSpacing</td> 
   <td>设置相邻单元格的边框间的距离</td> 
  </tr> 
  <tr> 
   <td>border-top-color</td> 
   <td>borderTopColor</td> 
   <td>属性设置元素的上边框的颜色</td> 
  </tr> 
  <tr> 
   <td>border-top-width</td> 
   <td>borderTopWidth</td> 
   <td>属性设置元素的上边框的宽度</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>bottom</td> 
   <td>定元素的底部边缘</td> 
  </tr> 
  <tr> 
   <td>clip</td> 
   <td>clip</td> 
   <td>剪裁绝对定位元素</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>color</td> 
   <td>规定文本的颜色</td> 
  </tr> 
  <tr> 
   <td>font-size</td> 
   <td>fontSize</td> 
   <td>设置字体的尺寸</td> 
  </tr> 
  <tr> 
   <td>font-weight</td> 
   <td>fontWeight</td> 
   <td>设置文本的粗细</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>height</td> 
   <td>设置元素的高度</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>left</td> 
   <td>设置元素的左边缘</td> 
  </tr> 
  <tr> 
   <td>letter-spacing</td> 
   <td>letterSpacing</td> 
   <td>设置字符间的空白（字符间距）</td> 
  </tr> 
  <tr> 
   <td>line-height</td> 
   <td>lineHeight</td> 
   <td>设置行间的距离（行高）</td> 
  </tr> 
  <tr> 
   <td>margin-bottom</td> 
   <td>marginBottom</td> 
   <td>设置元素的下外边距</td> 
  </tr> 
  <tr> 
   <td>margin-left</td> 
   <td>marginLeft</td> 
   <td>设置元素的左外边距</td> 
  </tr> 
  <tr> 
   <td>margin-right</td> 
   <td>marginRight</td> 
   <td>设置元素的右外边距</td> 
  </tr> 
  <tr> 
   <td>margin-top</td> 
   <td>marginTop</td> 
   <td>设置元素的上外边距</td> 
  </tr> 
  <tr> 
   <td>max-height</td> 
   <td>maxHeight</td> 
   <td>设置元素的最大高度</td> 
  </tr> 
  <tr> 
   <td>max-width</td> 
   <td>maxWidth</td> 
   <td>设置元素的最大宽度</td> 
  </tr> 
  <tr> 
   <td>min-height</td> 
   <td>minWidth</td> 
   <td>设置元素的最小高度</td> 
  </tr> 
  <tr> 
   <td>min-width</td> 
   <td>minWidth</td> 
   <td>设置元素的最小宽度</td> 
  </tr> 
  <tr> 
   <td>opacity</td> 
   <td>opacity</td> 
   <td>设置元素的不透明级别</td> 
  </tr> 
  <tr> 
   <td>outline-color</td> 
   <td>outlineColor</td> 
   <td>设置元素整个轮廓的颜色</td> 
  </tr> 
  <tr> 
   <td>outline-width</td> 
   <td>outlineWidth</td> 
   <td>设置元素整个轮廓的宽度</td> 
  </tr> 
  <tr> 
   <td>padding-bottom</td> 
   <td>paddingBottom</td> 
   <td>设置元素的下内边距</td> 
  </tr> 
  <tr> 
   <td>padding-left</td> 
   <td>paddingLeft</td> 
   <td>设置元素的左内边距</td> 
  </tr> 
  <tr> 
   <td>padding-right</td> 
   <td>paddingRight</td> 
   <td>设置元素的右内边距</td> 
  </tr> 
  <tr> 
   <td>padding-top</td> 
   <td>paddingTop</td> 
   <td>设置元素的上内边距</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>right</td> 
   <td>规定元素的右边缘</td> 
  </tr> 
  <tr> 
   <td>text-indent</td> 
   <td>textIndent</td> 
   <td>首行文本的缩进</td> 
  </tr> 
  <tr> 
   <td>text-shadow</td> 
   <td>textShadow</td> 
   <td>向文本设置阴影</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>top</td> 
   <td>规定元素的顶部边缘</td> 
  </tr> 
  <tr> 
   <td>visibility</td> 
   <td>visibility</td> 
   <td>规定元素是否可见</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>width</td> 
   <td>元素的宽度</td> 
  </tr> 
  <tr> 
   <td>word-spacing</td> 
   <td>wordSpacing</td> 
   <td>设置单词间的空白</td> 
  </tr> 
  <tr> 
   <td>z-index</td> 
   <td>zIndex</td> 
   <td>设置元素的堆叠顺序</td> 
  </tr> 
 </tbody> 
</table>

Angular Animation支持的CSS3  
transform 属性如下：

<table> 
 <thead> 
  <tr> 
   <th>transform 属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>matrix(n,n,n,n,n,n)</td> 
   <td>2D 转换，使用六个值的矩阵</td> 
  </tr> 
  <tr> 
   <td>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)</td> 
   <td>3D 转换，使用 16 个值的 4x4 矩</td> 
  </tr> 
  <tr> 
   <td>translate(x,y)</td> 
   <td>2D 转换</td> 
  </tr> 
  <tr> 
   <td>translate3d(x,y,z)</td> 
   <td>3D 转换。</td> 
  </tr> 
  <tr> 
   <td>translateX(x)</td> 
   <td>转换，只是用X轴</td> 
  </tr> 
  <tr> 
   <td>translateY(y)</td> 
   <td>转换，只是用 Y 轴的值</td> 
  </tr> 
  <tr> 
   <td>translateZ(z)</td> 
   <td>3D 转换，只是用 Z 轴的值。</td> 
  </tr> 
  <tr> 
   <td>scale(x,y)</td> 
   <td>缩放转换</td> 
  </tr> 
  <tr> 
   <td>scale3d(x,y,z)</td> 
   <td>3D 缩放转换。</td> 
  </tr> 
  <tr> 
   <td>scaleX(x)</td> 
   <td>通过设置 X 轴的值来定义缩放转换</td> 
  </tr> 
  <tr> 
   <td>scaleY(y)</td> 
   <td>通过设置 Y 轴的值来定义缩放转换</td> 
  </tr> 
  <tr> 
   <td>scaleZ(z)</td> 
   <td>通过设置 Z 轴的值来定义 3D 缩放转换。</td> 
  </tr> 
  <tr> 
   <td>rotate(angle)</td> 
   <td>2D 旋转，在参数中规定角度</td> 
  </tr> 
  <tr> 
   <td>rotate3d(x,y,z,angle)</td> 
   <td>3D 旋转。</td> 
  </tr> 
  <tr> 
   <td>rotateX(angle)</td> 
   <td>沿着 X 轴的 3D 旋转</td> 
  </tr> 
  <tr> 
   <td>rotateY(angle)</td> 
   <td>沿着 Y 轴的 3D 旋转</td> 
  </tr> 
  <tr> 
   <td>rotateZ(angle)</td> 
   <td>沿着 Z 轴的 3D 旋转</td> 
  </tr> 
  <tr> 
   <td>skew(x-angle,y-angle)</td> 
   <td>沿着 X 和 Y 轴的 2D 倾斜转换</td> 
  </tr> 
  <tr> 
   <td>skewX(angle)</td> 
   <td>沿着 X 轴的 2D 倾斜转换</td> 
  </tr> 
  <tr> 
   <td>skewY(angle)</td> 
   <td>沿着 Y 轴的 2D 倾斜转换</td> 
  </tr> 
  <tr> 
   <td>perspective(n)</td> 
   <td>3D 转换元素定义透视视图</td> 
  </tr> 
 </tbody> 
</table>

## 1.5. animate动画 ##

animate表示具体的动画定义  
。定义动画的持续时间，动画延时多长时间执行，动画的缓动函数([https://easings.net/zh-cn][https_easings.net_zh-cn])。

## 1.6. group组 ##

`group`是一个动画特定的函数，指定一个并行运行的动画步骤列表。分组动画是当一系列样式必须在不同的开始/结束时间进行动画/关闭时很有用。同时执行多个动画。(多个动画组合在一起同时触发)。比如如下效果图，同时有颜色变化动画和翻转动画执行。

![这里写图片描述][70 1]

## 1.7. keyframes关键帧 ##

keyframes描述每个样式条目是如何应用的，以及在什么点动画弧（很像CSS关键帧动画）。相当于把动画分段了。比如如下动画我们通过keyframes实现了动画多往左边移动了一段距离在回到最终位置(当然了你也可以通过缓动函数来实现)。

![这里写图片描述][70 2]

## 1.8. sequence顺序 ##

sequence指定逐个运行的动画步骤列表，这个也就是和group特性正好相反，一个同时进行，一个按先后顺序一个一个的进行。

> 比如下面的例子，进场动画我们就定义了几个动画顺序执行

import {Component, OnInit} from '@angular/core';
    import {animate, sequence, state, style, transition, trigger} from '@angular/animations';
    
    @Component({
        selector: 'app-sequence-animation',
        templateUrl: './sequence-animation.component.html',
        styleUrls: ['./sequence-animation.component.css'],
        animations: [
            trigger('flyInOut', [
                state('in', style({transform: 'rotateX(0) translateX(0)', opacity: 1})),
                // 多个动画同时执行
                transition('void => *', sequence([
                    style({
                        opacity: 0,
                    }),
                    animate('1s ease-in-out', style({
                            opacity: 1,
                        }
                    )),
                    animate('1s ease-in-out', style({
                            transform: 'rotateX(90deg)',
                        }
                    )),
                    animate('2s ease', style({
                        transform: 'rotateY(90deg)',
                    })),
                ]))
            ])
        ]
    })
    export class SequenceAnimationComponent implements OnInit { 
    
        constructor() {
        }
    
        ngOnInit() {
        }
    
    }

![这里写图片描述][70 3]

## 1.10. query ##

query用于在当前元素中查找(query)一个或多个内部元素在序列中进行动画。把动画作用在子元素上。

import {Component, OnInit} from '@angular/core';
    import {animate, query, style, transition, trigger} from '@angular/animations';
    
    @Component({
        selector: 'app-query-animation',
        templateUrl: './query-animation.component.html',
        styleUrls: ['./query-animation.component.css'],
        animations: [
            trigger('queryAnimation', [
                // 入场的时候对子元素采用动画
                transition('* => goAnimate', [
                    // hide the inner elements
                    query('h1', style({
                        opacity: 0
                    })),
                    query('.content', style({
                        opacity: 0
                    })),
                    // 动画作用于内容元素
                    query('h1', animate(1000, style({
                        opacity: 1
                    }))),
                    query('.content', animate(1000, style({
                        opacity: 1
                    })))
                ])
            ])
        ]
    })
    export class QueryAnimationComponent { 
    
    }

![这里写图片描述][70 4]

## 1.11. stagger ##

stagger需要在query里面使用，stagger的作用在于每个动画发出之后隔多长时间在发下一个动画。比如咱们有这样的需求，ul里面有好多个li。想要一个这样的效果。li的动画一个挨着一个执行。代码如下

trigger('listAnimation', [ transition('* => *', [ // each time the binding value changes query(':enter', [ // 所有子元素入场动画 style({opacity: 0}), stagger('0.5s', [ animate('0.5s', style({opacity: 1})) ]) ]) ]) ])]

## 1.12. animateChild ##

在angular中，因为每次动画被触发，父动画将始终获得优先权，任何子动画都将被阻止，为了子动画也有动画效果，父动画必须查询每一个包含子动画的元素并用animateChild来运行子动画。animateChild需要和query一起使用。

trigger('parentAnimation', [ transition('false => true', [ // 查找parentAnimation对应element里面的header标签执行动画 query('header', [ style({opacity: 0}), animate(500, style({opacity: 1})) ]), query('@childAnimation', [ animateChild() ]) ]) ]),
            trigger('childAnimation', [ transition('false => true', [ style({opacity: 0}), animate(500, style({opacity: 1})) ]) ])

## 1.13. 动画回调 ##

动画开始的时候有个回调函数，动画结束的时候也有个回调函数。

## 1.9. animation的封装 ##

借助useAnimation函数我们可以对动画做一个简单的封装。比如如下的代码我们把封装了两个动画，放在animation.ts文件里面。

import {animate, animation, style, transition, trigger, useAnimation} from '@angular/animations';
    
    // 封装动画1
    const inAnimation = animation([
        style({
            opacity: '{ { start }}',
            transform: 'translateX(-100%)'
        }),
        animate('{ { time }}',
            style({
                opacity: '{ { end }}',
                transform: 'translateX(0)'
            }))
    ], {
       params: {time: '1000ms', start: 0, end: 1}});
    
    // 封装动画2
    const outAnimation = animation([
        style({
            opacity: '{ { start }}',
            transform: 'translateX(0)'
        }),
        animate('{ { time }}',
            style({
                opacity: '{ { end }}',
                transform: 'translateX(-100%)'
            }))
    ], {
       params: {time: '1000ms', start: 0, end: 1}});
    
    
    // 如下面我定一个动效用到上面封装的动画
    export const routerEnterLeave = trigger('fadel', [
        // 入场
        transition(':enter', [
            useAnimation(inAnimation, {
                params: {
                    time: '2s',
                    start: 0,
                    end: 1
                }
            })
        ]),
        // 出场
        transition(':leave', [
            useAnimation(outAnimation, {
                params: {
                    time: '2s',
                    start: 1,
                    end: 0
                }
            })
        ])
    ]);

--------------------

关于Angular Animation咱们就撤这么多，文章中涉及到的所有例子下载地址[https://github.com/tuacy/AngularAnimation][https_github.com_tuacy_AngularAnimation]。希望能帮到大家。最后还是想强调下最好的文档是官方文档[https://v6.angular.live/guide/animations][https_v6.angular.live_guide_animations]。

[https_github.com_tuacy_AngularAnimation]: https://github.com/tuacy/AngularAnimation
[70]: /images/20220514/340ff7ac64664efeaef71d630f9dbc7c.png
[https_easings.net_zh-cn]: https://easings.net/zh-cn
[70 1]: /images/20220514/060ee82ec1144c8d8483fa6592feeecb.png
[70 2]: /images/20220514/6ca18f440b874088b853a71265961d6b.png
[70 3]: /images/20220514/1d5b1d2470244568adf8b45b339593c7.png
[70 4]: /images/20220514/f8e393f64ed6439594723a78f651af7e.png
[https_v6.angular.live_guide_animations]: https://v6.angular.live/guide/animations