ユーザビリティを高めるためにちょっとしたアニメーションを組み込むアプリ、サイトが増えています。スプラッシュ的なものではなく、押した時に反応していることを確認したり、処理中である旨を通知するのに使えます。 そんなアニメーションを手軽に扱えるライブラリがAnimate Plusです。CSSやSVGを使いつつ、JavaScriptで手軽にアニメーションを実現します。

Animate Plusの使い方

Animate Plusのサンプルです。ボタンにマウスポインタを当てたタイミングでアニメーションしています。

サンプルとして、次のようなコードがあります。1つめの引数から2つめの引数に変化するイメージです。

var colors = ["#0bf", "#fc0"];
var points = ["96 180 37 180 0 180 0 69 0 0 96 0 191 0 191 69 191 180 154 180",
              "95 147 36 180 50 114 0 69 67 61 95 0 122 61 190 69 139 114 153 180"];

animate({
  el: "polygon",
  easing: "easeOutCubic",
  translateX: 200,
  fill: colors,
  points: points
});

Animate Plusを使うことでCSSやSVGを使ったスムーズなアニメーション処理が手軽に描けるようになります。イージングは30種類近く提供されており、様々なアニメーションが実現できるでしょう。

Animate PlusはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

Animate Plus Example bendc/animate-plus