• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

モジュール・ライブラリ

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

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

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

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

ライセンスはMITです。

スクリプトの読み込み

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

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

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

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

基本構文

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

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

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

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

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

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

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

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

アニメーション要素のHTML

Javascript

基本的な定義例

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

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

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

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

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

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

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

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

Javascript

コールバック関数

動作関連のメソッド

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

.start()
.to, .fromTo, .allTo, .allFromToメソッドで指定された要素に指定したアニメーションを実行します。
.stop()
実行中のアニメーションを停止します(キャッシュされたオブジェクトに対してのみ)。
.pause()
実行中のアニメーションを一時停止します。
.resume()
一時停止中のアニメーションを再開します。
.chain()
指定した要素のアニメーションが完了した後で、別の要素のアニメーションを実行させます。

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

指定可能なオプション

共通オプション

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
アニメーション完了時に実行するコールバック関数を指定。

コールバック指定例

SVGオブジェクトのアニメーションデモ

アニメーション対象のオブジェクトがSVGとなるだけで、「KUTE.js」の構文自体は、基本、すべて同じです。

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

テキストのアニメーションデモ

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

その他、詳細、ダウンロードは以下より。
KUTE.js

URL
TBURL

COMMENT ON FACEBOOK

Return Top