大綱

1、angular動(dòng)畫的相關(guān)概念
2、angular動(dòng)畫的綁定方式
3、angular動(dòng)畫代碼實(shí)例

1、angular動(dòng)畫的相關(guān)概念

1.1、trigger（觸發(fā)器）

<!--
    所有的trigger都可以直接綁定element
    像這樣，只要state1 有改變，trigger都會(huì)觸發(fā)。
    在trigger世界里，是能控制state 和 transition。
-->
<div [@state]="state1" ></div>

1.2、state是轉(zhuǎn)場(chǎng)的“場(chǎng)”，state（狀態(tài)）

/*
    1、*(通配符)狀態(tài):*(通配符)狀態(tài)匹配任何動(dòng)畫狀態(tài)。
        當(dāng)定義那些不需要管當(dāng)前處于什么狀態(tài)的樣式及轉(zhuǎn)場(chǎng)時(shí)，這很有用。

        當(dāng)該元素的狀態(tài)從 active 變成任何其它狀態(tài)時(shí)，active => * 轉(zhuǎn)場(chǎng)都會(huì)生效。
        當(dāng)在任意兩個(gè)狀態(tài)之間切換時(shí)，* => * 轉(zhuǎn)場(chǎng)都會(huì)生效。
        * 通配符狀態(tài)也能匹配 void。
        
    2、void 狀態(tài)
        有一種叫做 void 的特殊狀態(tài)，它可以應(yīng)用在任何動(dòng)畫中。
        它表示元素沒有被附加到視圖。
        這種情況可能是由于它尚未被添加進(jìn)來或者已經(jīng)被移除了。 
        void 狀態(tài)在定義“進(jìn)場(chǎng)”和“離場(chǎng)”的動(dòng)畫時(shí)會(huì)非常有用。
        比如當(dāng)一個(gè)元素離開視圖時(shí)，* => void 轉(zhuǎn)場(chǎng)就會(huì)生效，
        而不管它在離場(chǎng)以前是什么狀態(tài)。
        
    3、還有一些:enter、:leave等狀態(tài)是angular本身自帶的，
      比如:enter代表路由進(jìn)場(chǎng)、:leave代表路由出場(chǎng)
*/
state("void", style({ height: 0 })) //void是保留字，是沒有東西
state("*", style({ height: 0 }))  //*是保留字，是default
state("closed", style({ height: 0 }))
state("open, visible", style({ height: "*" }))

1.3、transition是轉(zhuǎn)場(chǎng)，state去到下一個(gè)state

/**
  轉(zhuǎn)場(chǎng)的書寫方式有很多種，如下是一些常見的轉(zhuǎn)場(chǎng)
**/
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、基礎(chǔ)動(dòng)畫animate

/*
    animate 使用方式就很多 （可以控制過渡時(shí)長，延遲，和過渡動(dòng)作，結(jié)束動(dòng)畫）
    動(dòng)畫的方式主要有兩種：
        1、簡單的轉(zhuǎn)場(chǎng)方式，
              通過自定義的兩種狀態(tài)之間的樣式轉(zhuǎn)換從而形成動(dòng)畫
        2、復(fù)雜的轉(zhuǎn)場(chǎng)方式，
              通過自定義動(dòng)畫幀的方式從而詳細(xì)定義動(dòng)畫不同時(shí)間狀態(tài)下的轉(zhuǎn)場(chǎng)方式
*/
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、動(dòng)畫時(shí)間線

/*
    對(duì)每一個(gè)動(dòng)畫轉(zhuǎn)場(chǎng)效果，有三種時(shí)間線屬性可以調(diào)整：
        持續(xù)時(shí)間(duration)、延遲(delay)和緩動(dòng)(easing)函數(shù)。
    它們被合并到了一個(gè)單獨(dú)的轉(zhuǎn)場(chǎng)時(shí)間線字符串。
    
    持續(xù)時(shí)間：持續(xù)時(shí)間控制動(dòng)畫從開始到結(jié)束要花多長時(shí)間。
    
    延遲：延遲控制的是在動(dòng)畫已經(jīng)觸發(fā)但尚未真正開始轉(zhuǎn)場(chǎng)之前要等待多久。
    
    緩動(dòng)函數(shù)：緩動(dòng)函數(shù)用于控制動(dòng)畫在運(yùn)行期間如何加速和減速。
      比如：使用 ease-in 函數(shù)意味著動(dòng)畫開始時(shí)相對(duì)緩慢，然后在進(jìn)行中逐步加速。
      可以通過在這個(gè)字符串中的持續(xù)時(shí)間和延遲后面添加第三個(gè)值來控制使用哪個(gè)緩動(dòng)函數(shù)
      (如果沒有定義延遲就作為第二個(gè)值)。
*/

1.5、并行動(dòng)畫組(Group)

/*
    你可能會(huì)希望為同時(shí)發(fā)生的幾個(gè)動(dòng)畫配置不同的時(shí)間線。
    比如，同時(shí)對(duì)兩個(gè) CSS 屬性做動(dòng)畫，但又得為它們定義不同的緩動(dòng)函數(shù)。

    這種情況下就可以用動(dòng)畫組來解決了。
    在這個(gè)例子中，同時(shí)在進(jìn)場(chǎng)和離場(chǎng)時(shí)使用了組，以便能讓它們使用兩種不同的時(shí)間線配置
    它們被同時(shí)應(yīng)用到同一個(gè)元素上，但又彼此獨(dú)立運(yùn)行：
*/
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動(dòng)畫的綁定方式

2.1在當(dāng)前組件中自定義動(dòng)畫，然后使用

2.1.1 在組件中定義動(dòng)畫

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狀態(tài)改變時(shí)，觸發(fā)動(dòng)畫
    trigger('position',[
      //position為left時(shí)的樣式
      state('left',style({
        'margin-left': '0',
        'background-color':'yellow'
      })),
      //position為right時(shí)的樣式
      state('right',style({
        'margin-left': '200px',
        'background-color':'blue'
      })),
      //狀態(tài)切換時(shí)的動(dòng)畫設(shè)置
      transition('left => right',animate('1000ms ease-in')),
      transition('right => left',animate('1000ms ease-out'))
    ])
  ]
})
export class TestAnimationComponent implements OnInit {
  currentPosition = 'left';
  constructor() { }
  ngOnInit() {
  }
  /**
   * 按鈕事件，切換狀態(tài)
   */
  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、通過事件改變狀態(tài)，從而觸發(fā)動(dòng)畫效果

當(dāng)傳入的狀態(tài)由left轉(zhuǎn)變?yōu)閞ight的時(shí)候或者從right轉(zhuǎn)變?yōu)閘eft的時(shí)候都會(huì)觸發(fā)相應(yīng)的狀態(tài)動(dòng)畫

2.2、在非當(dāng)前組件中自定義動(dòng)畫，然后引入并使用

2.2.1、定義一個(gè)自定義動(dòng)畫

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、在組件中引入并調(diào)用

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、在模板中綁定動(dòng)畫并通過事件改變動(dòng)畫狀態(tài)從而調(diào)用轉(zhuǎn)場(chǎng)動(dòng)畫

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

3、angular動(dòng)畫代碼實(shí)例

/*
  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狀態(tài)改變時(shí)，觸發(fā)動(dòng)畫
    trigger('position',[
      //position為left時(shí)的樣式
      state('left',style({
        'margin-left': 0,
        'background-color':'yellow'
      })),
      //position為right時(shí)的樣式
      state('right',style({
        'margin-left': 200,
        'background-color':'blue'
      })),
      //狀態(tài)切換時(shí)的動(dòng)畫設(shè)置
      transition('left => right',animate('1000ms ease-in')),
      transition('right => left',animate('1000ms ease-out'))
    ])
  ]
})
export class TestAnimationComponent implements OnInit {
  currentPosition = 'left';
  constructor() { }
  ngOnInit() {
  }
  /**
   * 按鈕事件，切換狀態(tài)
   */
  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;
}

代碼資料

angular示例代碼中的angular-animation，里面不僅有本教程我講解的代碼實(shí)例，還有我自定義的一些動(dòng)畫的使用，希望能給各位提供幫助。