HOME > 開発者向けBLOG > Ext JS >  Sencha Ext JS を使って美しく描画する方法 パート2

Technology Note 開発者向けBLOG

Ext JS

Sencha Ext JS を使って美しく描画する方法 パート2

こんにちは、ゼノフィseoです。

この記事は、US Sencha社ブログCreating Beautiful Drawings Using Sencha Ext JS – Part 2 (2015年12月16日 | Vitaly Kravchenko) を翻訳したものです。

前回のパート1ではスプライトやそれらのアトリビュートについて、それらがコンフィグといかに違うか、そしてどのように変更すべきかを解説いたしました。実例に加えた変更は瞬時に反映されていました。今回の記事では、スプライトのアニメーション化について解説いたします。

スプライトアニメーション

ドローパッケージの中では、アニメーションモディファイアを使ってスプライトアトリビュートに変更を適用し、スプライトをアニメーションさせます。スプライトのアニメーションモディファイアgetAnimation アクセサーメソッドを経由してアクセスすることができます。アニメーションモディファイアの2つの主なコンフィグは durationeasing です。それらを利用してcircleのサンプルスプライトをアニメーションさせましょう:

circleSprite.setAnimation({
    duration: 1000,
    easing: 'elasticOut'
});
// Now this change to circle radius will animate automatically.
circleSprite.setAttributes({
    r: 100
});

Fiddleで表示する

elasticOut は組み込まれたイージング機能です。これら全ての機能はこの Charts Kitchen Sink example にて、プレビュー付きで確認することができます。

加えて、複数のアトリビュートを同時にアニメーション化することもできます。例えば、初期の3つの値を以下に変更するとしましょう:

cx: 50,
cy: 50,
r: 30

イージングにも変更を加えましょう:

easing: 'bounceOut'

最後に、円の水平と垂直の中心をアニメーションさせましょう:

circleSprite.setAttributes({
    cx: 200,
    cy: 200
});

Fiddleで表示する

両方のアトリビュートが同時に動く点に注目してください。両方のアトリビューションは同じイージングとアニメーションデュレーションを使っています。

しかし、アトリビュートによって異なるアニメーションデュレーションが必要である場合はどうすればよいでしょうか?これはアニメーションモディファイアの customDurations コンフィグを使用することで可能となります:

circleSprite.setAnimation({
    duration: 1000,
    easing: 'bounceOut',
    customDurations: {
        cy: 3000
    }
});

Fiddleで表示する

これにより、垂直中心アトリビュート(cy)がそれ以外のスプライトアトリビュート(この場合は水平中心のcx)に比べ、3倍ゆっくりと動くようになります。

最後に、カスタムイージングを特定のアトリビュートに割り当てることも可能です。

customEasings: {
    cx: 'easeOut'
}

Fiddleで表示する

ここで重要なことは、アニメーションはこの記事で解説した数個のアトリビュートに限定されるものではないということです。色、アレイ、テキストまでもアニメーションさせることが可能です。

例えば、色とアレイの変更をアニメーションさせましょう:

Fiddleで表示する

まとめ

ご覧の通りスプライトをアニメーションさせることは非常に簡単で柔軟です。アニメーションAPIは非常に強力で、美しくリアルなアニメーションを複雑な設定なしで描くことができます。

色々試しながら楽しんでください!

スプライトの変形については、パート3のガイドをご確認ください。このブログ記事のパート1およびパート2も、そのガイドに含まれる予定です。

PAGETOP