« 数式表示 MathJax -4- | トップページ | 衝突のスキャン »

2012年7月 9日 (月)

球が動きます

FlatTable のテストバージョンにアニメーション機能の一部を実装しました。FlatTable 画像左上の[ Anim ]をクリックするとメニューが出るので、その Single をクリックすると、配置図の球がアニメーションします。もちろん、その前に配置図を作成しておく必要が有ります。アニメーション実行中は、ボタン[ Anim ]は黄色になっています。アニメーションが終了すると紫色になります。そして、再度ボタンをクリックすると濃い青色に戻ります。このように色によってFlatTable の状態を知ることが出来ます。

アニメーション機能も Flash 版では既に実装していたので、それをコピペしてから SVG+JavaScript 用に修正すれば良いわけですが、つまらない間違いが有って少し手間取りました。SVG の球の指定には childNodes[] という配列を使っているのですが、球の番号と SVG データの並び順が逆になっていて、1番の球を指定したつもりが14番になっていたといった具合です。いや、エラーの発現がこういう風に分かりやすければ良いのですが、実際は「xxx が undefined です」といったエラーなので、配列の順序に問題が有るということに気付くのに時間が掛かりました。

このアニメーションに関しては何回かに分けて多少詳しく説明して行く積りです。今回は取り敢えず、動くことを示すだけにしておきます。下図はテストバージョンを使った配置図です。[ Anim ][ Single ] をクリックしてみて下さい。



手球の初速が遅いような気がします。何かバグが有るのかも知れません。(追記:バグ修正済み)

--------
ここまでの動作およびコードは、本ブログのサイドバー「Link」の「SVG+JavaScript 版 FlatTable の試作品」で確認できます。

« 数式表示 MathJax -4- | トップページ | 衝突のスキャン »

ビリヤードの配置図ソフト」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/55155889

この記事へのトラックバック一覧です: 球が動きます:

« 数式表示 MathJax -4- | トップページ | 衝突のスキャン »