jQueryなどを使わずに単体でシンプルなアニメーションを実現してくれるライブラリAnimate Plusを紹介します。
非常にシンプルな記述で、よく使われる移動や回転、スケールや透明度などのCSSアニメーションを付与することができます。それだけでなくSVGアニメーションもほぼ同じような記述のしかたで実現できます。
注意が必要なのはサポートしているブラウザは最新に限られるようです。
ただ、検証したわけではないですがCSS3が使えればなんとなくちょっと古くてもいけるような気もします。
用意するもの
まずはGitHubからプラグイン一式をダウンロードしましょう。
基本的に必要なものは本体のjsのみです。
<script src="animate.min.js"></script>
基本的な使い方 CSSアニメーション
簡単なので一緒にオプションも記述しておきます。
設定の仕方はいくつかあるようなので、他の書き方が気になる方はGitHubをご覧ください。
<h1>アニメーションさせたい要素</h1>
animate({
el: "h1", //要素を指定。
translateX: 100, //アニメーション内容
opacity: .5, //アニメーション内容
duration: 3000, //アニメーションさせる時間
delay:0, //アニメーション開始の遅延時間
easing: "easeOutElastic 700", //イージング設定
loop:false, //アニメーションをループさせるかどうか
direction:"alternate" //アニメーションのループ方向の指定
begin:show, //アニメーション開始時に行う関数を指定
complete:out //アニメーション完了時に行う関数を指定
});
これでh1要素が100px右に動きながら透明度50%になるアニメーションが実装できます。
アニメーション内容は必要に応じて増減させます。可能なアニメーションはGitHubに全部載ってるので詳しく知りたい方はそちらをご確認ください。移動、回転、スケール、不透明度は問題ないです。
SVGアニメーションの実装
SVGアニメは始まりと終わりの色や座標や形を設定してアニメーションを作ります。
<svg version=“1.1” xmlns="http://www.w3.org/2000/svg"> <path /> </svg>
//塗りつぶしの色を配列に入れます。
var colors = ["#80f", "#fc0"];
//最初の形と最後の形のSVG情報を配列に入れます。
var points = [
"M54,271 L0,271 L0,103 L0,0 L142,0 L285,0 L285,103 L285,271 L230,271 L142,271 Z",
"M54,271 L71,172 L0,103 L98,89 L142,0 L186,89 L285,103 L213,172 L230,271 L142,224 Z"
];
animate({
el: "path", //SVGを描画するためのsvg系のタグを指定
fill: colors, //塗りつぶしの色を設定
d: points, //SVG情報を設定
duration: 3000,
loop:true,
direction:"alternate"
});
//アニメーションの停止処置はanimate.stop(指定要素)で出来ます。
var path = document.querySelector("path");
path.addEventListener("click", function() {
animate.stop(path);
});
SVGアニメーションっていうとちょっとめんどくさいイメージあったんですがこれだけ簡単に出来るなら色々試してみたくなりますね。公式にオプションの記述はありませんが、移動値っぽいパラメータもあるっぽいです。
ようやくSVGも一般的に使える環境が整ってきた感がありますし、チャンスをみて使っていきたいと思います。
