HTMLもSVGもテキストも自在！DOMアニメーションの決定版「KUTE.js」が登場

ハイパフォーマンスで超多機能を謳うアニメーションライブラリーが登場しました。HTMLやSVG、テキストなど、プラグインで拡張できる注目のJavaScriptライブラリーを試してみましょう。

この記事ではthednpとdalisoftによって開発されたオープンソースの多機能フリーJavaScriptアニメーションエンジンKUTE.jsを紹介します。

KUTE.jsでできること

KUTE.jsではアニメーションのコアエンジンと、特定のプロパティにアニメーションを実装するたくさんのプラグインが利用可能です。このライブラリーはKUTE.jsのモジュール構造によって高い性能と柔軟性があります。

コアエンジンで実装できるアニメーション

コアエンジンだけを使って実装できるアニメーションは以下です。

• Opacity（透明度）プロパティ
• matrixおよび2軸で値を指定したskew、scaleを除く、すべての2D transform（2D変形）プロパティ
• matrix3d、rotate3dを除くすべての3D transform（3D変形）プロパティ
• 以下のボックスモデルプロパティ：width、height、top、left
• color、backgroundColorプロパティ
• スクロールアニメーション（windowオブジェクトでもスクロール可能な任意のDOM要素でも可能）

CSSプラグインで実装できるアニメーション

CSSプラグインを使うとアニメーションの可能性がぐっと広がります。実装できるアニメーションは以下です。

• margin、padding、borderWidthなどすべてのbox modelプロパティ
• borderRadiusプロパティ
• fontSize、lineHeight、letterSpacing、wordSpacingなどのtextプロパティ
• borderColor、outlineColorなどのcolorプロパティ
• clipプロパティ（CSSでは現在非推奨）
• backgroundPositionプロパティ

SVGプラグインで実装できるアニメーション

SVG（Scalable Vector Graphics）で作成されたイラストやアイコンはWebの至るところにあります。これは偶然ではありません。SVGグラフィックスはどのような解像度でも見栄えが良く、マークアップ言語で記述できるのでアクセシビリティもより良好で、うまく最適化すればファイルサイズも小さくできます。

SVGグラフィックスのすごいところの1つは、部分ごとにアニメーションを実装できることです。KUTE.jsではさほど手間をかけずに洗練されたアニメーションを実現できるすばらしいプラグインが提供されています。

KUTE.jsのSVGプラグインで具体的に次のことができます。

• SVGパスのモーフィング
• SVGのstroke属性のアニメーション
• SVGのtransform（属性）の安定したクロスブラウザー対応のアニメーション

属性プラグインで実装できるアニメーション

属性（Attribute）プラグインによって、KUTE.jsではpx、emなどの単位の有無にかかわらず任意の数値のプレゼンテーション属性にアニメーションを実装できます。属性プラグインをSVGプラグインと組み合わせると、見栄えの良いアニメーションを作成できます。

テキストプラグインで実装できるアニメーション

KUTE.jsをテキストプラグインで拡張すると、次の2つの方法でtext要素にアニメーションを実装できます。

• 文字列で表現された数字の増減
• 文字列（string）と一文字（character）を同時に表示

KUTE.jsのWebサイトにある専用ページにアクセスすると、機能の詳細を確認できます。

KUTE.jsを使ってみる

実際にKUTE.jsを使ってみましょう。

KUTE.jsをプロジェクトにインクルード

KUTE.jsのWebサイトで「Welcome Developers!」アニメーションが終わって表示されるDownloadボタン、GitHub、CDNからKUTE.jsをダウンロードできます。

ダウンロード後、通常の<script>タグでHTMLドキュメントにkute.min.jsファイルをインクルードし、</body>タグの直前に置きます。

Bowerやnpmを使ってもKUTE.jsをインストールできます。インストールの詳細はKUTE.jsのインストール関連ページに記載されています。

KUTE.jsでの単一プロパティのシンプルなアニメーション

KUTE.jsでは主に次の2つのメソッドを使います。

• .to()：単一要素のCSSプロパティに所定の初期値、または都合のいい計算値から開始するアニメーションを実装できる。シンプルなスクロール、表示・非表示のアニメーション、アニメーションを実装するプロパティの現在の値が不明な場合に最適
• .fromTo()：開始と終了を定義して要素にアニメーションを実装できる。KUTE.jsがアニメーションの開始値を計算する必要がないので、.to()よりパフォーマンスが良好

.to()メソッドのシンタックスは次のとおりです。

KUTE.to(
  element,
  {propertyName:propertyValue}
).start();

.fromTo()メソッドのシンタックスは次のとおりです。

KUTE.fromTo(
  element,
  {fromPropertyName:fromPropertyValue}, 
  {toPropertyName: toPropertyValue}
).start();

上のシンタックスではtweenオブジェクトを作成します。tweenオブジェクトとはDOM要素のアニメーションに関するデータ、たとえば、CSSプロパティ、アニメーション時間（animation duration）、アニメーションの開始遅延時間（animation delay）などを格納するJavaScriptオブジェクトです。

デフォルトではアニメーションはトリガーされないことに注意してください。アニメーションを開始するにはtweenオブジェクトで.start()メソッドを呼び出す必要があります。

さらにアニメーションを.stop()メソッドで停止、.pause()メソッドで一時停止、.play()メソッドで再開できます。

アニメーションの開始、再開、一時停止の前に、アニメーションが現在アクティブ状態かどうかを.playingと.pausedで確認できます。

tween.playing;
tween.paused;

手始めに.to()メソッドを使ってスターアイコンのopacity値をスタイルシートで設定した初期値から0までをアニメーションします。要素はclass属性を使って選択します。関連するスニペットを以下に示します。

KUTE.to('.icon-star-dark', {opacity: 0}).start();

同じアニメーションをfromTo()メソッドを使って作成する場合に必要なスニペットは以下のとおりです。

KUTE.fromTo(
  '.icon-star-dark', //selector
  {opacity: 1}, //start value
  {opacity: 0}  //end value
).start();

同一オブジェクトの複数のプロパティにアニメーションを実装

同一オブジェクトの複数のプロパティにアニメーションを実装します。デモでは.fromTo()メソッドを使いますが、コードから開始値を削除すれば.to()メソッドを使ったコードに書き換えられます。

シンタックスを以下に示します。

KUTE.fromTo(
  element,
  {
    fromPropertyName1:fromPropertyValue1,
    fromPropertyName2:fromPropertyValue2,
    fromPropertyName3:fromPropertyValue3
  }, 
  {
    toPropertyName1: toPropertyValue1,
    toPropertyName2: toPropertyValue2,
    toPropertyName3: toPropertyValue3
  }
).start();

たとえば、1つのHTML要素のCSSにtransformプロパティとopacityプロパティに同時にアニメーションを実装するとします。KUTE.jsを使うと次のようになります。

KUTE.fromTo('.icon-star-dark', {
  scale: 1.5, //start value 1
  rotate: 360, //start value 2
  opacity: 1 //start value 3
}, {
  scale: 0.3, //end value 1
  rotate: 0, //end value 2
  opacity: 0 //end value 3
}).start();

上のコードでは要素を1.5から0.3まで縮小し（scale）、360度から0度まで回転（rotate）、そのあとopacity値を1から0まで変化させて要素を非表示にしています。

Tweenオブジェクトに遅延、デュレーションなどのオプションを追加

アニメーションスタート後の持続時間や実行回数などをコントロールするのは、アニメーションライブラリーに共通の要件です。

先のスニペットを使ってKUTE.jsでtweenオブジェクトにオプションを追加する方法は次のようになります。

KUTE.fromTo('.icon-star-dark', {
  //from properties ... 
}, {
  //to properties ...
}, {
  //options
  transformOrigin: '30% 50%',
  duration: 500,
  easing: 'easeInElastic'
}).start();

見てのとおり、波カッコ（｛｝）内に一連のプロパティ値を追加する必要があります。上のコードでは要素のtransformOrigin（デフォルトでx軸50%、y軸50%）、duration、easingプロパティに値を定義しました。

KUTE.jsはアニメーションを微調整するオプションがほかにもたくさんあります。

KUTEライブラリーのWebサイトの利用可能なオプション一覧で確認できます。

KUTE.jsで複数の要素に同一のアニメーションを同時適用

複数の要素に同じ方法でまったく同時にアニメーションを実装する場合、コードを繰り返し記述せずにKUTE.jsの2つの便利なメソッド.allTo()と.allFromTo()を使うとタスクを処理できます。

以下のように単一のtweenオブジェクトで一連のHTML要素すべてに同一のアニメーションを使って「キラキラ」を実装できます。

//define the tween object
var sparklingStars = KUTE.allFromTo(stars, {
  opacity: 0.1, //start value 1
  scale: 0.1  //start value 2 
}, {
  opacity: 1, //end value 1
  scale: 1.2 //end value 2
}, {
  //options
  offset: 200,
  repeat: 4,
  yoyo: true 
});

//start the animation
sparklingStars.start();

上のコードで特に注目するのは次の2点です。

• .allTo()または.allFromTo()を使う場合、offsetでアニメーションをずらせる。なぜなら、コレクションのすべての要素に適用されるからだ。言い換えれば、すべての要素に同時にアニメーションを実行するのではなく、コレクションの各要素に従ってアニメーション間にミリ秒単位の遅延を数多くつけることだ
• 例ではあとで使うためにtweenオブジェクトを変数に格納した。このテクニックはより複雑なアニメーション用に複数のtweenオブジェクトを扱う場合に役立つ。次のセクションで実例を紹介する

KUTE.jsで複数のTweenオブジェクトを連携する

さほど手間をかけずに複数のtweenオブジェクトを次々とトリガーできることは、DOMアニメーションに優れたJavaScriptライブラリーを使用する大きなメリットです。

まさに、KUTE.jsの.chain()メソッドでできるのです。

3つのtweenオブジェクトを連携するシンタックスは次の通りです。

tween1.chain(tween2, tween3);

ここでも先の「キラキラ星」のコードを使いますが、次のようにしてさらに2つのtweenオブジェクト、つまり星がちりばめられた球体を非表示にして、テキストを表示するオブジェクトを連続して実行します。

var sparklingStars = KUTE.allFromTo('.icon', {
 //rest of the code here
});

var disappearingBall = KUTE.fromTo('.ball', {
  //rest of the code here
});

var greetingText = KUTE.fromTo('.greeting', {
  //rest of the code here
});

//chaining takes place here
sparklingStars.chain(disappearingBall, greetingText).start();

KUTE.jsプラグインでの作業

もう分かっていると思いますが、KUTE.jsではもっと楽しいことがプラグインを追加するとできます。下のデモではSVG、Text、Attributeプラグインを使っています。

Attributeプラグインではシンタックスがいくらか異なります。

var tween = KUTE.to(element, {attr: {property: value}});

次のデモでは円形のSVGグラフィックスが同じグラフィックスでハート形にモーフィングされます。tweenオブジェクトにパスを直接注入（引用符で、たとえば、‘d=”M 360.759 250 …’のように囲います）する方法も、下のコードのようにidをSVGパスに追加し（<path id="ball" d="M 360.759 250 ... />）そしてid値を使ってtweenオブジェクト内のパスを参照する方法もあります。

var morphingBall = KUTE.fromTo('#ball', {
  path: '#ball',
  attr: {
    fill: 'rgba(21, 19, 121, 1)'
  },
  opacity: 0.5
}, {
  path: '#heartpath',
  attr: {
    fill: '#7c0e18'
  },
  opacity: 1
}, {
  easing: 'easingElasticIn',
  morphIndex: 12,
  duration: 3000
});

KUTE.jsではモーフィングアニメーションの2番目のパスの頂点から移動可能な最小距離の決定を補助するmorphIndexオプションが提供されています。アニメーションに最適なmorphIndexの値を設定するには、いくらか試行錯誤が必要です。KUTE.jsの作者のthednpによるKUTEユーティリティのデモでテストしてみると、このオプションについてより把握できるそうです。

TextプラグインはKUTEのコアエンジンとうまく調和して動きます。デモの最後の部分でテキストのアニメーションを実際に確認できます。KUTE.jsのTextプラグインを使ったtweenオブジェクトの概略は次のようになります。

var greetingText = KUTE.to('.greeting', {
  opacity: 1,
  scale: 1,
  text: 'Happy 2017 Folks!'
  //more properties
}, {
  easing: 'easingBounceIn',
  //more options
});

このプラグインはWebに書かれたテキストにアニメーションを実装する手軽な手段を提供しています。numberプロパティを使えば文字列で数字を増減でき、textプロパティを使えば文字列（string）と一文字（character）を同時に表示できます。この記事のデモはtextプロパティの動作を示しています。

最後に

記事では、小さいものの用途が広く柔軟性に富む、動的なDOMアニメーション用のJavaScriptライブラリー「KUTE.js」を紹介しました。

KUTE.jsは広範なアニメーションの可能性、完全版ドキュメント、ユーザーフレンドリーなシンタックスを提供していて、MITライセンスなのですべて無料で使えます。

Webにアニメーションを実装する最適な方法についてさらに詳しく知りたい人や、CSSオンリーのアニメーションの代わりとしてJavaScriptアニメーションライブラリーの使用を検討している人は、『CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！』の役立つヒントやリソースも参考にしてください。

（原文：Fun Web Animation Effects with KUTE.js）

［翻訳：中井千尋／編集：Livit］