angular动画知识点以及代码样例

原文地址

https://www.jianshu.com/p/4400174072e2

大纲

　　1、angular动画的相关概念
　　2、angular动画的绑定方式
　　3、angular动画代码实例

1、angular动画的相关概念

   1.1、trigger（触发器）

<!--
    所有的trigger都可以直接绑定element
    像这样，只要state1 有改变，trigger都会触发。
    在trigger世界里，是能控制state 和 transition。
-->
<div [@state]="state1" ></div>

   1.2、state是转场的“场”，state（状态）

/*
    1、*(通配符)状态:*(通配符)状态匹配任何动画状态。
        当定义那些不需要管当前处于什么状态的样式及转场时，这很有用。

        当该元素的状态从 active 变成任何其它状态时，active => * 转场都会生效。
        当在任意两个状态之间切换时，* => * 转场都会生效。
        * 通配符状态也能匹配 void。
        
    2、void 状态
        有一种叫做 void 的特殊状态，它可以应用在任何动画中。
        它表示元素没有被附加到视图。
        这种情况可能是由于它尚未被添加进来或者已经被移除了。 
        void 状态在定义“进场”和“离场”的动画时会非常有用。
        比如当一个元素离开视图时，* => void 转场就会生效，
        而不管它在离场以前是什么状态。
        
    3、还有一些:enter、:leave等状态是angular本身自带的，
      比如:enter代表路由进场、:leave代表路由出场
*/
state("void", style({ height: 0 })) //void是保留字，是没有东西
state("*", style({ height: 0 }))  //*是保留字，是default
state("closed", style({ height: 0 }))
state("open, visible", style({ height: "*" }))

   1.3、transition是转场，state去到下一个state

/**
  转场的书写方式有很多种，如下是一些常见的转场
**/
transition("on => off", animate(500)),
transition("on <=> off", animate(500)),
transition("on => off, off => void", animate(500)),
transition("void => *", animate(500)),
transition("* => *", animate("1s 0s")),
transition((fromState, toState) => {
   return fromState == "off" && toState == "on";
}, animate("1s 0s"))
transition(":enter", animate(500)),
transition(":leave", animate(500)),

   1.4、基础动画animate

/*
    animate 使用方式就很多 （可以控制过渡时长，延迟，和过渡动作，结束动画）
    动画的方式主要有两种：
        1、简单的转场方式，
              通过自定义的两种状态之间的样式转换从而形成动画
        2、复杂的转场方式，
              通过自定义动画帧的方式从而详细定义动画不同时间状态下的转场方式
*/
animate(500, style(...))
animate("1s", style(...))
animate("100ms 0.5s", style(...))
animate("5s ease", style(...))
animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...))
animate(500, style({ background: "red" }))
animate(500, keyframes([
  style({ background: "blue" })),
  style({ background: "red" }))

   1.5、动画时间线

/*
    对每一个动画转场效果，有三种时间线属性可以调整：
        持续时间(duration)、延迟(delay)和缓动(easing)函数。
    它们被合并到了一个单独的转场时间线字符串。
    
    持续时间：持续时间控制动画从开始到结束要花多长时间。
    
    延迟：延迟控制的是在动画已经触发但尚未真正开始转场之前要等待多久。
    
    缓动函数：缓动函数用于控制动画在运行期间如何加速和减速。
      比如：使用 ease-in 函数意味着动画开始时相对缓慢，然后在进行中逐步加速。
      可以通过在这个字符串中的持续时间和延迟后面添加第三个值来控制使用哪个缓动函数
      (如果没有定义延迟就作为第二个值)。
*/

   1.6、并行动画组(Group)

/*
    你可能会希望为同时发生的几个动画配置不同的时间线。
    比如，同时对两个 CSS 属性做动画，但又得为它们定义不同的缓动函数。

    这种情况下就可以用动画组来解决了。
    在这个例子中，同时在进场和离场时使用了组，以便能让它们使用两种不同的时间线配置
    它们被同时应用到同一个元素上，但又彼此独立运行：
*/
animations: [
  trigger('flyInOut', [
   state('in', style({width: 120, transform: 'translateX(0)', opacity: 1})),
    transition('void => *', [
      style({width: 10, transform: 'translateX(50px)', opacity: 0}),
      group([
        animate('0.3s 0.1s ease', style({
          transform: 'translateX(0)',
          width: 120
        })),
        animate('0.3s ease', style({
          opacity: 1
        }))
      ])
    ]),
    transition('* => void', [
      group([
        animate('0.3s ease', style({
          transform: 'translateX(50px)',
          width: 10
        })),
        animate('0.3s 0.2s ease', style({
          opacity: 0
        }))
      ])
    ])
  ])
]

2、angular动画的绑定方式

   2.1在当前组件中自定义动画，然后使用

     2.1.1 在组件中定义动画

import {
  Component, OnInit, 
  trigger, state, style, transition, 
  animate
} from '@angular/core';
@Component({
  selector: 'test-animation',
  templateUrl: './test-animation.component.html',
  styleUrls: ['./test-animation.component.css'],
  animations:[
    //在position状态改变时，触发动画
    trigger('position',[
      //position为left时的样式
      state('left',style({
        'margin-left': '0',
        'background-color':'yellow'
      })),
      //position为right时的样式
      state('right',style({
        'margin-left': '200px',
        'background-color':'blue'
      })),
      //状态切换时的动画设置
      transition('left => right',animate('1000ms ease-in')),
      transition('right => left',animate('1000ms ease-out'))
    ])
  ]
})
export class TestAnimationComponent implements OnInit {
  currentPosition = 'left';
  constructor() { }
  ngOnInit() {
  }
  /**
   * 按钮事件，切换状态
   */
  togglePosition() {
    if(this.currentPosition === 'left') {
      this.currentPosition = 'right';
    }else {
      this.currentPosition = 'left';
    }
  }
}

     2.1.2、在模板中绑定使用

<div id="brick" [@position]="currentPosition"></div>
<button (click)="togglePosition()">切换位置</button>

     2.1.3、通过事件改变状态，从而触发动画效果

　　当传入的状态由left转变为right的时候或者从right转变为left的时候都会触发相应的状态动画

   2.2、在非当前组件中自定义动画，然后引入并使用

     2.2.1、定义一个自定义动画

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

// Component transition animations
export const flyInOut =
    trigger('flyInOut', [
      state('in', style({height:'0'})),
      state('out', style({height:'100px'})),
        transition('in => out', [
          animate(2000, keyframes([
            style({ height: '0', opacity: 0, offset: 0, display:'block'}),
              style({ height: '*', opacity: 1, offset: 1, display:'none'})
          ]))
        ]),
      transition('out => in', [
        animate(2000, keyframes([
          style({ height: '*', opacity: 1, offset: 0 }),
          style({ height: '0', opacity: 0, offset: 1 })
        ]))
      ]),
    ])

     2.2.2、在组件中引入并调用

import { Component } from "@angular/core";
import { flyInOut } from "../share/animation/flyInOut.animations";

@Component({
    selector:'test-animation2',
    templateUrl:'./test-animation2.component.html',
    styleUrls:['./test-animation2.component.css'],
    animations:[flyInOut]
})

export class TestAnimation2Component {
    flyState = 'in';

    changeState() {
        if(this.flyState === 'in'){
            this.flyState = 'out'
        }else {
            this.flyState = 'in'
        }
    }
}

     2.2.3、在模板中绑定动画并通过事件改变动画状态从而调用转场动画

<!--
.block {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
}
-->
<div class="block" [@flyInOut]="flyState">
</div>
<button (click)="changeState()">
    change state
</button>

3、angular动画代码实例

/*
  testAnimation.component.ts
*/
import {
    Component, OnInit, trigger, 
    state, style, transition, animate
} from '@angular/core';
@Component({
  selector: 'test-animation',
  templateUrl: './testAnimation.component.html',
  styleUrls: ['./testAnimation.component.scss'],
  animations:[
    //在position状态改变时，触发动画
    trigger('position',[
      //position为left时的样式
      state('left',style({
        'margin-left': 0,
        'background-color':'yellow'
      })),
      //position为right时的样式
      state('right',style({
        'margin-left': 200,
        'background-color':'blue'
      })),
      //状态切换时的动画设置
      transition('left => right',animate('1000ms ease-in')),
      transition('right => left',animate('1000ms ease-out'))
    ])
  ]
})
export class TestAnimationComponent implements OnInit {
  currentPosition = 'left';
  constructor() { }
  ngOnInit() {
  }
  /**
   * 按钮事件，切换状态
   */
  togglePosition() {
    if(this.currentPosition === 'left') {
      this.currentPosition = 'right';
    }else {
      this.currentPosition = 'left';
    }
  }
}

<!--
  testAnimation.component.html
-->
<div id="brick" [@position]="currentPosition"></div>
<button (click)="togglePosition()">切换位置</button>

//testAnimation.component.scss
#brick {
  width: 20rem;
  height: 10rem;
  background-color: aqua;
  margin-left: 0;
}