主要のブラウザ・OS・端末・各ディスプレイサイズの全てでスムーズに動く
アニメーションの作成方法について教えてください。
今までに試した内容は、初めJクエリープラグインのバックストレッチを
試しました。ところがスムーズな動きをさせる為にはコマ数を増やして
そのコマをめくる速度を早くしなければならず、元画像の枚数を増やし
ソースBODY部分(下記※1)の数値を上げてみましたが、その結果、
ディズプレイやブラウザによってはピカピカッとバグが出てしまいました。
次に同じくJクエリーのJアニを試したところ、今度はスムーズに動きましたが、
元画像データの容量が大体100キロバイト以上になると理由は不明ですが、
PCによっては数回に一度の割合で初めのコマが飛ばされてからの表示、即ち
アニメーション途中からの再生表示になってしまいました。アニメーションの
表示サイズを大きくしたかったので、ファイルサイズはそのままで、ソース
コードの記述変更にてその画像を拡大表示すれば解決すると思い試しましたが、
今度は「無限ループエラー」(下記※2)となりうまくいきませんでした。
どなたか解決出来る方法をご教示いただけませんでしょうか?
私でも直ぐに解決出来る策を、初心者レベルで恐縮ですが、文面
もしくはソースコードにてご教示いただけませんでしょうか。
私のITスキルに関しては、見よう見まねで情報サイト等から得た
ソースコードをいじれる程度のレベルです。なので、もしお手数で
したら、参考になる分かりやすいサイトでも構いません。
《必須条件》
Windows・Mac・Android・IOS、IE7以降・Chrome・Safari・
Firefox・オペラ、ディスプレイサイズは16:9と5:4と4:3
上記の全てで正常な閲覧が出来るようにしたいです。
※1: setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 1000);
※2:問題のソースコード。
【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
No.3ベストアンサー
- 回答日時:
No.1です。
>アニメーションが始まるタイミングが遅くなるのはやはり避けたいですが
こればっかりは、閲覧者側の環境に依存するところが大きいので、なんとも…
製作者側でとれる手段としては、
・画像データを極力軽いものにする
・画像を1枚に統合させて、表示する時にクリップなどで切り分ける
(読込みのリクエストを減らす意味)
などでしょうか。
ajaxでデータを読込む場合などで、データ読込み処理中は「Loading」のアニメーションgifなどを表示させているのをよく見かけますけれど、そんな対応にしておくのも一法かと思います。
>fujillinさん
ご回答ありがとうございます。
はい、閲覧者側の環境に左右されてしまいますよね…
>「Loading」のアニメーションgif
参考になりました。
ありがとうございます。
No.1
- 回答日時:
>ディズプレイやブラウザによってはピカピカッ
>とバグが出てしまいました。
>アニメーション途中からの再生表示になってし まいました。
両方とも同じ理由ではないかと思います。
大量の画像データをロードしようとしも、読み込まれる順序や所要時間も一定ではありません。
その結果、まだ読み込まれていない画像を表示しようとする時に光ったようになったり(背景色を明るい色にしているのだと想像します)、アニメーションの途中からようやく画像の読み込みが追いついてきたりした結果ではないでしょうか。
対策としては、必要な画像をプレロードして、ロードを確認してからアニメーションを始めるようにすればよさそうに思います。
この場合は、アニメーションが始まるタイミングが、今までよりは遅くなる可能性が高いですけれど…
画像のロードの確認は、プレロード時にそれぞれのimg要素のonload eventを監視して、全部読み込まれたかを判断すればよろしいかと思います。
一枚だけ読み込みに失敗したときはどうするのかといった問題は残りますが… そのあたりは適宜に。
>ソース コードの記述変更にてその画像を拡大表示すれ
>ば解決すると思い試しましたが、今度は「無限ループ
>エラー」とな りうまくいきませんでした。
どこを変更なさったのか分かりませんが、とりあえず、原因はその部分にあるのではないですか?
>fujillinさん
ご回答いつもありがとうございます。
画像を全て読み込ませて、読み込み時の監視はonloadイベントを使うという事ですね。
挑戦してみます。
(アニメーションが始まるタイミングが遅くなるのはやはり避けたいですが…)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
functionから別のfunctionを実...
-
関数でy=g(x)のgとは何の略です...
-
jslintのエラーについて質問
-
jQueryでzipを解凍読み込みする...
-
ajax反映後のjqueryが動かない
-
idを使わずにonclickで自身の要...
-
ページ内に複数表がある場合のT...
-
jQueryの :not() .not() が有効...
-
javascript 別関数で生成したイ...
-
ActiveXobjectが作成できない
-
同じIDで定義した要素の配列を...
-
<a>タグのテキストを取得
-
この将棋プログラムに王様ゲッ...
-
C#OpenCv V4にのエラーに関する...
-
document.onkeydownについて
-
ローカルにあるファイルを検索...
-
なぜmatchメソッドがエラーにな...
-
jspからjavascriptの変数引継ぎ
-
助けてください‼︎ javascriptで...
-
window.openでタイトル名の指定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
関数でy=g(x)のgとは何の略です...
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
jslintのエラーについて質問
-
要素名がスペースを含む場合のj...
-
javascript(jQuery)でセル内...
-
ajax反映後のjqueryが動かない
-
jQueryの :not() .not() が有効...
-
getElementByIdを使用したグロ...
-
コードをスマートにさせたい。
-
クリックすると上に開くアコー...
-
jQueryの"return false"の役割...
-
jQueryが読み込めない
-
個別では動く、javascriptのエラー
-
一つのアクションで関数を二つ...
-
jqueryの変数を関数の外に出す方法
-
R言語
-
jQuery|:not(:animated)
-
即時関数でプライベート変数的...
-
スムーズに動く アニメーション...
おすすめ情報