Wijmo UI for the Web
アニメーション
| Wijmo ユーザーガイド > 概念 > アニメーション |
wijmo ウィジェットでは、多くのアニメーション効果を利用できます。ほとんどのアニメーションオプションでは、アニメーションのタイプと、ウィジェットに適用するイージングを選択できます。
使用できるアニメーション効果については、wijcombobox アニメーションデモを参照してください。アニメーション効果の詳細については、jQuery Effects ドキュメントを参照してください。
以下のアニメーション効果は、ほとんどの wijmo ウィジェットで使用できます。
効果一覧
この効果は、要素をコンテナでラップし、窓のブラインドのようにコンテナを上下させて、表示と非表示を切り替えます。
この効果は、要素を弾ませます。
この効果は、要素を垂直または水平方向にクリッピングして表示または非表示にします。
この効果は、要素を一方向にスライドさせながらフェードインまたはフェードアウトして、要素を表示または非表示にします。
この効果は、要素を分割しながら表示または非表示にします。表示の際は断片が集合し、非表示の際は断片が飛散します。
この効果は、要素をフェードアウトして非表示にし、フェードインして表示します。
この効果は、要素を開いたり（表示）、折りたたみます（非表示）。
この効果は、表示または非表示の前に要素の背景色をアニメーションします。
この効果は、要素を拡大または縮小しながら表示または非表示にします。
この効果は、要素を点滅させた後に表示または非表示にします。
この効果は、パーセンテージで係数を指定して拡大（表示）または縮小（非表示）します。
この効果は、要素を縦または横に揺らしながら表示または非表示にします。
この効果は、要素のサイズを指定された幅と高さに変更します。
この効果は、要素をビューポートからスライドイン（表示）またはスライドアウト（非表示）します。
wijmo ウィジェットの多くでは、アニメーションオプションを使用してウィジェットに適用されるイージング効果を制御できます。イージング効果は、イージング関数を表す文字列値を使用して設定できます。これらの関数は、アニメーション内のいくつかのポイントでアニメーションを進める速度を指定します。
イージング関数については、デモを使用したほうが容易に理解できます。使用できるイージング関数のデモについては、jQueryUI イージングページを参照してください。
次に、ほとんどの wijmo ウィジェットで使用できるイージング効果をリストします。使用するウィジェットのアニメーションオプションをチェックして、各ウィジェットで使用できるイージング効果を確認してください。
| easeInQuad | easeOutQuad | easeInOutQuad |
| easeInCubic | easeOutCubic | easeInOutCubic |
| easeInQuart | easeOutQuart | easeInOutQuart |
| easeInQuint | easeOutQuint | easeInOutQuint |
| easeInExpo | easeOutExpo | easeInOutExpo |
| easeInSine | easeOutSine | easeInOutSine |
| easeInCirc | easeOutCirc | easeInOutCirc |
| easeInElastic | easeOutElastic | easeInOutElastic |
| easeInBack | easeOutBack | easeInOutBack |
| easeInBounce | easeOutBounce | easeInOutBounce |
| linear | swing |