【２Dアニメ比較】animate,スプライト,canvasに…【全キャリア対応をめざす】

jQuery CSS ActionScript

f:id:tsumayouzi:20141025131816j:plain

（画像は適当

簡易ピッチングゲームのゲーム部分の表現何回もボツったので反省します。

 

仕様-----

・対応はガラケーとスマホ・ブラウザ

※ガラケーはgifでよい

※スマホはandroid1.3~ ios 3~で動くように

------------------------------------------

なので主にスマホ備忘録。

 

ボツ１【jQueryのanimate】

HTML

 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
 <div id="anime_wrapper"> 
<div id="anime">
 <p id="back" style="text-align:center;"><img src="./image/anime/boll.png" width="100%"/></p> <!-- boll -->
<div id="ex" style="text-align:center;"><img src="./image/anime/p_ex.png" /></div> <!-- 投げ先で結果隠す吹き出し -->
</div><!-- anime -->
</div><!-- anime_wrapper -->
<div class="stop_bg"><p style="text-align:center" class="stop_btn"><a href="./result.php">next</a></p></div>

php & JS

 

<script type="text/javascript">

/*　まっすぐ！　*/

function boll_motion() { $("#boll").css({ "background-position": "-75px" }); } function boll_motion1() { $("#boll").css({ "background-position": "-150px" }); } function boll_motion2() { $("#boll").css({ "background-position": "-225px" }); } function boll_motion3() { $("#boll").css({ "background-position": "-300px" }); } function boll_motion4() { $("#boll").css({ "background-position": "-375px" }); } function boll_motion5() { $("#boll").css({ "background-position": "-450px" }); } function boll_motion6() { $("#boll").css({ "background-position": "-525px" }); } function go() { $("#boll_flash").addClass("flash_go"); setTimeout("boll_motion()", 100) setTimeout("boll_motion1()", 200) setTimeout("boll_motion2()", 300) setTimeout("boll_motion3()", 400) setTimeout("boll_motion4()", 500) setTimeout("boll_motion5()", 600) setTimeout("boll_motion6()", 700)

$("#boll").animate({ "bottom": "200px", }, 800); }

/*------------------------------------------------------------*/

function ex_motion() { $("#ex").css({ "opacity": 1 });

$("#ex").animate({ "left": "85px" },300);

$("#ex img").animate({ "height": "130px", "width": "130px" },300); }

/*------------------------------------------------------------*/

function flash_motion() { $("#boll_flash").animate({ "opacity": 1, }, 300); }

/*------------------------------------------------------------*/

go();

setTimeout("flash_motion()", 400);

setTimeout("ex_motion()", 600);

</script>

 

memo

とりあえず動きます。

ただスプライトCSSと比較すると10倍の重さに。 

 

 

 

ボツ２【スプライト】

HTML

 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
 <div id="anime_wrapper"> 
<div id="anime">
 <p id="back" style="text-align:center;"><img src="./image/anime/boll.png" width="100%"/></p> <!-- boll -->
<div id="ex" style="text-align:center;"><img src="./image/anime/p_ex.png" /></div> <!-- 投げ先で結果隠す吹き出し -->
</div><!-- anime -->
</div><!-- anime_wrapper -->
<div class="stop_bg"><p style="text-align:center" class="stop_btn"><a href="./result.php">next</a></p></div>

php & JS

 

<script type="text/javascript">

/*　まっすぐ！　*/

function boll_motion() { $("#boll").css({ "background-position": "-75px" }); } function boll_motion1() { $("#boll").css({ "background-position": "-150px" }); } function boll_motion2() { $("#boll").css({ "background-position": "-225px" }); } function boll_motion3() { $("#boll").css({ "background-position": "-300px" }); } function boll_motion4() { $("#boll").css({ "background-position": "-375px" }); } function boll_motion5() { $("#boll").css({ "background-position": "-450px" }); } function boll_motion6() { $("#boll").css({ "background-position": "-525px" }); } function go() { $("#boll_flash").addClass("flash_go"); setTimeout("boll_motion()", 100) setTimeout("boll_motion1()", 200) setTimeout("boll_motion2()", 300) setTimeout("boll_motion3()", 400) setTimeout("boll_motion4()", 500) setTimeout("boll_motion5()", 600) setTimeout("boll_motion6()", 700)

$("#boll").animate({ "bottom": "200px", }, 800); }

/*------------------------------------------------------------*/

function ex_motion() { $("#ex").css({ "opacity": 1 });

$("#ex").animate({ "left": "85px" },300);

$("#ex img").animate({ "height": "130px", "width": "130px" },300); }

/*------------------------------------------------------------*/

function flash_motion() { $("#boll_flash").animate({ "opacity": 1, }, 300); }

/*------------------------------------------------------------*/

go();

setTimeout("flash_motion()", 400);

setTimeout("ex_motion()", 600);

</script>

 

memo

ただanimateと比較すると1/10倍の軽さに。

仕事終わったと思ったらandroid2.0以下で問題が。

・小さな端末で背景画像がうまく表示されない

→-web-kit-とかちゃんと書く

・端末自体の処理が遅いと、ちゃんと画面に表示されるのが、

ドキュメント読み込み後にアニメーションがすでに終わってる時間

→canvasで書き換えることに。

 

仕事終わったらメモしよう。

 

 

 

 

 

３【canvas】

(再生終わったら結果ページにリダイレクト)

 

HTML

<div class="clink">
 <a href="./result.php?">
 <canvas id="anime" width="320" height="320"
 data-src="./image/anime/{$direction}_half.png"
 data-width="320";
 data-height="320"
 data-delay="10"
 data-time="200"
 data-end_loop="[1,900]"
 data-playlogid="$play_id"
 ></canvas>
 </a>
</div>

php & JS

 

 

$(document).ready(function() {

var canvas = $('#anime')[0];
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = $('#anime').data('src');


var w = ($('#anime').data('width')) ? $('#anime').data('width') : 320;
var h = 320;
var frame = 0;
var width;
var time = ($('#anime').data('time')) ? $('#anime').data('time') : 300;
var delay = ($('#anime').data('delay')) ? $('#anime').data('delay') : 500;
var loop_end = $('#anime').data('end_loop');
var count = 0;

var loop = new Array();
var i = 1;
while ( typeof $('#anime').data('loop[' + i + ']') != "undefined") {
loop[i] = $('#anime').data('loop[' + i + ']');
i++;
}
i = 1;
img.onload = function() {
h = img.height;
width = img.width;
ctx.drawImage(img, 0, 0,w,h,0,0,w,h);
frame++;
setTimeout(animetion, delay);
};
function animetion() {
if ( typeof loop[i] != "undefined") {
if (loop[i][2] > count) {
if (loop[i][1] <= frame) {
frame = loop[i][0] - 1;
count++;
if ( typeof loop[i][3] != "undefined") {
time = loop[i][3];
}
}
} else {
if (loop[i][0] <= frame + 1 && loop[i][1] >= frame + 1 && typeof loop[i][3] != "undefined") {
time = loop[i][3];
} else {
time = ($('#anime').data('time')) ? $('#anime').data('time') : 300;
count = 0;
i++;
}

}
}
ctx.drawImage(img, w * frame, 0, w, h,0,0,w,h);
frame++;
if (w * frame < width) {
setTimeout(animetion, time);
} else if (loop_end[0]) {
time = (loop_end[1]) ? loop_end[1] : loop_time;
frame = frame - (loop_end[0] + 1);
setTimeout(animetion, time);
setTimeout(function() {
location.href = "./p1411_result.php?sed=" + sed ;
}, 600);
} else if (loop_end[0] === 0) {
frame = 0;
i = 1;
count = 0;
setTimeout(animetion, time);
}
}

});