スムーズに動く アニメーションの作成方法
主要のブラウザ・OS・端末・各ディスプレイサイズの全てでスムーズに動く
アニメーションの作成方法について教えてください。
今までに試した内容は、初めJクエリープラグインのバックストレッチを
試しました。ところがスムーズな動きをさせる為にはコマ数を増やして
そのコマをめくる速度を早くしなければならず、元画像の枚数を増やし
ソースBODY部分（下記※１）の数値を上げてみましたが、その結果、
ディズプレイやブラウザによってはピカピカッとバグが出てしまいました。
次に同じくJクエリーのJアニを試したところ、今度はスムーズに動きましたが、
元画像データの容量が大体１００キロバイト以上になると理由は不明ですが、
PCによっては数回に一度の割合で初めのコマが飛ばされてからの表示、即ち
アニメーション途中からの再生表示になってしまいました。アニメーションの
表示サイズを大きくしたかったので、ファイルサイズはそのままで、ソース
コードの記述変更にてその画像を拡大表示すれば解決すると思い試しましたが、
今度は「無限ループエラー」（下記※２）となりうまくいきませんでした。
どなたか解決出来る方法をご教示いただけませんでしょうか？
私でも直ぐに解決出来る策を、初心者レベルで恐縮ですが、文面
もしくはソースコードにてご教示いただけませんでしょうか。
私のITスキルに関しては、見よう見まねで情報サイト等から得た
ソースコードをいじれる程度のレベルです。なので、もしお手数で
したら、参考になる分かりやすいサイトでも構いません。
《必須条件》
Windows・Mac・Android・IOS、IE７以降・Chrome・Safari・
Firefox・オペラ、ディスプレイサイズは１６：９と５：４と４：３
上記の全てで正常な閲覧が出来るようにしたいです。
※１： setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 1000);
※２：問題のソースコード。
【Jアニのソースコード】
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
;(function($){
var settings = {};
var element = {};
var currFrame = 0;
var tm = null;
var winW = $(window).width();
var winH = $(window).height();
$.fn.jani = function(sett){
element = $(this);
settings = $.extend({}, $.fn.jani.defaults, sett);
function _build(){
element.width(settings.frameWidth);
element.height(settings.frameHeight);
element.css('background-position', '0 0');
};
_build();
};
$.fn.jani.pause = function(){
if(tm){ clearTimeout(tm); }
tm = null;
}
$.fn.jani.stop = function(){
if(tm){ clearTimeout(tm); }
tm = null;
currFrame = 0;
element.css('background-position', '0 0');
}
$.fn.jani.pause = function(){
clearTimeout( tm );
tm = null;
}
$.fn.jani.play = function(){
if(settings.totalFrames <= 0 || !element || !element.length){ return; }
function _animate(){
_animate({width:winW, height:winH});
var tmFn = function(){ _animate(); };
var bgPos = element.css('background-position');
var ie = true;
if(bgPos == 'undefined' || bgPos == null){
bgPos = parseInt(element.css('background-position-y'));
} else {
bgPos = bgPos.split(' ');
bgPos = parseInt(bgPos[1]);
ie = false;
}
bgPos -= settings.frameHeight - 1;
if(ie){ element.css('background-position-y', bgPos + 'px'); }
else { element.css('background-position', ('0px ' + bgPos + 'px')); }
currFrame++;
if(currFrame > (settings.totalFrames - 1)){
return false;
currFrame = 0;
element.css('background-position', '0 0');
if(!settings.loop){ return; }
}
tm = setTimeout(tmFn, settings.speed);
}
if(tm){ element.jani.stop(); }
_animate();
}
$.fn.jani.defaults = {
frameWidth: 100,
frameHeight: 100,
speed: 100,
totalFrames: 0,
loop: false
};
})(jQuery);
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
【JアニのINDEX】
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>m-corporation</title>
<script type="text/javascript" src="./lib/mco.js"></script>
<script type="text/javascript" src="./lib/inaj.js"></script>
<script type="text/javascript">
function enlarger(selector, width, height, speed) {
$(selector).animate({"width": width,"height": height},speed);
}
$(function(){ // ロード時
enlarger("#animation-1", 1000, 1000,0);
});
</script>
<style type="text/css">
.animation-1 {
background: url(./images/img.png) no-repeat left top;
}
</style>
</head>
<body>
<div id="animation-1" style="width:1000px;height:1000px;">animation-1</div>
<script type="text/javascript">
$(document).ready(function(){
$('#animation-1').jani({ frameWidth: 400, frameHeight: 61, speed: 110, totalFrames: 49 });
$('#animation-1').jani.play();
});
</script>
</body>
ーーーーーーーーーーーーーーーーーーーーーーーーー
【Jアニ＆バックストレッチの参考URL】
Jani→ http://blog.verygoodtown.com/2010/01/animated-gif-jani/
backstretch→ http://kachibito.net/web-design/backstretch.html
http://kachibito.net/web-design/backstretch.html
お礼
ありがとうございます。 アニメーション効果は「アイテム1@キャラ素材」と「アイテム2@キャラ素材」の合わせ技と思います。 「アイテム1@キャラ素材」の「アイテム」で画像ＮＯ指定しようとしても画像の関連つけが出来ないので再生されない。 「アイテム2@キャラ素材」は指定された画像の動きを指定しようとするが画像が不明の為出来ない。 と思います。
補足
説明サイトのやり方に誤りがありAviUtil単独では出来ないようです。 nicotalk動画作成では再生されました。