Angular 動畫

1. 組件中元素動畫應用:

顯示隱藏元素動畫, 需要將動畫應用在需要動畫的元素上；動畫應用格式[@動畫名]=“動畫狀態名稱”

// 安裝動畫庫

npm install @angular/animations --save

// 引入動畫模塊

@NgModule({
   imports: [
    BrowserModule,
BrowserAnimationsModule
  ]

// animation.component.html

<div class="animation_btn_group">

  <a href="javascript:;" (click)="inOut = 'block'">出場動畫</a>

  <a href="javascript:;" (click)="inOut='none'">離場動畫</a>

</div>

<div class="animation_content">

  <div class="animation_item" [@inoutAnimation]="inOut">Welcome !!!</div>

</div>



// animation.component.ts

@Component({

  selector: 'app-animation',

  templateUrl: './animation.component.html',

  animations: [

    trigger('inAnimation', [ // 基礎動畫

    state('block', style({ opacity: 1, transform: 'scale(.8, .8)'})),

    state('none', style({ opacity: 0, transform: 'scale(0.5, .1)'})),

    transition('none => block', animate('1s ease-in')),

    transition('block => none', animate('1s ease-out'))

]);

]

})

2. 切換路由動畫應用:

路由切換時組件進場/ 出場動畫；需要將動畫應用在切換的組件的最外層元素上；

• routerLink(Directive) -鏈接到指定的路由;

• routerLinkActive(Directive) - 當此鏈接指向的路由激活時，往宿主元素上添加一個 CSS 類;

• router-outlet - 頁面占位符，顯示路由切換時需要渲染的組件；

// 安裝動畫庫

npm install @angular/animations --save

// 引入動畫模塊

@NgModule({
   imports: [
    BrowserModule,
    BrowserAnimationsModule
  ]


// app.component.html

<p><a href="javascript:;" routerLink="/page1" routerLinkActive="active">組件1</a></p>
<p><a href="javascript:;" routerLink="/page2" routerLinkActive="active">組件2</a></p>


<router-outlet></router-outlet>



//page1.component.ts

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  animations: [

     trigger('inoutAnimation', [ // * 代表任何狀態；void代表進場狀態，一個元素尚未被掛載到視圖；
        transition(':enter', [ // 進場、出場；幀動畫
        animate(3000, keyframes([
        style({opacity: 0, transform: 'translateX(-100%)'}),
        style({opacity: 1, transform: 'translateX(40px)'}),
        style({opacity: 1, transform: 'translateX(0)'})
        ])),
    ]),
    transition(':leave', [
    animate(3000, keyframes([
    style({opacity: 1, transform: 'translateX(-0)'}),
    style({opacity: 0, transform: 'translateX(-15px)'}),
    style({opacity: 0, transform: 'translateX(-100%)'}),
        ]))
    ]) 

]
})

// page1.component.html

<div [@inoutAnimation]>
   page1頁面
</div>



// page2同理

//page2.component.ts

@Component({
  selector: 'app-page2',
  templateUrl: './page2.component.html',
  animations: [

     trigger('inoutAnimation', [ // * 代表任何狀態；void代表進場狀態，一個元素尚未被掛載到視圖；
        transition(':enter', [ // 進場、出場；幀動畫
        animate(3000, keyframes([
        style({opacity: 0, transform: 'translateX(-100%)'}),
        style({opacity: 1, transform: 'translateX(40px)'}),
        style({opacity: 1, transform: 'translateX(0)'})
        ])),
    ]),
    transition(':leave', [
    animate(3000, keyframes([
    style({opacity: 1, transform: 'translateX(-0)'}),
    style({opacity: 0, transform: 'translateX(-15px)'}),
    style({opacity: 0, transform: 'translateX(-100%)'}),
        ]))
    ]) 

]
})

// page2.component.html

<div [@inoutAnimation]>
   page1頁面
</div>


// 路由app.routing.ts
const routes: Routes = [
  {path: 'page1', component:Page1Component, data: {title: '頁面1'}},
  {path: 'page2', component:Page2Component, data: {title: '頁面2'}}, 
];

3. 封裝動畫庫

若有重復動畫，需要封裝動畫庫；或者我們需要代碼簡潔，低耦合時，可以封裝動畫庫；

// 安裝動畫庫

npm install @angular/animations --save

// 引入動畫模塊

@NgModule({
   imports: [
    BrowserModule,
    BrowserAnimationsModule
  ]


// 新建animate.ts動畫庫文件

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

export const inAnimation = trigger('inAnimation', [ // 基礎動畫
  state('block', style({ opacity: 1, transform: 'scale(.8, .8)'})),
  state('none', style({ opacity: 0, transform: 'scale(0.5, .1)'})),
  transition('none => block', animate('1s ease-in')),
  transition('block => none', animate('1s ease-out'))
]);
export const inOutAnimation = trigger('inoutAnimation', [ // * 代表任何狀態；void代表進場狀態，一個元素尚未被掛載到視圖；
  transition(':enter', [ // 進場、出場；幀動畫
    animate(3000, keyframes([
      style({opacity: 0, transform: 'translateX(-100%)'}),
      style({opacity: 1, transform: 'translateX(40px)'}),
      style({opacity: 1, transform: 'translateX(0)'})
    ])),
  ]),
  transition(':leave', [
    animate(3000, keyframes([
      style({opacity: 1, transform: 'translateX(-0)'}),
      style({opacity: 0, transform: 'translateX(-15px)'}),
      style({opacity: 0, transform: 'translateX(-100%)'}),
    ]))
  ])
]);

上面兩個動畫我們可以修改為:

• 動畫一(組件中元素動畫應用)

// animation.component.ts

import {inAnimation, inOutAnimation} from './animation.ts';
@Component({
  selector: 'app-animation',
  templateUrl: './animation.component.html',
  animations: [inAnimation, inOutAnimation]

})

// animation.component.html不需要修改

• 動畫二（切換路由動畫應用）

// page1.component.ts

import {inAnimation, inOutAnimation} from './animation.ts';

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  animations: [inAnimation, inOutAnimation]

})



// page2.component.ts

import {inAnimation, inOutAnimation} from './animation.ts';

@Component({
  selector: 'app-page2',
  templateUrl: './page2.component.html',
  animations: [inAnimation, inOutAnimation]

})



// 別的文件不需要修改

動畫方法介紹：

1. @angular/animations庫里面的方法介紹：

• trigger: 創建一個有名字的動畫觸發器，包含一個 state() 和 transition() 的列表，當此觸發器的綁定表達式發生變化時，它們就會重新求值。
• state: 在附加到元素的觸發器上，聲明一個動畫狀態及其此狀態下的樣式；
• transition: 聲明一個轉場動畫，以便在滿足給定條件時運行一系列動畫步驟。
• keyframe: 可定義一組動畫樣式，每個樣式都關聯着一個可選的 offset 值(若未手動指定，則會自動計算偏移量).
• query: 在動畫序列中正在播放的元素中查找一個或多個內部元素;
• group: 定義一個可以並行運行的動畫步驟列表。
• sequence: 定義一個動畫步驟列表，逐個依次運行它們.
• animate: 定義一個動畫步驟，它把一些樣式信息和時序信息組合在一起。第一個參數代表動畫過程執行時間，第二個參數代表動畫延遲執行時間, 第三個參數代表緩動效果。

2. 狀態：

• void：一個元素尚未被掛載到視圖; *代表：任何狀態;
• void => * : 進場，也可以寫成:enter , 是匹配任何動畫狀態， => *不會觸發轉場動畫
• * => void : 離場,也可以寫成:leave, void是代表元素還沒附加到視圖時候的特殊狀態