SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

次世代Webアプリケーションフレームワーク「Angular」の活用

「Angular」のアニメーション機能で動きのあるWebページを作る

次世代Webアプリケーションフレームワーク「Angular」の活用 第8回

  • X ポスト
  • このエントリーをはてなブックマークに追加

アニメーションの指定方法いろいろ

 リスト1のアニメーション指定に用いたstyle、transition、animateについて説明します。

表示形式を指定するstyle

 styleには、CSSで一般的に利用される、HTML要素の表示形式を表すプロパティが指定できます。一例を表1に示します。

表1 styleに指定できるプロパティの例
名前 意味
backgroundColor 背景色
width
height 高さ
opacity 透明度(0:透明~1:不透明)
transform 要素に対する変形方法

 ここでtransformは、CSSのtransformプロパティと同じもので、scale(拡大縮小)、translate(平行移動)、rotate(回転)などの指定ができます。詳細はCSSのtransformプロパティに関する資料を参照してください。

状態切り替えの方向を決めるtransition

 transitionには、画面の表示状態を切り替える方向を「=>」記号で指定します。

リスト2 transitionの指定例
transition("default => selected", ...),// defaultからselectedへの切り替え
transition("selected => default", ...) // selectedからdefaultへの切り替え

 また、「<=>」、「*」記号を使って、リスト3のような略式記法もできます。

リスト3 transitionの略式記法
transition("default <=> selected", ...),// 双方向の切り替え
transition("default => *", ...)         // defaultから任意の状態に切り替え

アニメーション時間と速度変化を指定するanimate

 transitionの第2引数に指定するanimateには、アニメーションの時間と速度変化を指定します。主な指定例を表2に示します。

表2 animateの指定例
No. 名前 意味
1 animate(250) 250msでアニメーション
2 animate("500ms") 500msでアニメーション
3 animate("1s 500ms") 500ms待機後、1秒でアニメーション
4 animate("2s ease-in") 2秒でアニメーション、ease-inでイージング

 No.1のように数字だけで指定するとミリ秒として解釈され、No.2、3のように数字に「ms」をつけた文字列はミリ秒、「s」をつけた文字列は秒として解釈されます。No.3のように時間を2個指定すると、1個目がアニメーションの時間、2個目がアニメーション前の待機時間になります。No.4で指定している「ease-in」は、アニメーション速度を変化させるイージングの設定で、表3のような指定ができます。

表3 イージングの指定例
名前 意味
ease-in 最初は遅く、だんだん速くなる
ease-out 最初は速く、だんだん遅くなる
ease-in-out 最初は遅く、だんだん速くなり、最後にだんだん遅くなる
linear 最初から最後まで同じ速度

transitionにアニメーションを指定する例

 リスト1では、ある状態から別の状態に切り替えるときに、各状態の表示形式を滑らかに補完してアニメーションしますが、図2のように、状態の表示形式とは別個にアニメーションを設定することもできます。

図2 transitionにアニメーションを指定する例(002_anim2)
図2 transitionにアニメーションを指定する例(002_anim2)

 図2のアニメーション記述はリスト4のようになります。

リスト4 transitionにアニメーションを指定する例(002_anim2/src/app/app.component.ts)
transition("default => selected", [
  style({ // 切り替え開始時のスタイル ...(1)
    backgroundColor:"#dd55ff", transform:"scale(0.6)"
  }),
  animate("700ms ease-in",
    style({ // 切り替え終了時のスタイル ...(2)
      backgroundColor:"#d4aa00", transform:"scale(1.8)"
    })
  )
]),

 アニメーションを開始すると、default状態のスタイル(図2の1番)から(1)のスタイル(図2の2番)に切り替わり、その後(2)のスタイル(図2の3番)までアニメーションします。アニメーション終了後は、selected状態のスタイル(図2の4番)に切り替わります。

次のページ
voidで表示/非表示時のアニメーションを指定

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
次世代Webアプリケーションフレームワーク「Angular」の活用連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10118 2017/04/25 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング