昨日、一つ前の記事を翻訳して公開したところ、タイミングの良いことにその 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 });
elasticOut
は、ビルトインの移動モードです。
Charts の Kitchen Sink
ですべてのモードを確認プレビューできます。
また、複数の属性を一度にアニメートできます。 例えば、元の3つの値を次のように変更してみましょう。
cx: 50,
cy: 50,
r: 30
移動モードも変更します。
easing: 'bounceOut'
では、円の水平方向と垂直方向の中央点を両方ともアニメートさせましょう。
circleSprite.setAttributes({ cx: 200, cy: 200 });
両方の属性で同じ移動モードと持続時間を設定したので、 両方の属性が同時にアニメートしましたね。
しかし、属性事に違う持続時間を設定したい場合はどうしたらよいでしょうか?
アニメーション モディファイアの
customDurations
コンフィグを使うとそれができます。
circleSprite.setAnimation({ duration: 1000, easing: 'bounceOut', customDurations: { cy: 3000 } });
ここでは、垂直方向の中央点 (cy
) は、
他のスプライト属性 (この場合では水平方向の中央点、cx
)
よりも、3倍遅くアニメートします。
同様に、移動モードも特定の属性に設定できます。
customEasings: { cx: 'easeOut' }
重要な点は、アニメーションの設定はこのガイドで説明したような単純な数値属性に限ったものではありません。 色や配列や文字列でもアニメートできます。
例として、色と配列を変更してみましょう。
まとめ
ご覧の通り、スプライトのアニメーションは、めっちゃ簡単でフレキシブルです。 アニメーション API には美しく現実的なアニメーションを作成するに充分なパワーがあり、そしてそれはすぐに使えます。
楽しんで実験してみてください!
Du er da simpelthen bare SÅ dygtig med de dukker. Nyder sådan at se billeder af de nye små komme til :) Dejligt, at I havde en god dag. Jeg fornemmer, at vi har været et par stykker her i blogverdenen, der har misundt jer lidt s Ser frem til bitedler.Riglig god aften.Kh. Charlotte
I have noticed you don’t monetize sunvisor.net, don’t waste your traffic, you can earn additional bucks every month with new monetization method.
This is the best adsense alternative for any type of website (they approve all websites), for more details simply search in gooogle: murgrabia’s tools