埋め込み
概要
Cycleimageは一定の時間間隔で用意した画像を繰り返し入れ替えて表示します。
元はAjaxによく使われるローディング中を示すアニメーションGIFがスマートフォンで動かないことがあることから、代替手段として作成しました。
ファイル名に連続したフレーム番号を含んだ画像ファイルをあらかじめ用意しておきます。これらを一定の時間間隔で順番に入れ替えて表示します。１秒間に切り替えるフレーム数を指定してください。
画像フォーマットは特に制限がありませんのでちょっとしたアニメーションなどに応用できます。
- 1.3.0
- start()にアニメーションを停止するフレームを指定する引数を追加しました。
- アニメーションを停止するフレームを指定する関数[setStopTarget(index)]を追加しました。
- アニメーションフレームの回転方向を指定する関数[setReverse(reverse)]を追加しました。
- 1.2.0
- start()にアニメーションフレームのインデックスをリセットするかどうか指定する引数を追加しました。
- stop()に画像を隠すかどうか指定する引数を追加しました。
- アニメーションが変わったときのコールバック関数を追加する[setOnChange(callback)]を追加しました。コールバック関数内からthis指定でcycleimageオブジェクトを取得することができます。
- 1.1.0
- rotaterateを再設定する関数[setRotateRate(newrate)]を追加しました。
- アニメーションフレームを逆回しにするかどうかを指定する[reverse]プロパティを追加しました。
- アニメーションフレームを逆回転させる関数[doReverse()]を追加しました。
サンプル
ローディングイメージ
<div id="samp1_field" > <div id="bar"></div> <div id="dot"></div> <div id="line"></div> </div> <input id="samp1_speed" type="number" value="8" /> <input type="button" onclick="startSamp1();" value="開始" class="samp1_button" /> <input type="button" onclick="stopSamp1();" value="停止" class="samp1_button" /> <input type="button" onclick="reverseSamp1();" value="逆回転" class="samp1_button" />
#samp1_field{
position: relative;
height: 230px;
background-color: #FFFFFF;
-webkit-border-radius : 6px;
-moz-border-radius : 6px;
-o-border-radius : 6px;
-ms-border-radius : 6px;
border-radius : 6px;
}
#bar{
position: absolute;
top: 35px;
left: 285px;
}
#dot{
position: absolute;
top: 70px;
left: 375px;
}
#line{
position: absolute;
top: 130px;
left: 360px;
}
#samp1_speed{
margin: 5px 0 10px 0;
padding: 2px 3px 1px 3px;
font-size: 11px;
text-align: right;
width: 60px;
color: #444444;
-webkit-border-radius : 6px;
-moz-border-radius : 6px;
-o-border-radius : 6px;
-ms-border-radius : 6px;
border-radius : 6px;
border: solid 1px #777777;
box-shadow: 0px 0px 1px 2px #CCCCCC;
}
.samp1_button{
margin: 5px 0 10px 10px;
padding: 2px 3px 1px 3px;
-webkit-border-radius : 6px;
-moz-border-radius : 6px;
-o-border-radius : 6px;
-ms-border-radius : 6px;
border-radius : 6px;
font-size: 12px;
background-color: #777777;
color: #FFFFFF
}
//以下の関数をscriptタグ内に記述します
var bar,dot,line;
var rate = document.getElementById('samp1_speed').value;
bar = new Cycleimage({
id: "bar",
path: "img/anibar/",
endnum: 9,
rotaterate: rate});
dot = new Cycleimage({
id: "dot",
path: "img/anidot/",
endnum: 7,
rotaterate: rate});
line = new Cycleimage({
id: "line",
path: "img/aniline/",
endnum: 11,
rotaterate: rate});
//このブロックはjQueryを使用しています
$(document).ready(function(){
$('#samp1_speed').on('change', function(evt){
var rate = document.getElementById('samp1_speed').value;
bar.setRotateRate(rate);
dot.setRotateRate(rate);
line.setRotateRate(rate);
});
});
function startSamp1(){
if(bar!=null && bar.stop)bar.stop();
if(dot!=null && dot.stop)dot.stop();
if(line!=null && line.stop)line.stop();
var rate = document.getElementById('samp1_speed').value;
bar.setRotateRate(rate);
dot.setRotateRate(rate);
line.setRotateRate(rate);
bar.start(false);
dot.start(false);
line.start(true);
}
function stopSamp1(){
bar.stop(false);
dot.stop(false);
line.stop(true);
}
function reverseSamp1(){
bar.doReverse();
dot.doReverse();
line.doReverse();
}
得点表示
<div id="samp2_disp" ></div> <div id="samp2" > </div> <input id="samp2_start" type="button" value="start" onclick="start_samp2();" />
#samp2_disp{
height: 30px;
}
#samp2{
background-color: #000000;
width: 250px;
height: 50px;
padding: 10px 10px 0 0;
-webkit-border-radius : 3px;
-moz-border-radius : 3px;
-o-border-radius : 3px;
-ms-border-radius : 3px;
border-radius : 3px;
}
#samp2 div{
float: right;
}
//以下の関数をscriptタグ内に記述します
function start_samp2(){
var cele = document.getElementById('samp2');
var ssum = ('000000'+Math.floor( Math.random() * 100000 )).slice(-6);
document.getElementById('samp2_disp').innerHTML = ssum;
for(var i = 1; i <= ssum.length; i++){
var n = ssum.substr(ssum.length-i, 1);
var div = document.createElement('div');
div.setAttribute('id', 'cnum_'+i);
cele.appendChild(div);
var ci = new Cycleimage({
id: 'cnum_'+i,
path: 'img/aninum/',
prefix: '',
digit: 1,
startnum: 0,
endnum: 9,
rotaterate: 20
});
ci.pvc_roll = 3;
ci.pvc_tgt = parseInt(n);
ci.setOnChange(function(idx, imgsrc){
if(idx==this.pvc_tgt){
if(this.pvc_roll>0)
this.pvc_roll--;
else
this.setStopTarget(this.pvc_tgt);
}
});
ci.start();
}
}
設定
- 未指定：必須条件：文字列id
- 画像を表示する要素のidを指定します。指定したidを持つ要素がimgタグ以外であれば内部要素としてimgを追加して動作します。idのない要素に画像を表示することはできません。
- 未指定：'img/'条件：文字列path
- 画像ファイルを保存したディレクトリへのパスを指定します。コマ割りで用意した画像は一つのディレクトリの下に保存しておく必要があります。ディレクトリへのパスは絶対パスもしくはページディレクトリからの相対パスで指定します。
- 未指定：'frm'条件：文字列prefix
- 連番以前のファイル名を指定します。
- 未指定：'.png'条件：文字列safix
- 連番以後のファイル名を指定します。
- 未指定：8条件：回数/秒単位の0以上の数値rotaterate
- 画像の回転速度（回数/秒）を指定します。
- 未指定：0条件：0以上の整数startnum
- 画像ファイル名に使用している連番の最小値を指定します。
- 未指定：20条件：0以上の整数endnum
- 画像ファイル名に使用している連番の最大値を指定します。
- 未指定：3条件：1以上の整数digit
- 連番の桁数を指定します。連番は指定した桁数で0埋めされているものと解釈されます。
- 未指定：false条件：true|falsereverse [v1.1.0 以上]
- この設定をtrueにするとアニメーションフレームの進行方向がコマ数の小さい方になります。
- 未指定：-条件：-start(reset[v1.2.0 以上], stoptarget[v1.3.0 以上])
- アニメーションを開始します。resetにtrueを指定するとアニメーションフレームのインデックスを０にリセットします。stoptargetに指定したindexのフレームで停止します。
- 未指定：-条件：-stop(hide[v1.2.0 以上])
- 今動作しているアニメーションを停止します。hideにtrueを指定するとアニメーションを止めた後画像を消します。
- 未指定：-条件：-setStopTarget(index) [v1.3.0 以上]
- 指定したindexのフレームでアニメーション動作を停止します。アニメーション実行中でも使用可能です。
- 未指定：-条件：-setRotateRate(newrate) [v1.1.0 以上]
- rotaterateを指定しなおします。アニメーション実行中でも使用可能です。
- 未指定：-条件：-doReverse() [v1.1.0 以上]
- アニメーション動作を現在の方向の逆回転にします。アニメーション実行中でも使用可能です。
- 未指定：-条件：-setReverse(reverse) [v1.3.0 以上]
- アニメーション動作を現在の方向を指定します。アニメーション実行中でも使用可能です。
- 未指定：-条件：-setOnChange(function(index, imagesrc){}) [v1.2.0 以上]
- 引数にコールバック関数を指定することで、アニメーションした（画像が変わった）時点で実行される処理を記述することができます。引数はそれぞれindex: 表示されている画像の内部インデックス（０オリジン）、imagesrc: 表示されているimgタグのsrc属性値