昨日、一つ前の記事を翻訳して公開したところ、タイミングの良いことにその Part 2 が今朝 Sencha 本家の方で公開されました。 連載ですので、一旦手をつけたら翻訳も続けないといけないと思うので、Part 2 も翻訳しました。(文章部分が少なかったので楽でしたw)

元記事は Creating Beautiful Drawings Using Sencha Ext JS – Part 2 | Sencha です。

この連載の Part 1 (日本語訳) では、 スプライトとその属性、属性とコンフィグとの違い、属性の変更の仕方を学びました。 サンプルに施した全ての変更は即座に反映されました。 この記事では、スプライトをアニメートさせてみましょう。

Sprite のアニメート

Draw パッケージでは、 スプライトの属性に変更を適用するアニメーション モディファイアを使ってスプライトをアニメートできます。

スプライトの アニメーション モディファイア には、getAnimation アクセサ—メソッドによってアクセスできます。 アニメーション モディファイアには、主要な二つのコンフィグがあります。 duration と easing です。 では、単純な circle スプライトをアニメートさせましょう。

circleSprite.setAnimation({
    duration: 1000,
    easing: 'elasticOut'
});
// これで円の半径が自動的にアニメートします
circleSprite.setAttributes({
    r: 100
});

fiddleで開く

elasticOut は、ビルトインの移動モードです。 Charts の Kitchen Sink ですべてのモードを確認プレビューできます。

また、複数の属性を一度にアニメートできます。 例えば、元の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 には美しく現実的なアニメーションを作成するに充分なパワーがあり、そしてそれはすぐに使えます。

楽しんで実験してみてください！