[JS]CSS, SVG, テキスト要素に様々なアニメーションを低負荷で施せる「KUTE.js」

CSSでスタイリングしたHTMLオブジェクト、テキスト、さらにSVGコンテンツまでも様々なアニメーションで変形、移動させることができる、オープンソースのJavascriptアニメーション用モジュール「KUTE.js」をご紹介します。

このモジュールの優れたところは、必要なスクリプトだけを読み込み、シンプルな記述のみでメモリー効率のよい高速かつ滑らかなアニメーション効果をオブジェクトに施すことができるところ。

ライセンスはMITです。

INDEX

スクリプトの読み込み
基本構文
動作関連のメソッド
指定可能なオプション
SVGオブジェクトのアニメーションデモ
テキストのアニメーションデモ

スクリプトの読み込み

「KUTE.js」を利用するには、以下のJavascriptを必要に応じて読み込むだけです。

まずは必須のメインスクリプト。CDN上のスクリプトを直接ロードしてもOK。

<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute.min.js"></script> <!-- core KUTE.js -->

CSSプロパティの変更でアニメーションをする場合は “kute-css.min.js” のみを読み込みます。
その他、SVGオブジェクトの変形やアニメーションのイージングを細かく指定したい場合は、その種類ごとでアニメーション用のスクリプトを指定します。

<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-jquery.min.js"></script> <!-- jQuery用プラグイン -->
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-easing.min.js"></script> <!-- イージング拡張用 -->
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-physics.min.js"></script> <!-- イージング拡張用 -->
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-css.min.js"></script> <!-- CSSアニメーション用 -->
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-svg.min.js"></script> <!-- SVGアニメーション用 -->
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-text.min.js"></script> <!-- テキストアニメーション用 -->
<script src="https://cdn.jsdelivr.net/kute.js/1.5.9/kute-attr.min.js"></script> <!-- 属性値変更用(SVGとセットで利用) -->

本記事公開時点でのバージョンは「1.5.9」ですが、最新バージョンの「KUTE.js」はこちらから確認できます。

基本構文

「KUTE.js」でアニメーションを定義するための最も基本となるコードは以下のようにします。

// KUTE.fromTo('対象セレクタ', {開始スタイル}, {終了スタイル}, {オプション(コールバック含む)});
var tween = KUTE.fromTo('selector', {left: 0}, {left: 100}, {yoyo: true});

'selector'は、アニメーション対象要素に付けたセレクタを指定しておきます。
例えば、対象要素が<div class="elem" id="elem"></div>であれば、セレクタの指定は '.elem'または'#elem'です。

.toとしてアニメーションの開始スタイルを省いた構文の記述も可能ですが、開始スタイルも必要な.fromToの方が好ましいようです。

// KUTE.to('対象セレクタ', {終了スタイル}, {オプション});
var tween = KUTE.to('selector', {left: 100}, {yoyo: true});

jQueryに実装して定義する場合

「KUTE.js」のjQueryプラグインを利用すると、以下のようにjQueryの構文として定義できます。

var tween = $('selector').fromTo({left: 0}, {left: 100}, {yoyo: true});

単体要素の動作サンプル : CSSアニメーション

基本構文を元に、通常の実行サンプルと、jQueryの処理として実行させた場合のサンプルを示します。

See the Pen KUTE.js test : Basic exapmle by digistate (@digistate) on CodePen.

アニメーション要素のHTML

<div id="elem-one" class="elem one">
  <span>Basic KUTE</span>
</div>
<div id="elem-two" class="elem two">
  <span>jQuery Version</span>
</div>
<div>

Javascript

基本的な定義例

// 通常の定義例
var tween1 = KUTE.to( 
    '#elem-one',  // 対象要素のセレクタ
    // ↓アニメーション完了時のスタイル
    {borderRadius:'100%',  // 角丸に
     rotate:405,  // 405度回転
     backgroundColor:'#e5405e'  // 背景カラーを #e5405e に
    },
    //↓オプション
    {repeat:1, // リピート数 : 1
     yoyo:true   // アニメーション完了後に初期状態へ逆アニメーションさせるか
    }
  );

jQueryの構文として定義した例

“kute-jquery.min.js” をロードしてjQueryの構文で実行可能にした場合は、以下の書式でも定義できます。

// jQueryバージョン
var tween2 = $('#elem-two').to( 
    // ↓アニメーション完了時のスタイル
    {translateX:200, // X軸の位置
     rotateX:360, // X軸を基準に３６０度回転
     rotateY:15,  //　Y軸を基準に15度回転
     rotateZ:5  // Z軸を基準に５度回転
    },
    // ↓オプション
    {perspective:400, // 奥行きの深さ
     perspectiveOrigin: 'center top', // 奥行きに対する視点の位置
     duration:1400, // アニメーション時間
     easing:'easingCubicInOut', // イージングのパターン
     repeat:1, // リピート数
     yoyo:true   // アニメーション完了後に初期状態へ逆アニメーションさせるか
    }
  );

複数の要素をアニメーションさせる場合

アニメーションさせる要素が複数ある場合は、.allFromToを指定します。

// KUTE.allFromTo('対象セレクタ', {開始スタイル}, {終了スタイル}, {オプション(コールバック含む)});
// 以下では class属性に elem というセレクタを持つ要素をまとめてアニメーションの定義をしている
var tween = KUTE.allFromTo('.elem', {left: 0}, {left: 100}, {yoyo: true});

こちらもアニメーション開始時のスタイルを省略した定義、.allToもあります。

なお、jQueryプラグイン用スクリプトを追加して　jQueryの構文で実行する場合は、.ftomTo(.to) だけで指定セレクタを持つすべての要素に対して、1回の実行でアニメーションさせることができます。

var tween = $('.elem').fromTo({left: 0}, {left: 100}, {yoyo: true});

複数要素の動作サンプル : CSSアニメーション

See the Pen KUTE.js test : multiple element by digistate (@digistate) on CodePen.

Javascript

var elems = document.querySelectorAll('.elem'), // 対象要素をまとめて取得
    tween1 = KUTE.allFromTo(
    elems, // 対象要素の指定
    // ↓アニメーション開始時のスタイル
    {borderRadius:0, 
     rotate:0
    },
    // ↓アニメーション完了時のスタイル
    {borderRadius:'100%', 
     rotate:405
    },
    // ↓オプションとコールバックの指定
    {offset: 400, // 要素間のアニメーション遅延時間
     duration: 800, // アニメーション時間
     easing:'easingCubicInOut', // イージングの種類
     repeat:1, // リピート数
     yoyo:true,   // アニメーション完了時に開始状態まで逆アニメーションして戻るか
     start:cbStart, // 開始時のコールバック関数の指定
     complete: cbComplete // 完了時のコールバック関数の指定
    }
);

コールバック関数

// アニメーション開始時に実行する処理
var cbStart = function(){
    doButton.text('Doing KUTE!');
};

// アニメーション完了時に実行する処理
var cbComplete = function(){
    doButton.text('START');
};

動作関連のメソッド

アニメーションの実行に関わるメソッドは以下が用意されてます。

.start()

.to, .fromTo, .allTo, .allFromToメソッドで指定された要素に指定したアニメーションを実行します。

KUTE.to('selector', {left: 100}).start();

var tween = KUTE.to('selector', {left: 100});
tween.start();

.stop()

実行中のアニメーションを停止します(キャッシュされたオブジェクトに対してのみ)。

stopButton.addEventListener('click', function(){
  tween.stop();
}, false);

.pause()

実行中のアニメーションを一時停止します。

pauseButton.addEventListener('click', function(){
  tween.pause();
}, false);

.resume()

一時停止中のアニメーションを再開します。

resumeButton.addEventListener('click', function(){
  tween.resume();
}, false);

.chain()

指定した要素のアニメーションが完了した後で、別の要素のアニメーションを実行させます。

var tween2 = KUTE.fromTo(div,{left:50},{left:0});

// tween　が実行された後で tween2 を実行する
tween.chain(tween2);

2つ以上の要素を関連付けて順番に実行させる場合はカンマで区切って指定します。

var tween2 = KUTE.fromTo(div,{left:50},{left:0});
var tween3 = KUTE.fromTo(div,{right:50},{right:0});

tween.chain(tween2, tween3);

指定可能なオプション

共通オプション

duration: アニメーション時間の長さをミリ秒で指定。デフォルトは「700」。
{duration:1200}
repeat: アニメーションのリピート回数を指定。デフォルトは「0」。
{repeat:1}
delay: アニメーション開始までの遅延をミリ秒で指定。デフォルトは「0」。
{delay:400}
offset: .allTo, .allFromToで複数の要素をアニメーションするときの要素ごとの遅延をミリ秒で指定。デフォルトは「0」。
{offset:400}
repeatDelay: アニメーションを繰り返すときの遅延をミリ秒で指定。デフォルトは「0」。このオプションは repeat オプションが1以上の場合のみ有効。
{repeatDelay:300}
yoyo: アニメーションをリピートする際に、”from” と “to” のアニメーションを逆にして戻すモーションを有効にする場合は「true」を指定。デフォルトは「false」。このオプションは repeat オプションが1以上の場合のみ有効。
{yoyo:true}
easing: アニメーションのイージングの種類を指定。デフォルトは「linear」。
指定可能なイージングの種類
{easing:'easingCubicInOut'}

CSS Transform用オプション

CSS3のtransformを利用した2次元／3次元のアニメーションを行う場合には、transform用のオプションも指定できます。

perspective: CSS3の3次元アニメーションにおける perspective の値を指定。デフォルトは未指定。
{perspective: 500}
perspectiveOrigin: CSS3の3次元アニメーションにおける perspective-origin を指定。デフォルト値なし。
{perspectiveOrigin: "50% 50%"}
parentPerspective: アニメーション対象の要素の親要素に対する perspective を指定。
{parentPerspective: 400}
parentPerspectiveOrigin: アニメーション対象の要素の親要素に対する perspective-origin を指定。
{parentPerspectiveOrigin: "50% 50%"}
transformOrigin: アニメーションさせる変換の原点(CSS : transform-origin)を指定。
{transformOrigin: "50% 50%"}

その他、SVGをアニメーション要素とする場合、テキストをアニメーション要素する場合でそれぞれ指定できるオプションもあります。

指定可能なオプション一覧

コールバック関数の指定

以下のコールバック用の関数を指定できます。

start: アニメーション開始時に実行するコールバック関数を指定。
pause: アニメーション一時停止時に実行するコールバック関数を指定。
resume: アニメーション再開時に実行するコールバック関数を指定。
stop: アニメーション停止時に実行するコールバック関数を指定。
complete: アニメーション完了時に実行するコールバック関数を指定。

コールバック指定例

// アニメーション開始時のコールバック
var callbackStart = function(){
  // 何らかの処理
}
// フレームごとのコールバック
var callbackUpdate = function(){
  // 何らかの処理
}
// アニメーション一時停止時のコールバック
var callbackPause = function(){
  // 何らかの処理
}
// アニメーション再開時のコールバック
var callbackResume = function(){
  // 何らかの処理
}
// アニメーション停止時のコールバック
var callbackStop = function(){
  // 何らかの処理
}
// アニメーション完了時のコールバック
var callbackComplete = function(){
  // 何らかの処理
}

// アニメーションの実行
KUTE.fromTo('selector' ,{left:150}, {left:0}, {
  start: callbackStart,  // アニメーション開始時に実行
  update: callbackUpdate,  // アニメーションフレームごとに実行
  pause: callbackPause,  // アニメーション一時停止時に実行
  resume: callbackResume,  // アニメーション再開時に実行
  stop: callbackStop,  // アニメーション停止時に実行
  complete: callbackComplete // アニメーション完了時に実行
  }).start();