HTMLと を使用して回転するアニメーションを作成しようとしていますjQuery。
私は2つの異なる方法を試しました：
1）アニメーションを発生させるカスタムアニメーション関数を作成しました。
$(window).load(function()
{
$(".vfx_1").css({width:'550px', height:'400px', position:'absolute', top: '250px', left: '150px'});
//40 milliseconds for 1 frame
//always put the width, height, and position of the vfx and rushers to the first array
//multipliers for background image from left, top, interval, visibility flag(false by default, true for hidden), absolute top, absolute left,
//width, height
var vfx_1_anim = [[0,0,40,false,0,0,550,400],[0,1,40,false],[0,2,40,false],[0,3,40,false],[0,4,40,false],[0,5,40,false],[0,6,40,false],[0,7,40,false],[0,8,40,false],[0,9,40,false],[1,0,40,false],[1,1,40,false],[1,2,40,false],[1,3,40,false],[1,4,40,false],[1,5,40,false],[1,6,40,false],[1,7,40,false],[1,8,40,false],[1,9,40,false],[2,0,40,false],[2,1,40,false],[2,2,40,false],[2,3,40,false],[2,4,40,false],[2,5,40,false],[2,6,40,false],[2,7,40,false],[2,8,40,false],[2,9,40,false]];
//_animate('.blitzbot', 'timeout.png', blitz_anim);
_animate('.bottom_rotator', 'bottomTurning.png', vfx_1_anim);
function _animate(class_name, bg, anim, hide)
{
var hide = (typeof anim[0][3] === "undefined") ? false : anim[0][3];
if(hide) $(class_name).css("visibility", "hidden");
else $(class_name).css("visibility", "visible");
$(class_name).css({background:"url("+ bg +") "+ (-anim[0][0] * $(class_name).width()) + "px "+ (-anim[0][1] * $(class_name).height()) +"px"});
if(typeof anim[0][4] != "undefined") $(class_name).css("top", anim[0][4]);
if(typeof anim[0][5] != "undefined") $(class_name).css("left", anim[0][5]);
if(typeof anim[0][6] != "undefined") $(class_name).css("width", anim[0][6]);
if(typeof anim[0][7] != "undefined") $(class_name).css("height", anim[0][7]);
anim.splice(0,1);
if(anim.length>0)
{
setTimeout(function()
{
_animate(class_name, bg, anim);
}, anim[0][2]);
}
}
});
2.元気に
どちらの場合も、私のアニメーションはひどく遅くなります。ではvfx_1_anim30 フレームまでしか行っていませんが、実際には 100 フレームあります。png シーケンス イメージのサイズは、コードで約 55000 x 400 spritely、カスタム アニメーション コードで約 5500x4000 です。
画像をアップロードして自動的に縮小しない無料の画像ホスティング サイトが見つからなかったため、フィドルを作成できませんでした。
私の質問: 画像サイズが大きく、フレーム数が多いために影響を受けないアニメーションを作成するにはどうすればよいですか。キャンバスは良い選択肢でしょうか? スプライトアニメーションに使用している画像へのリンク。
ありがとう！