だぶだぶノート

スプライトアニメーションライブラリの続報です。
機能的には、まあまあ充実してきたと思います。

円運動、擬似的な自由落下の動作テスト

どこまで最適化できるか、、、

スプライトアニメーションライブラリ、テスト版の動作実験。

モーショントゥイーンとスプライトアニメーション連携
http://pv.wi-wi.jp/motel/pv1/boy02.html

アイリスアウト／アイリスインのエミュレーション
http://pv.wi-wi.jp/motel/pv1/iris.html

アイリスアウトは画面の周りから丸く黒く変わっていく状態のアニメ用語。

やっぱりコールバック関数の連鎖がひどい。
やはりMotelを作り直したい、、、

JavaScriptアニメーション（スプライト使用）をやろうとして、以下のテストコード。

<style>
#div1{
background:#fff url(sprite.png) no-repeat 0 0;
width:300px;height:300px;
}
</style>
<script type="text/javascript">
var x=0,y=0,div1;
onload=function(){
  div1=document.getElementById('div1');
  setInterval(function(){
    div1.style.backgroundPosition='-'+x+'px -'+y+'px';
    x++,y++;if(x>1000)x=0;if(y>1000)y=0;
  }, 1);
}
</script>
<div id="div1"></div>

ガンガンにメモリリークしまくりなんですが、詰んだ？お手上げ？
何だこれ？

いろんな方が公開されているCSSスプライトをいくつか試してみましたが、試したものは全てメモリリーク発生。
CANVASに描画したものはさすがにリークはありませんでした。

お手上げ。
ブラウザのバグってことにしておこう。

その後の調査。
6時間から12時間以上放置していたけど、一定（500MB程度）以上増えないらしい。
時々ガーベジコレクションが働いてメモリが解放されているからだと思う。
一時期100MBまで下がった。
何だこれ？

今更ながら、Firefoxのブックマークレットが使えなくなりました。
変更方法はないようで、かわりにスクラッチパッドというのがついています。

ツールメニューからスクラッチパッドを選択して、

コードを入力して、メニューから実行すると、ブックマークレットと同じ効果が得られる模様。

なんか、面倒臭い。。。

情報源：危ないRiSKのブログ

relativeの基準点はstatic（何も指定しないとき）の表示位置です。 Read_On

CSSアニメーション、transform: translate(x,y)を使うと、スムーズに移動してくれるけど、そのあとonclickやらon何かが反応してくれなくなる。ヽ(｀Д´)ノ

たぶん、マウスカーソルの位置と、本来の要素の位置とtranslateで移動した場所がずれてるからだと思うけど、
んで、結局トゥイーンライブラリ使わなきゃならなくなる。ヽ(｀Д´)ノ