Недавно нашел одну занятную
статеечку, попытался в ней разобраться. Смысл затеи в том, что питоний скрипт генерирует из пачки "кадров" будущей анимации один png, состоящий из первой картинки, кусочков, меняющихся из кадра в кадр, и некоторых мета-данных JSON, несущих полезную смысловую нагрузку, т.н. "packed png". На веб-странице анимация отрисовывается на canvas с помощью JavaScript. Не буду рассказывать, сколько дней я заводил python со всеми либами под win32, чтоб скомпилить packed png, ибо не в этом суть вопроса, проблему я поймал уже на стадии включения в html. А проблема в том, что анимируется только самый последний canvas. Я начал подозревать, что
дело в замыкании, но разобраться не смог...
<html><head><script type="text/javascript" src="example_anim.js"></script>
<script type="text/javascript" src="myanim_anim.js"></script>
<script type="text/javascript" src="animation.js"></script>
</head><body>
<div><canvas id="anim_example" class="anim_example" width="800" height="450" style="border: 4px dotted #aaa">
<div id="anim_fallback1" class="anim_fallback1" style="width: 800px; height: 450px; position: relative;"></div>
<p></canvas></div>
<div><canvas id="anim_my2" class="anim_my2" width="600" height="400" style="border: 4px dotted #aaa">
<div id="anim_fallback3" class="anim_fallback3" style="width: 500px; height: 300px; position: relative;"></div>
<p></canvas></div>
</script>
</body>
params = new Array (
{"img_url":"example_packed.png", "timeline":example_timeline,
"canvas_id":"anim_example", "fallback_id":"anim_fallback1"},
{"img_url":"my2_packed.png", "timeline":my2_timeline,
"canvas_id":"anim_my2", "fallback_id":"anim_fallback3"}
);
for(var i=0; i< params.length; i++) {
set_animation(
params[i].img_url,
params[i].timeline,
params[i].canvas_id,
params[i].fallback_id)
}
P.S.: При некоторых умственных усилиях эта идея позволит сократить объем данных для анимирования до размеров, сравнимых с размером одного фрейма, что, конечно, повышает её полезность.
