ASOK?
ActionScriptでFlashつくるよ
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
page top

EaselJSと同じくgkskinner作、メソッドチェーンで書けるJSトゥイーンライブラリ。

TweenJS: A Tweening & Animation Library for Javascript & HTML5.

Timeline

機能

  • 複数のTweenをまとめて扱う
  • 特定の時間位置にラベルをつけて扱う

コンストラクタ パラメータ

tweens
Tweenインスタンスの配列。
labels
ラベル指定Object。{<ラベル名>:<時間>}のフォーマット。時間はミリ秒単位または、フレーム単位。
props
設定用。loop、useTicks、ignoreGlobalPauseの3つが指定できる。

サンプル

気づいたこと

  • 例えばxとyでイージングを変えてトゥイーンしたい→Tween.play()かTimelineを使う。
  • 並列にトゥイーンしたい→Tween.play()かTimelineを使う。
  • scaleX,scaleYへのset()が正しく動作しないみたいなので、to()で代用する。
    (.to({scaleX:0.2,scaleY:0.2})でOK)
  • ボタンなどでTweenが重なると正しく動作しない場合は、overrideをtrueに。
スポンサーサイト
page top

前もどこかでまとめたような…

2011/12/26追記:dojo.DeferredとjQueryのDeferredを追加。

dojo.Deferred

dojo.DeferredListで複数のDeferredをまとめることもできる。

"promise" による JavaScript での非同期プログラミング

jQueryのDeferred

"promise" による JavaScript での非同期プログラミング

Dojo と異なる点として、jQuery では、then メソッドから別の promise が返されません。その代わりに、jQuery には pipe メソッドが用意され、これによって操作を連携することができます。

JSDeferred

―和製ライブラリ。next(), loop(), call(), parallel(), wait()など。
さらにaloop()による非同期ループ、イベントのDeferred化など。

JSDeferred 紹介

TameJS

記述は好感が持てる。

非同期処理をシンプルに書けるJavaScriptライブラリ「TameJS」

Step

coffeescriptとstep.js でどれぐらい非同期を同期的に簡潔に書けるか?

Command

AS3のProgressionのCommandライク。
エラーハンドルの仕組みがない。

[JavaScript] Javascript で非同期処理のライブラリ « きんくまデザイン

海外製いろいろ

InfoQ: 仮想パネル: JavaScriptで非同期プログラミングを乗り切る方法
―開発者への質問と回答。Step, Flow-js, node-promise, Async, Async.js, FuturesJS, slide-flow-controlといっぱい出てくる。

PotLite.js

JavaScript非同期ライブラリ PotLite.js 1.23 リリース | 圧縮電子精神音楽浮遊構造体
マイナーそうな…

page top
とりあえずEaselJSを触ってみるメモ。
それなりに規模が大きいので、APIがASを模して作られていることでアタリがつきやすくありがたい。

Stage.enableMouseOver(frequency)
該当StageでonMouseOver と onMouseOut を設定。ただしこの設定は処理コストが高いみたい。
Stage.getObjectUnderPoint()を使うのがメインのようだ。デフォルトはオフになっている。
どうもカーソルが動かないとイベントが発生しないみたい。カーソルが動いたときのみ判定する実装にしてるんだろう。
frequency――1秒間の間にイベントを送信する回数。0を指定するとオフに。

カーソルをハンドカーソルにする方法はないのか?

Stage.mouseEnabled
Stage.getObjectsUnderPoint() を使うときに必要。Stage.enableMouseOver() の時は不要みたい。

Stage.mouseChildren
なくなった?古いサンプルにはあるが、今のリファレンスには見当たらない。

DisplayObject.rexX, regY
中心点をずらせる!Bitmapで超便利。
page top

JSで開発するときのために。

Chrome

起動オプションに「--allow-file-access-from-files」を付加する

Firefox

about:config から*2、security.fileuri.strict_origin_policy を false に設定する

canvas の getImageDataが少しめんどくさい(特にローカルで動かす場合) - 地平線に行く

page top

SceneObject周りイベントの実行順を調べてみた。

結果

  1. SceneObject.atSceneInit()メソッド
  2. SceneObjectのcastAddedイベント
  3. SceneObject.atSceneInit()メソッドで、addCommandしたコマンドの実行開始
    1. addCommandした親CastのatCastAdded()メソッド
    2. addCommandした親CastのcastAddedイベント
    3. 親CastのatCastAdded()メソッドで、addCommandしたコマンドの実行開始
      • 同addCommandでAddChildした子CastのatCastAdded()メソッド
    4. 親CastのatCastAdded()メソッドで、addCommandしたコマンドの実行終了
      • 親CastにaddChild済みだった子Castの、atCastAdded()メソッド
    5. 親CastのcastAddedCompleteイベント
  4. SceneObject.atSceneInit()メソッドでaddCommandしたコマンドの実行終了
  5. addCommandしたCastの、castAddedCompleteイベント
page top
new AddChildしてないモノも、自動でatCastAddedが呼ばれる
atCastAdded中に表示リストに乗っけたモノは、ちゃんとremoveしないとダメよ。
page top
Copyright © 2005 ASOK?. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。