【nolib.jp 更新】cycleimageをより使いやすくしました

フレームナンバーを付けて保存されたコマ割り画像をアニメーション表示するライブラリ、「cycleimage」をより使いやすくしました。

JavaScriptアニメーションライブラリ集「nolib.jp」


画像が切り替わったときのコールバック関数を登録できるようにしてあります。


また、全体的にコールバック関数内からthis指定でオブジェクト自体の参照を取得できるように変更しました。

詳しくはそれぞれのページのデモをご覧ください

nolib.jp サンプルのアニメーションを滑らかにしました

nolib.jpにあるアニメーションするライブラリは、スマートフォンを考えて、デフォルトのアニメーションフレームレートをわざと低めに設定してあります。

※これは性能が出ない端末だと、それに合わせてフレームレートを自動的に落とす優れものなんですよ！

でも最近のスマホの性能は高いですし、PC向けに出してるサイトでそれに合わせている必要もないかと思いまして、アニメーションレートを上げてみました。


JSライブラリ - nolib.jp



将来的にはデフォルトの値も高めにしてった方が良いんでしょうね。

cycleimageマイナーバージョンアップ nolib.jp

JavaScriptライブラリ - nolib.jp -


マイナーバージョンアップ

• cycleimage

画像回転速度を表すrotaterateという設定項目をロード後に指定しなおす関数を追加しました。

cycleimage.setRotateRate(newrate);

この呼び出しでrotaterateがnewrateで指定した数値に再設定されます。

アニメーション中の変更も可能です（ただし今のバージョンは設定しなおした直後に表示している画像インデックスが変わってしまいます）。


回転順序を逆にする設定値：reverseとロード後に逆回転させる関数doReverse()を追加しました。

nolib.jp Rollerに機能を追加しました。

自作のJavaScriptライブラリを修正しました。

周りから要望がちらと聞こえたので…

【マウス、タッチどちらも対応したJavaScript UI ライブラリ】
nolib.jp

Rollerという、複数の子要素を横並びにして回転させるイメージのUIで、通常はある程度移動するたびに先頭や最後の子要素を付け替えて回転しているように見せているのですが、その機能がないパターンも在りうるという事だったので、その機能を抑制するフラグを追加しました。

nolib.jp/roller.html


結局、単純に機能追加になっちゃいました。動作効率とリスク回避を考えると…。

意外と時間がかかりましたが、初のマイナーバージョンアップです！