dポイントプレゼントキャンペーン実施中！

スムーズに動く アニメーションの作成方法

解決済

  • 質問者：tsyok
  • 質問日時：
  • 回答数：3件

主要のブラウザ・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-gi …
backstretch→ http://kachibito.net/web-design/backstretch.html
http://kachibito.net/web-design/backstretch.html

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No.1です。



＞アニメーションが始まるタイミングが遅くなるのはやはり避けたいですが
こればっかりは、閲覧者側の環境に依存するところが大きいので、なんとも…

製作者側でとれる手段としては、
　・画像データを極力軽いものにする
　・画像を1枚に統合させて、表示する時にクリップなどで切り分ける
　　（読込みのリクエストを減らす意味）
などでしょうか。

ajaxでデータを読込む場合などで、データ読込み処理中は「Loading」のアニメーションgifなどを表示させているのをよく見かけますけれど、そんな対応にしておくのも一法かと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

＞fujillinさん

ご回答ありがとうございます。

はい、閲覧者側の環境に左右されてしまいますよね…

＞「Loading」のアニメーションgif
参考になりました。

ありがとうございます。

通報する
お礼日時：2012/09/21 19:36

No.2

  • 回答者： babu_baboo
  • 回答日時：

jQuery を使う時点で、速度だとかスムーズさをもとめるのがなんとも…、だと思う・

    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

＞ディズプレイやブラウザによってはピカピカッ


＞とバグが出てしまいました。
＞アニメーション途中からの再生表示になってし まいました。

両方とも同じ理由ではないかと思います。
大量の画像データをロードしようとしも、読み込まれる順序や所要時間も一定ではありません。
その結果、まだ読み込まれていない画像を表示しようとする時に光ったようになったり（背景色を明るい色にしているのだと想像します）、アニメーションの途中からようやく画像の読み込みが追いついてきたりした結果ではないでしょうか。

対策としては、必要な画像をプレロードして、ロードを確認してからアニメーションを始めるようにすればよさそうに思います。
この場合は、アニメーションが始まるタイミングが、今までよりは遅くなる可能性が高いですけれど…

画像のロードの確認は、プレロード時にそれぞれのimg要素のonload eventを監視して、全部読み込まれたかを判断すればよろしいかと思います。
一枚だけ読み込みに失敗したときはどうするのかといった問題は残りますが… そのあたりは適宜に。



＞ソース コードの記述変更にてその画像を拡大表示すれ
＞ば解決すると思い試しましたが、今度は「無限ループ
＞エラー」とな りうまくいきませんでした。
どこを変更なさったのか分かりませんが、とりあえず、原因はその部分にあるのではないですか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

＞fujillinさん
ご回答いつもありがとうございます。

画像を全て読み込ませて、読み込み時の監視はonloadイベントを使うという事ですね。
挑戦してみます。
（アニメーションが始まるタイミングが遅くなるのはやはり避けたいですが…）

通報する
お礼日時：2012/09/18 00:11

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報