[JS]動画もFlashも使わずに、商品をぐるぐるとアニメーションで回転させるスクリプト - fc.tape

CSSスプライトを使って、映画のフィルムを再生するように画像をアニメ化するjQueryのプラグインを紹介します。
操作は下記キャプチャのようにボタンをはじめ、ドラッグにも対応しており、アニメーション再生のスムーズ機能も備えています。

fc.tape — rotate css-sprites like cinema tape!

[ad#ad-2]

• fc.tapeの仕組み
• 実装の基本
• デモと実装方法

fc.tapeの仕組み

使用する画像は、映画のフィルムのように少しずつ動かしたものを用意します。

デモで使用している画像の一部

この画像をCSSスプライトで表示し、アニメーションをコントロールします。

画像の作成には「ImageMagickを使用すると、フォルダ内の全ての画像からスプライト用の一枚の画像を生成できます。

実装の基本

アニメーションを配置するdiv要素、サイズなどを指定するスタイルシート、コントロールするスクリプトが基本構成です。

HTML

<div class="tape"></div>

CSS

.tape {
    width: 420px;
    height: 315px;
    background: url(tape.png) 0px 0px no-repeat;
}

JavaScript

$('.js-sample__tape').tape();

[ad#ad-2]

デモと実装方法

以下、デモとともに実装方法を紹介します。

Low level API: NextボタンとPrevボタン

アニメーションを一コマずつボタン操作で動かします。

HTML

<div class="b-tape js-sample__tape"
     data-frame-count="32"
     data-frame-change-duration="80"></div>

JavaScript

$('.js-sample__button')
    .bind('click', function(){
        $(this)
            .closest('.js-sample')
            .find('.js-sample__tape')
            .tape('windToNext');
    });

Medium level API: 指定フレーム間のアニメーション

現在のフレームから指定フレームまでアニメーションさせます。
windToは指定フレームに直接移動、stepInToは指定フレームまでアニメーションです。

JavaScript: windTo

$('.js-sample__button').click(function(){
    $(this)
        .closest('.js-sample')
        .find('.js-sample__tape')
                    .tape('setPosition', 0)
        .tape('windTo', 20);
});

JavaScript: stepInTo

$('.js-sample__button').click(function(){
    $(this)
        .closest('.js-sample')
        .find('.js-sample__tape')
        .tape('setPosition', 0)
        .tape('stepInTo', 20);
});

Option: アニメーションのスムーズ化

フレーム数が少ない場合はアニメーションをスムーズに再生できるオプションがあります。

HTML

<div class="b-tape js-sample__tape"
     data-frame-count="32"
     data-frame-change-duration="200"
     data-sprite-direction="h"
     data-smooth="false"></div>
<div class="b-tape js-sample__tape"
     data-frame-count="32"
     data-frame-change-duration="200"
     data-sprite-direction="h"
     data-smooth="true"></div>

JavaScript

$('.js-sample__button').click(function(){
    $(this)
        .closest('.js-sample')
        .find('.js-sample__tape')
        .tape('stepInTo', 4);
});

High level API: ドラッグ操作でのアニメーション

ドラッグ操作でアニメーションさせることもできます。
オンラインショップでよく見かけるように商品をドラッグでぐるぐる回転させます。

JavaScript

$('.js-sample__tape')
    .tape('rotate');
$('.js-sample__tape')
    .tape('rotate', {
        element: $('.js-sample__rotation-handler'),
        direction: -1,
        deltaX: 5
    });