ダウンロード

埋め込み

常に最新

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/goround.min.js" ></script>

1.0.0

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/goround.1.0.0.min.js" ></script>

1.0.1

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/goround.1.0.1.min.js" ></script>

必要なライブラリ

jQuery

ライブラリ内でのjQueryの利用範囲
  • DOM要素の取得
  • 属性の設定
  • スタイルの設定
  • イベントハンドラの登録

概要

Goroundは画像をなぞる動作でアニメーションさせたい時に使います。設定次第で認識する動作を縦・横・回転に変えることができます。

アニメーションさせるコマ割り画像は一つのディレクトリにすべて保存します。ファイル名は同じ名前の中に連続した整数の連番を持ったものである必要があります。連番は0で桁埋めし、ファイル名が同じ長さになるようにしてください。画像ファイルの名前はデフォルトで「frm999.png」(999は000から020までの連番)となっていますが、設定で変更可能です。

画像が変化したときや回転がストップしたときのコールバック関数を登録しておくことで、現在表示されている画像とそのインデックスを引数として受け取ってそのタイミングで処理を行うことができます。

goroundは内部要素にimg要素を挿入し、設定された画像群を表示します。スワイプなどの操作は指定したidを持つ要素上で拾いますので、ブロック要素を指定した場合は横幅に注意してください。

1.0.1
  • 各コールバック関数内からthis指定でgoroundオブジェクトを取得することができます。

サンプル

横スワイプ

<div id="samp1" style="width: 100px;"></div>
//以下をscriptのjqueryロード後の処理に記述します
//画像のパスやファイル名は存在するものに変更する必要があります
var samp1 = new Goround({
	id:'samp1',
	path:'img/goround/samp1/',
	cycle: true,
	horizontal: true,
	vertical: false,
	prefix: 'hcoin',
	safix: '.png',
	digit: 2,
	movepx: 5,
	reverse: false,
	startnum: 1,
	endnum: 10,
	freetime: 500,
	friction: 80,
	framerate: 60});

縦スワイプ

<div id="samp2" style="width: 100px;"></div>
//以下をscriptのjqueryロード後の処理に記述します
//画像のパスやファイル名は存在するものに変更する必要があります
var samp2 = new Goround({
	id:'samp2',
	path:'img/goround/samp2/',
	cycle: false,
	horizontal: false,
	vertical: true,
	prefix: 'vcoin',
	safix: '.png',
	digit: 2,
	movepx: 5,
	reverse: false,
	startnum: 1,
	endnum: 10,
	freetime: 500,
	friction: 80,
	framerate: 60});

回転

<div id="samp3" style="width: 200px;"></div>
//以下をscriptのjqueryロード後の処理に記述します
//画像のパスやファイル名は存在するものに変更する必要があります
var samp3 = new Goround({
	id:'samp3',
	path:'img/goround/',
	cycle: true,
	horizontal: true,
	vertical: true,
	prefix: 'dial',
	safix: '.png',
	digit: 3,
	movepx: 13,
	reverse: false,
	startnum: 1,
	endnum: 36,
	freetime: 500,
	friction: 120,
	framerate: 60});

設定

未指定:必須条件:文字列
id
goroundに設定する要素のid属性値を指定します。idのない要素をgoroundにすることはできません。
未指定:'img/'条件:文字列
path
画像ファイルを保存したディレクトリへのパスを指定します。コマ割りで用意した画像は一つのディレクトリの下に保存しておく必要があります。ディレクトリへのパスは絶対パスもしくはページディレクトリからの相対パスで指定します。
未指定:'frm'条件:文字列
prefix
連番以前のファイル名を指定します。
未指定:'.png'条件:文字列
safix
連番以後のファイル名を指定します。
未指定:0条件:0以上の整数
startnum
画像ファイル名に使用している連番の最小値を指定します。
未指定:20条件:0以上の整数
endnum
画像ファイル名に使用している連番の最大値を指定します。
未指定:3条件:1以上の整数
digit
連番の桁数を指定します。連番は指定した桁数で0埋めされているものと解釈されます。
未指定:10条件:0より上の整数
movepx
ここで指定したピクセル分スワイプやドラッグが発生すると画像を1コマ切り替えます。
10pxスワイプで画像切り替えの例
30pxスワイプで画像切り替えの例
未指定:40条件:0より上の整数
framerate
1秒間にアニメーションするコマ数を指定します。この設定はスワイプ中ではなく慣性動作(スワイプで投げるような動作)時に適用されます。
未指定:0条件:ミリ秒単位の整数
throwtime
このライブラリでは止めたか投げたかを直前のスワイプハンドラの時間間隔と、最後のスワイプハンドラと指を離した時間の間隔を比較して判定しています。この判定の後者側に加算する値を指定します。
未指定:20条件:px/秒単位の0以上の整数
friction
慣性動作時に1秒間あたりに減速する速さを指定します。
未指定:100条件:ミリ秒単位の0以上の整数
freetime
慣性動作時に指定したミリ秒間、減速されずにアニメーションし続けます。
未指定:0条件:0->全て 1->マウス 2->タッチ
handlemode
使用するイベントハンドラを決定します。これが0の状態だとマウスとタッチ両方のイベントを拾うので、Android4.1の標準ブラウザなどでイベントハンドラが重複して発動し、setOnClickで登録した関数が2回呼ばれるなどの現象が確認されているので注意してください。
未指定:false条件:true|false
reverse
trueに設定するとアニメーションフレームのコマ送りを逆にします。通常、右にスワイプするとフレームを加算しますが、tureにすることで減算するようになります。
未指定:false条件:true|false
vertical
縦方向スワイプやドラッグを認識してアニメーションします。横感知もともにtrueと設定した時はどちらか大きい方が優先されます。
未指定:false条件:true|false
horizontal
横方向スワイプやドラッグを認識してアニメーションします。縦感知もともにtrueと設定した時はどちらか大きい方が優先されます。
未指定:false条件:true|false
cycle
横感知であれば上下半分、縦感知であれば左右半分でアニメーションコマ送り方向を反転します。vertical, horizontalと合わせてtrue設定にすると、周期のある画像群を円形スワイプ、ドラッグ操作でアニメーションさせることができます。
未指定:-条件:-
setOnMove(function(index, image){})
引数にコールバック関数を指定することで、アニメーションのコマ送りが発生した時点で実行される処理を記述することができます。引数はそれぞれindex: 表示されている画像の内部インデックス(0オリジン)、image: 表示されているimgタグのjQueryオブジェクト
未指定:-条件:-
setOnStop(function(index, image){})
引数にコールバック関数を指定することで、アニメーションが終了した時点で実行される処理を記述することができます。引数はそれぞれindex: 表示されている画像の内部インデックス(0オリジン)、image: 表示されているimgタグのjQueryオブジェクト
未指定:-条件:-
setOnClick(function(index, image){})
引数にコールバック関数を指定することで、クリックしたときに実行される処理を記述することができます。引数はそれぞれindex: 表示されている画像の内部インデックス(0オリジン)、image: 表示されているimgタグのjQueryオブジェクト
未指定:読み取り専用条件:-
nowidx
現在表示されている画像のフレーム番号
未指定:読み取り専用条件:-
_img
ImageのjQueryオブジェクト