angular動畫知識點以及代碼樣例

原文地址

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

大綱

　　一、angular動畫的相關概念
　　二、angular動畫的綁定方式
　　三、angular動畫代碼實例

一、angular動畫的相關概念

   1.一、trigger（觸發器）

<!--
    全部的trigger均可以直接綁定element
    像這樣，只要state1 有改變，trigger都會觸發。
    在trigger世界裏，是能控制state 和 transition。
-->
<div [@state]="state1" ></div>

   1.二、state是轉場的「場」，state（狀態）

/*
    一、*(通配符)狀態:*(通配符)狀態匹配任何動畫狀態。
        當定義那些不須要管當前處於什麼狀態的樣式及轉場時，這頗有用。

        當該元素的狀態從 active 變成任何其它狀態時，active => * 轉場都會生效。
        當在任意兩個狀態之間切換時，* => * 轉場都會生效。
        * 通配符狀態也能匹配 void。
        
    二、void 狀態
        有一種叫作 void 的特殊狀態，它能夠應用在任何動畫中。
        它表示元素沒有被附加到視圖。
        這種狀況多是因爲它還沒有被添加進來或者已經被移除了。 
        void 狀態在定義「進場」和「離場」的動畫時會很是有用。
        好比當一個元素離開視圖時，* => void 轉場就會生效，
        而無論它在離場之前是什麼狀態。
        
    三、還有一些: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.三、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.四、基礎動畫animate

/*
    animate 使用方式就不少 （能夠控制過渡時長，延遲，和過渡動做，結束動畫）
    動畫的方式主要有兩種：
        一、簡單的轉場方式，
              經過自定義的兩種狀態之間的樣式轉換從而造成動畫
        二、複雜的轉場方式，
              經過自定義動畫幀的方式從而詳細定義動畫不一樣時間狀態下的轉場方式
*/
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.五、動畫時間線

/*
    對每個動畫轉場效果，有三種時間線屬性能夠調整：
        持續時間(duration)、延遲(delay)和緩動(easing)函數。
    它們被合併到了一個單獨的轉場時間線字符串。
    
    持續時間：持續時間控制動畫從開始到結束要花多長時間。
    
    延遲：延遲控制的是在動畫已經觸發但還沒有真正開始轉場以前要等待多久。
    
    緩動函數：緩動函數用於控制動畫在運行期間如何加速和減速。
      好比：使用 ease-in 函數意味着動畫開始時相對緩慢，而後在進行中逐步加速。
      能夠經過在這個字符串中的持續時間和延遲後面添加第三個值來控制使用哪一個緩動函數
      (若是沒有定義延遲就做爲第二個值)。
*/

   1.六、並行動畫組(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
        }))
      ])
    ])
  ])
]

二、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.二、在模板中綁定使用

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

     2.1.三、經過事件改變狀態，從而觸發動畫效果

　　當傳入的狀態由left轉變爲right的時候或者從right轉變爲left的時候都會觸發相應的狀態動畫

   2.二、在非當前組件中自定義動畫，而後引入並使用

     2.2.一、定義一個自定義動畫

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.二、在組件中引入並調用

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.三、在模板中綁定動畫並經過事件改變更畫狀態從而調用轉場動畫

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

三、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;
}

　　

 代碼資料

angular示例代碼中的angular-animation，裏面不只有本教程我講解的代碼實例，還有我自定義的一些動畫的使用，但願能給各位提供幫助。