ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

ステータスとは何ですか？ Angular でのアニメーションの詳細については、こちらをご覧ください。

著者：Eve Cole 更新時間：2022-05-31 11:34:43
この記事では、Angular のアニメーションについて詳しく説明し、アニメーションの作成方法を簡単に紹介し、キーフレーム アニメーション、アニメーション コールバック、再利用可能なアニメーション、インターリーブ アニメーション、その他の知識ポイントについて説明します。みんな！

州

1. 状態とは何ですか

? 状態は、移動のさまざまな段階で移動される要素のスタイルを表します。 【おすすめ関連チュートリアル：「angularチュートリアル」】

ここに画像の説明を挿入します

2. 状態の種類

Angular には、 void 、 * 、 customの 3 種類の状態があります。
ここに画像の説明を挿入します
void : この状態は、要素がメモリ内に作成されたがまだ DOM に追加されていない場合、または要素が DOM から削除された場合に発生します

* : 要素が DOM ツリーに挿入された後の状態、または既に要素が DOM ツリーに存在している場合DOM ツリー状態。デフォルト状態

custom : カスタム状態とも呼ばれます。要素はデフォルトでページ上にあり、パネルの折りたたみや展開など、ある状態から別の状態に移動します。

3. 開始アニメーションと終了アニメーション。

:enterアニメーションは、要素が作成された後にアニメーションの形式でユーザーの目の前に表示されることを意味し、エイリアスはvoid => *で表されます。

ここに画像の説明を挿入します
終了アニメーションは、要素が削除される前に実行される別れのアニメーションを指します。終了アニメーションのステータスは* => voidで、別名は:leaveです。

ここに画像の説明を挿入します

すぐに始めましょう

1. アニメーション機能を使用する前に、アニメーション モジュール、つまりBrowserAnimationsModule導入する必要があります。

import { BrowserAnimationsModule } from "@angular/platform-b​​rowser/animations"

@NgModule({
  インポート: [BrowserAnimationsModule]、
})
import class AppModule {}

2. デフォルトのコード分析、todo 削除タスクとタスクの追加

<!-- index.html ファイルに bootstrap.min.css を導入 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<div class="container">
  <h2>Todos</h2>
  <div class="フォームグループ">
    <input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="add todos" />
  </div>
  <ul class="リストグループ">
    <li (click)="removeItem(i)" *ngFor="Todo のアイテムを設定; let i = Index" class="list-group-item">
      {{ アイテム }}
    </li>
  </ul>
</div>
import { Component } from "@angular/core"

@成分（{
  セレクター：「App-Root」、
  templateUrl: "./app.component.html",
  スタイル：[]
})
エクスポート クラス AppComponent {
  // todo リスト todos: string[] = ["Learn Angular", "Learn RxJS", "Learn NgRx"]
	// todoを追加します
  addItem(入力: HTMLInputElement) {
    this.todos.push(input.value)
    input.value = ""
  }
	// todoを削除します
  RemoveItem(インデックス:数値) {
    this.todos.splice(インデックス, 1)
  }

アニメーションを作成します。

トリガー

  • メソッドはアニメーションの作成に使用され、

  • トランジション メソッドはアニメーションのモーション状態、アニメーションの終了またはアニメーションの開始、またはカスタム状態の指定に使用されます。アニメーション。

  • style メソッドは、さまざまな状態の要素に対応するスタイルを設定するために使用されます。

  • animate メソッドは、アニメーションのモーション時間、遅延イベント、モーション フォームなどのモーション パラメーターを設定するために使用されます

。
  アニメーション: [
    //アニメーションを作成します。アニメーション名はスライドです
    トリガー("スライド", [
      // 入口アニメーションを指定します。 注: 文字列の両側にスペースを含めることはできません。また、矢印の両側にスペースを含めることもできません。 // void => * は Enter に置き換えることができます。
      transition("void => *", [
        // 要素に入る前に要素のスタイルを指定します。 style({ opacity: 0, translate: "translateY(40px)" }),
        // 指定元素入场后的样式及运动参数animate(250, style({ opacity: 1, transform: "translateY(0)" }))
      ])、
      //終了アニメーションを指定// * => void は:leave に置き換えることができます
      transition("* => void", [
        //要素が表示された後のスタイルとモーションのパラメータを指定します animate(600, style({ opacity: 0,transform: "translateX(100%)" }))
      ])
    ])
  】
}）
注：エントランスアニメーションの
要素

のデフォルト状態を指定する必要はありません。

  遷移(":入力", [
    style({ 不透明度: 0, 変換: "translateY(40px)" }),
    アニメイト(250)
  ])、
  遷移(":離れる", [
 		animate(600, style({ 不透明度: 0, 変換: "translateX(100%)" }))
  ])
]）

注：アニメーションのモーションパラメーターを設定するには、アニメーションメソッドの1つのパラメーターを文字列タイプ

//アニメーション実行時間遅延時間（オプション）モーションフォーム（オプション）
に変更する必要があります
animate("600ms 1s easy-out", style({ opacity: 0, transform: "translateX(100%)" }))

キーフレーム アニメーション

キーフレームアニメーションは、 keyframesメソッドを使用して定義されています

transition(":leave", [
  アニメート(
    600、
    キーフレーム([
      style({ offset: 0.3, transform: "translateX(-80px)" }),
      style({ offset: 1, transform: "translateX(100%)" })
    ])
  )
])

动画回调

Angularは、アニメーションが開始されたときとアニメーションが完了した後、それぞれアニメーションに関連する2つのコールバック関数を提供します。

<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>
import {AnimationEvent } from "@angular/animations"

start(event:AnimationEvent) {
  console.log（イベント）
}
完了(イベント: アニメーションイベント) {
  コンソール.ログ(イベント)

再利用可能なアニメーションを作成

する

1. アニメーション定義を別のファイルに配置して、複数のコンポーネントの呼び出しを容易にします。

import { アニメート、キーフレーム、スタイル、トランジション、トリガー } from "@angular/animations"

エクスポート const slide = トリガー("スライド", [
  遷移(":入力", [
    style({ 不透明度: 0, 変換: "translateY(40px)" }),
    アニメイト(250)
  ])、
  遷移(":離れる", [
    アニメート(
      600、
      キーフレーム([
        style({ オフセット: 0.3, 変換: "translateX(-80px)" }),
        style({ offset: 1, transform: "translateX(100%)" })
      ])
    )
  ])
])
import { slide } from "./animations"

@成分（{
  アニメーション: [スライド]
})

2、抽取具体的动画定义，方便多动画调用。

import {animate, animation, keyframes, style, transition, trigger, useAnimation} from "@angular/animations"

export const slideInUp = animation([
  style({ opacity: 0, transform: "translateY(40px)" }),
  アニメイト(250)
])

export const slideOutLeft = animation([
  アニメート(
    600,
    キーフレーム([
      style({ オフセット: 0.3, 変換: "translateX(-80px)" }),
      スタイル（{offset：1、transform： "translatex（100％）"}）
    ])
  )
])

const slide = trigger（ "slide"、[
  transition(":enter", useAnimation(slideInUp)),
  transition(":leave", useAnimation(slideOutLeft))
])

3、调用动画时传递运动总时间，延迟时间，运动形式

export const slideInUp = animation(
  [
    style({ opacity: 0, transform: "translateY(40px)" }),
    Animate（ "{{duration}} {{delay}} {{easing}}"）
  ]、
  {
    パラメータ: {
      期間：「400ms」、
      遅延: "0s"、
      緩和：「簡単」
    }
  }
）
transition(":enter", useAnimation(slideInUp, {params: {delay: "1s"}}))

アニメーションを実行するためのクエリ要素

Angular は、要素を検索してアニメーションを作成するためのqueryメソッドを提供します。

「./animations」から { スライド } をインポートします

アニメーション：[
  スライド、
  トリガー("todoアニメーション", [
    遷移(":入力", [
      クエリ("h2", [
        style({ 変換: "translateY(-30px)" }),
        アニメイト(300)
      ]),
      // 子アニメーションをクエリして実行します query("@slide", animateChild())
    ])
  ])
]
<div class="container" @todoAnimations>
  <h2>Todos</h2>
  <ul class="list-group">
    <li
      @スライド
      (クリック)="項目を削除(i)"
      *ngFor="todos の項目を指定します。i = インデックスを指定します"
      class="リストグループ項目"
    >
      {{ アイテム }}
    </li>
  </ul>
</div>

デフォルトでは、親アニメーションが最初に実行され、次に子どものアニメーションgroup使用して実行できます

（ "todoAnimations"）
。
  transition(":enter", [
    グループ（[
      query("h2", [
        style({ 変換: "translateY(-30px)" }),
        animate(300)
      ]),
      query("@slide", animateChild())
    ])
  ])
])

交错动画

Angular は、複数の要素が同じアニメーションを同時に実行する場合に、各要素のアニメーションの実行を順番に遅らせる stagger メソッドを提供します。

transition(":enter", [
  グループ（[
    query("h2", [
      style({ 変換: "translateY(-30px)" }),
      animate(300)
    ]),
    query("@slide", stagger(200, animateChild()))
  ])
]
注：Staggerメソッドは

、クエリメソッド内で

のみ

カスタムステートアニメーション

のみを使用できます。

Angular 提供了state方法用于定义状态。

ここに画像の説明を挿入します

1. デフォルトのコード分析

<div class="container">
  <div class="パネル パネル-デフォルト">
    <div class = "panel-heading"（cli​​ck）= "toggle（）">
      1つのフレームワーク、複数のプラットフォーム、モバイル＆デスクトップ</div>
    <div class="panel-body">
      <p>
        単純な宣言テンプレートを使用して、さまざまな機能をすばやく実装します。使用自定义组件和大量现有组件，扩展模板语言。ほぼすべての IDE で Angular をサポート
        的即时帮助和反馈。所有这一切，都是为了帮助你编写漂亮的应用，而不是绞尽脑汁的让代码“能用”。
      </p>
      <p>
        プロトタイプからグローバル展開まで、AngularはGoogleのサポートを提供できます
        大規模アプリケーション向けの拡張性の高いインフラストラクチャとテクノロジー。
      </p>
      <p>
        通过Web Worker 和服务端渲染，达到在如今(以及未来）的Web
        プラットフォーム上で達成可能な最高速度。 Angular 让你有效掌控可伸缩性。 RxJS、Immutable.js、その他のプッシュ モデルに基づいており、大量のデータ要件に適応できます。
      </p>
      <p>
        Angular の使い方を学ぶ
        アプリケーションを構築し、これらのコードと機能をさまざまなプラットフォーム上のアプリケーションで再利用します。
        Web、モバイル Web、モバイル アプリ、ネイティブ アプリ、デスクトップ ネイティブ アプリ。
      </p>
    </div>
  </div>
</div>
<スタイル>
  。容器 {
    マージントップ: 100px;
  }
  .Panel-Heading {
    カーソル: ポインタ;
  }
</style>
import { Component } from "@angular/core"

@成分（{
  セレクター：「App-Root」、
  templateUrl: "./app.component.html",
  スタイル: []
})
エクスポート クラス AppComponent {
  isExpended: ブール値 = false
  toggle() {
    this.isExpended = !this.isExpended
  }
}

2、创建动画

trigger("expandCollapse", [
  // state メソッドを使用して、折り畳まれた状態要素に対応するスタイルを定義します state(
    「崩壊した」、
    スタイル（{
      height: 0,
      overflow: "hidden",
      パディングトップ：0、
      パディングボトム：0
    })
  ）、
  // state メソッドを使用して、展開された状態要素に対応するスタイルを定義します state("expanded", style({ height: "*", overflow: "auto" })),
  // 展開アニメーションを定義しますtransition("collapsed => Expanded", animate("400msease-out")),
  // 折りたたみアニメーションのtransition("expanded => Collapsed", animate("400msease-in"))を定義します
])
<div class="panel-body" [@expandCollapse]="isExpended ? 'expanded' : 'collapsed'"></div>

ルーティングアニメーション

ここに画像の説明を挿入します

1. ステータス識別子をルートに追加します。この識別子は、ルートがアニメーション

const Routes を実行するときのカスタム状態です。
  {
    パス： ""、
    コンポーネント: ホームコンポーネント、
    PathMatch：「フル」、
    データ： {
      アニメーション：「1」 
    }
  }、
  {
    パス：「アバート」、
    コンポーネント: コンポーネントについて、
    データ： {
      アニメーション：「2」
    }
  }、
  {
    パス：「ニュース」、
    コンポーネント: ニュースコンポーネント、
    データ： {
      アニメーション：「3」
    }
  }
]

2. ルーティング ソケット オブジェクトを通じてルーティング ステータス識別子を取得し、その識別子をアニメーションの呼び出し元に渡して、実行される現在の状態をアニメーションに実行させます。

<div class="routerContainer" [@routerAnimations]= Preaderoute（アウトレット） ">
  <ルーター-アウトレット #outlet="outlet"></ルーター-アウトレット>
</div>
「@angular/router」からImport {routeroutlet}

エクスポート クラス AppComponent {
  prepareRoute(アウトレット: RouterOutlet) {
    戻る （
      アウトレット&&
      outlet.activatedRoutedata &&
      アウトレット.activatedRouteData.animation
    )
  }
}

3. RouterContainerを相対的なポジショニングに設定し、その直接的な第1レベルの子要素を絶対的な位置付け

/ * styles.css * /
に設定します
.routerContainer {
  位置: 相対的;
}

.routerContainer > * {
  位置: 絶対;
  左: 0;
  トップ: 0;
  幅: 100%;
}

4。アニメーション

トリガーを作成（ "routeranimations"、[
  transition("one => two, one => three, two => three", [
    query(":enter", style({transform: "translateX(100%)", opacity: 0 })),
    グループ（[
      クエリ（
        "：入力"、
        アニメート(
          「0.4s Ease-In」、
          style({ transform: "translateX(0)", opacity: 1 })
        )
      ）、
      クエリ（
        "：離れる"、
        アニメート（
          "0.4s ease-out",
          スタイル（{
            transform: "translateX(-100%)",
            不透明度: 0
          })
        )
      )
    ])
  ]）、
  transition("3 => 2、3 => 1、2 => 1", [
    query(
      "：入力"、
      スタイル（{transform： "translatex（-100％）"、opacity：0}）
    ）、
    グループ（[
      query(
        "：入力"、
        アニメート（
          「0.4s Ease-In」、
          style（{transform： "translatex（0）"、opacity：1}）
        )
      ）、
      クエリ（
        "：離れる"、
        アニメート（
          「0.4s Ease-Out」、
          スタイル（{
            変換: "translateX(100%)",
            不透明：0
          })
        )
      )
    ])
  ])
]）

プログラミング関連の知識については、プログラミングビデオをご覧ください！ ！

上記はステータスとは何ですか？ AngularのAnimationの詳細については、PHP Chinese Webサイトの他の関連記事に注意してください。
関連記事