fc.tape javascriptライブラリをhabrosocietyと共有したいと思います。 その目的は、接着されたフレームであるスプライトのアニメーションを制御することです。
デモ
fc.tapeを使用するには、 jQuery （1.6 +）、 jQuery UI （1.8 +）、CoreおよびWidgetコンポーネントが必要です。
ImageMagickパッケージに含まれている変換ユーティリティを使用して、個々の画像ファイルからスプライトを作成できます。
$ convert img_* -append sprite.png
注意：
APIバージョン0.2では、 現在のバージョンが少し変更されています。
設定
徐々に -フレームのスムーズな切り替えを有効にします。デフォルトで有効になっています。
image-デフォルトでは、アニメーションスプライトを含む背景画像へのパス-要素の背景画像。
frameCount-アニメーションのフレーム数。
frameHeight -1フレームの高さ、デフォルトでは要素の高さ。
frameChangeDuration-ミリ秒単位のフレーム間の切り替えの期間。
backgroundX-アニメーション付きのスプライトの水平オフセット。 1つの画像に複数のスプライトが含まれている場合に使用されます。
preload-スプライトを含むファイルがロードされたときにアニメーションを開始します。デフォルトで有効になっています。
これらの設定は、初期化中またはデータ属性を通じて指定できます。例：
<div id=”tape” data-frame-count="20" data-frame-height="150"></div>
API
低レベルAPI
windToNext-次のフレームに巻き戻す
$('#tape').tape('windToNext');
windToPrev-前のフレームに巻き戻す
$('#tape').tape('windToPrev');
どちらの方法もアニメーションのサイズを考慮し、境界を越えるとアニメーションを閉じます。つまり、windToNextは最初のフレームを最後のフレームに、windToPrevを最初のフレーム-最後に表示します。
setPosition-スプライトの位置をアニメーションなしで指定された位置に設定します。
$('#tape').tape('setPosition', 14);
setOptions-その場で設定を変更します：
$('#tape').tape('setOptions', { frameCount: 37 frameChangeDuration: 70 });
getOption-現在の設定の値を取得します。
var height = $('#tape').tape('getOption', 'frameHeight');
中レベルAPI
windTo-指定されたフレームに巻き戻します。 ターゲットフレームは2つの方法で示されます-絶対およびアニメーション全体に対する相対：
$('#tape').tape('windTo', 12); $('#tape').tape('windTo', 0.6, true);
stepInTo-指定されたフレームに巻き戻し、すべての中間フレームを順番に表示します。 現在のフレームとターゲットに応じて、アニメーションを前後にひねることができます。 ターゲットフレーム番号の絶対設定と相対設定もサポートします。
$('#tape').tape('stepInTo', 36, false, function(){ console.log('Animation is finished'); });
高レベルAPI
回転 -左ボタンを押しながらマウスを動かしながらスプライトを回転させます。 この動作は、たとえば、オンラインストアで商品のデモンストレーションに使用できます。 デフォルトでは、ねじれのアクティブ領域はスプライト要素そのものですが、代替を指定できます。 ねじれの方向と速度も利用できます。
$('#tape').tape('rotate', { element: $('#handler'), deltaX: 3, direction: -1 });
ウィジェットの動作は、 デモページ 、当社のWebサイト、または当社の作品で確認できます。
githubのプロジェクトページ 。
将来の計画では：
-APIの改善
-追加の動作（高レベルAPI）をボックスに追加し、
-jQuery UI依存関係の拒否。