アニメーションとはどんなものか？
例えば、文字を・・・
・大きくしたり、小さくしたり
・右に動かしたり、左に動かしたり
・薄くしたり、濃くしたり
・・・のようなことを、
Webページ上に独自の描画効果を表示することです。
Windows98が全盛だったときに、
JavaScriptで同じようなコードを書いたことがありますが、
ものすごいコード量だった記憶があります。
これをjQueryを使うことで、
どの程度シンプルにできるのか？（期待を込めて）も学んでみたいと思います。
◆主な用途
こんなときやこんなものに使えます。●利用したいシーン
1.Webサイト（特にリッチサイト）を着飾りたいとき
2.Webサイトにトリックを埋め込みたいとき
●利用したいコンテンツ
1.入力（入力後、次のアンケート項目をストレス無く表示させる）
2.背景（雪を降らせるなど）
上記に限らず、使い手次第で様々な用途に使えます。
◆主な方法
●アニメーションの方法アニメーションの方法はいくつかあるようです。
1.animateメソッド
2.toggle系メソッドを駆使する
3.CSS3を使う
3.のCSS3は、まだどんなものかわかっていないので、今後の課題とします。
頑張れば2.の「toggle系メソッド」でも実現できると思いますが、
今の段階ではあまりにも難題のため、今回は「animateメソッド」に特化して学びたいと思います。
●animateメソッドの引数
引数を見ることで、animateメソッドにどんな用途があるのかが見えてきます。
引数には
1.properties
2.[任意]duration
3.[任意]easing
4.[任意]complete
があります。
1.properties
アニメーションによって、どのようなデザインに変化させたいのか？を指定します。
具体的には、width、opacity、borderLeftWidth、fontSizeのようなstyle属性を変化させる情報を指定します。
※注意事項として、各項目IDはキャメルケースで表記する必要があります。
（例：border-left-width ⇒ borderLeftWidth）
2.[任意]duration
アニメーションの動作期間を指定します。
『"slow"、"normal"、"fast"のいずれかの文字列』、または、『ミリ秒単位の数値』を指定します。
"slow"などの文字列を指定した時の秒数は以下の通りです。
durationに「2000」を指定すると、2秒間かけてアニメーションを完了させます。
なお、未指定時のデフォルト値は「400」です。
3.[任意]easing
値の変化量を調節するときに指定します。
アニメーションの変化に抑揚をつけたいときに指定すると説明すればわかりやすいでしょうか。
標準では"swing"と"linear"が用意されており、
2つの違いを以下に記します。
</table>
上のように書きましたが、
実際に動かしてみると、
左から右に一直線上に動くような変化で比較しないと、
どちらも似たようなものに思えます。
（私がこのようなアニメーションの分野に疎いということもあるのかも知れませんが）
ただし、独自関数を指定することで、
「最初だけ早く」したり、「最後だけ早く」したり、
「起伏のある変化をする」など、独自の描画効果を得ることもできるようになっています。
なお、未指定時のデフォルト値は「"swing"」です。
4.[任意]complete
最後の引数は、アニメーション終了時に実行する関数を指定できます。
例えば・・・アラート出力、CSS制御（フォントを変えるなど）、HTML制御（文言出力など）ができます。
次回、animateメソッドのサンプルを紹介したいと思います。
それでは、また。
1.properties
アニメーションによって、どのようなデザインに変化させたいのか？を指定します。
具体的には、width、opacity、borderLeftWidth、fontSizeのようなstyle属性を変化させる情報を指定します。
※注意事項として、各項目IDはキャメルケースで表記する必要があります。
（例：border-left-width ⇒ borderLeftWidth）
2.[任意]duration
アニメーションの動作期間を指定します。
『"slow"、"normal"、"fast"のいずれかの文字列』、または、『ミリ秒単位の数値』を指定します。
"slow"などの文字列を指定した時の秒数は以下の通りです。
| 文字列 | ミリ秒 |
|---|---|
| slow | 600 |
| normal | 400 |
| fast | 200 |
durationに「2000」を指定すると、2秒間かけてアニメーションを完了させます。
なお、未指定時のデフォルト値は「400」です。
3.[任意]easing
値の変化量を調節するときに指定します。
アニメーションの変化に抑揚をつけたいときに指定すると説明すればわかりやすいでしょうか。
標準では"swing"と"linear"が用意されており、
2つの違いを以下に記します。
| 指定値 | 変化量 例：10秒で0⇒10cmになる場合 |
|---|---|
| linear | 単調な変化 例：毎秒1㎝ずつ大きくなる |
| swing | 緩急のある変化 例：最初と最後の2秒は1㎝しか変わらないが、途中の6秒間の変化が大きい |
</table>
上のように書きましたが、
実際に動かしてみると、
左から右に一直線上に動くような変化で比較しないと、
どちらも似たようなものに思えます。
（私がこのようなアニメーションの分野に疎いということもあるのかも知れませんが）
ただし、独自関数を指定することで、
「最初だけ早く」したり、「最後だけ早く」したり、
「起伏のある変化をする」など、独自の描画効果を得ることもできるようになっています。
なお、未指定時のデフォルト値は「"swing"」です。
4.[任意]complete
最後の引数は、アニメーション終了時に実行する関数を指定できます。
例えば・・・アラート出力、CSS制御（フォントを変えるなど）、HTML制御（文言出力など）ができます。
次回、animateメソッドのサンプルを紹介したいと思います。
それでは、また。
