アニメーション

アニメーションによって、Webアプリケーションをより魅力的かつ直感的なものにすることができます。たとえば、ページから項目を削除するときに項目を縮小して消し去ると、単に非表示にするより、どの項目が削除されたかがわかりやすくなります。

多くのJavaScriptツールキットおよびフレームワークは、アニメーションを作成するために独自のラッパーを備えています。たとえば、Angularには$animateサービスがあり、jQueryにはanimate()メソッドがあります。好みのラッパーがある場合は、それをWijmoで使用できます。

外部のツールキットやフレームワークへの依存度を低下させる場合は、Wijmoの単純かつ柔軟なアニメーションラッパー関数を使用します。

wijmo.animate

wijmo.animateメソッドは、アニメーションの動作を定義する関数を引数として受け取ります。

次のサンプルコードでは、FlexGridが2秒間回転するアニメーションが表示されます。

wijmo.animate((pct) => {

    let xform = '';
    if (pct < 1) {
        if (pct > 0.5)
            pct = pct - 1;
        xform = 'rotateY( ' + (pct * 180) + 'deg)';
    }
    
    theGrid.hostElement.style.transform = xform;
}, 2000);

このコードの動作を確認するには、アニメーションのデモにアクセスしてください。