Angular練習之animations動畫二

返回目錄

回顧

文章基於angular的練手項目。文章目錄
前一篇文章《Angular練習之animations動畫》介紹了在angular中使用動畫的基本方法。

引入動畫模塊>建立動畫對象>在動畫載體上使用。我以爲其核心的內容在建立動畫對象上，今天咱們就來練習建立不一樣的動畫對象trigger

開始練習

建立例子2

ng g component my-animations/exp2

佈局

<h1>動畫實例2</h1>
<div>
  <button (click)="changState('left')">狀態變成左</button>
  <button (click)="changState('right')">狀態變成右</button>
  <button (click)="changState('')">狀態爲空</button>
  <button (click)="changState('center')">狀態爲中</button>
</div>
<br>
<div style="height: 100px;width: 100px;background-color: black" [@box]="boxState"></div>

ts

import { Component, OnInit } from '@angular/core';
import {boxAnimate2} from "../animations"
@Component({
  selector: 'app-exp2',
  templateUrl: './exp2.component.html',
  animations: [
    boxAnimate2
  ]
})
export class Exp2Component implements OnInit {
  // 狀態
  private boxState='';
  constructor() { }

  ngOnInit() {
  }
  changState(state){
    this.boxState = state;
  }
}

寫動畫效果,只定義狀態。

以下只寫兩個狀態看看效果。

// 定義一個動畫，左右兩個狀態加上顏色變化更容易理解吧
export const boxAnimate2 = trigger('box', [
  // 定義一個狀態left
  state('left', style({ transform: 'translate3d(0,0,0)',background:'red' })),
  // 定義另一個狀態right
  state('right', style({ transform: 'translate3d(200%,0,0)',background:'blue' })),
]);

添加任意動畫過程transition

// 定義運動過程(從任意到任意)
  transition('* => *', animate(500)),

入場動畫void => *

注意定義順序,定義的順序換下位置，能夠嘗試下效果。我就不演示了

// 入場動畫
  transition("void => *", [
    style({ opacity: 0,transform: 'translate3d(200%,200%,0)'}),
    animate(500)
  ]),
  // 定義運動過程(從任意到任意)
  transition('* => *', animate(500)),

":enter"和":leave"

對於"void => *"官方還給出另外一種寫法":enter"。同時也有相反效果的":leave"

咱們添加一個按鈕，修改佈局以下：

<button (click)="changShow()">顯示/隱藏</button>

<div *ngIf="show" style="height: 100px;width: 100px;background-color: black" [@box]="boxState"></div>

ts

private show= false;
  changShow(){
    this.show=!this.show;
  }

修改動畫效果

//入場動畫
  transition(":enter", [
    style({ opacity: 0,transform: 'translate3d(200%,200%,0)'}),
    animate(500)
  ]),
  // 出場動畫
  transition(":leave", [
    style({ opacity: 1}),
    animate(500, style({ opacity: 0,transform: 'translate3d(200%,200%,0)'}))
  ]),

小結

在上面的動畫定義中使用了style。且在兩個不一樣的地方都定義了。這有什麼做用呢，讀者本身對比效果體會吧。

基於關鍵幀(Keyframes)的多階段動畫

經過定義動畫的關鍵幀，能夠把兩組樣式之間的簡單轉場，升級成一種更復雜的動畫，它會在轉場期間經歷一個或多箇中間樣式。
每一個關鍵幀均可以被指定一個偏移量，用來定義該關鍵幀將被用在動畫期間的哪一個時間點。偏移量是一個介於0(表示動畫起點)和1(表示動畫終點)之間的數組。

這裏佈局和ts代碼我就跳過了。主要看transition的定義和效果

export const KeyframesAnimate = trigger('KeyframesAnimate',[
  //入場動畫
  transition(":enter", [
    animate(500, keyframes([
      style({opacity: 0, transform: 'translate3d(-400%,0,0)', offset: 0}),
      style({opacity: 0.5, transform: 'translate3d(-150%,-50%,0)',  offset: 0.3}),
      style({opacity: 1, transform: 'translate3d(0,10%,0)',  offset: 0.7}),
      style({opacity: 1, transform: 'translate3d(0,0,0)',     offset: 1.0})
    ]))
  ]),
  // 出場動畫
  transition(":leave", [
    animate(500, keyframes([
      style({opacity: 1, transform: 'translate3d(0,0,0)',     offset: 0}),
      style({opacity: 1, transform: 'translate3d(0,10%,0)', offset: 0.3}),
      style({opacity: 0.5, transform: 'translate3d(150%,-50%,0)',  offset: 0.7}),
      style({opacity: 0, transform: 'translate3d(400%,0,0)',  offset: 1.0})
    ]))
  ]),

]);

並行動畫組(Group)

export const GroupAnimate = trigger('GroupAnimate',[
  //入場動畫
  transition(":enter", [
    style({ opacity: 0,width: '0px',height: '0px',transform: 'translateX(-200%)'}),
    group([
      animate('1s ease', style({transform: 'translateX(0)'})),
      animate('1s 200ms ease', style({width: '100px'})),
      animate('1s 200ms ease', style({height: '100px'})),
      animate('0.5s', style({opacity: 1})),
    ])
  ]),
]);

總結

• 任意兩個狀態之間切換觸發動畫效果
• 入場和出場
• Keyframes實現串聯動畫
• Group實現並行動畫
• 時間軸——等待100毫秒，而後運行200毫秒，而且帶緩動：'0.2s 100ms ease-out'
• 這個動畫trigger是寫在單獨文件中的，做爲一個變量導出的，咱們是否是能夠封裝成一個npm包呢。

源碼

源碼放在github開源社區上面，隨時會更新。因此你下載最新版本的時候會與該文章描述的略有差別。
github地址：https://github.com/yiershan/A...