アニメーションの指定方法いろいろ
リスト1のアニメーション指定に用いたstyle、transition、animateについて説明します。
表示形式を指定するstyle
styleには、CSSで一般的に利用される、HTML要素の表示形式を表すプロパティが指定できます。一例を表1に示します。
| 名前 | 意味 |
|---|---|
| backgroundColor | 背景色 |
| width | 幅 |
| height | 高さ |
| opacity | 透明度（0：透明～1：不透明） |
| transform | 要素に対する変形方法 |
ここでtransformは、CSSのtransformプロパティと同じもので、scale（拡大縮小）、translate（平行移動）、rotate（回転）などの指定ができます。詳細はCSSのtransformプロパティに関する資料を参照してください。
状態切り替えの方向を決めるtransition
transitionには、画面の表示状態を切り替える方向を「=>」記号で指定します。
transition("default => selected", ...),// defaultからselectedへの切り替え
transition("selected => default", ...) // selectedからdefaultへの切り替え
また、「<=>」、「*」記号を使って、リスト3のような略式記法もできます。
transition("default <=> selected", ...),// 双方向の切り替え
transition("default => *", ...) // defaultから任意の状態に切り替え
アニメーション時間と速度変化を指定するanimate
transitionの第2引数に指定するanimateには、アニメーションの時間と速度変化を指定します。主な指定例を表2に示します。
| 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のような指定ができます。
| 名前 | 意味 |
|---|---|
| ease-in | 最初は遅く、だんだん速くなる |
| ease-out | 最初は速く、だんだん遅くなる |
| ease-in-out | 最初は遅く、だんだん速くなり、最後にだんだん遅くなる |
| linear | 最初から最後まで同じ速度 |
transitionにアニメーションを指定する例
リスト1では、ある状態から別の状態に切り替えるときに、各状態の表示形式を滑らかに補完してアニメーションしますが、図2のように、状態の表示形式とは別個にアニメーションを設定することもできます。
図2のアニメーション記述はリスト4のようになります。
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番）に切り替わります。
