アニメーションの指定方法いろいろ
リスト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番)に切り替わります。