anime.js、君に決めた！【DOMアニメーション】

webページで様々な動きを実現できるjQuery。そのプラグイン（拡張パック）に、『anime.js』というものがあります。
皆様ご存じでしょうか？

というわけで、今日は簡単にanime.jsを紹介しようと思います。

コードはシンプル、動作は軽快

anime.jsのダウンロードはこちらから

anime.jsは、シンプルなコードで、軽快なDOMアニメーションを実現できます。

たとえば、まずhtmlとcssでオレンジ色のボールを作ります。

<div id="ball"></div>　//←これがボールになる。

<style >
#ball{
  background:orange;
  width:50px;
  height:50px;
  border-radius:50%;
}
</style>

結果は・・・↓↓↓

ではでは、このオレンジボールに魔法をかけましょう。ダウンロードしたanime.min.jsとjqueryを読み込んで、魔法の呪文を唱えます。

<script type="text/javascript">
var test = anime({
   targets: '#ball',
   translateX: {
      value: 500,
      duration: 1500
   },
   loop：true
});
</script>

このように、htmlとcssで作ったボールを簡単に動かすことができます。

もっと工夫すると、こんなこともできます。

<script type="text/javascript">
var test2 = anime({
   targets: '#ball2',
   translateY: {
      value: '150px',
      duration: 2000,
      delay: 0,
      easeing: 'easeInOutExpo'
   },
   rotateY: {
      value: '180deg',
      duration: 1000,
      delay: 500,
      easeing: 'easeOutBounce'
   },
   scale: {
      value: 2,
      duration: 1000,
      delay: 800,
      easing: 'easeInOutQuart'
   },
   elasticity: 500,
   duration: 2000,
   loop: true
});
</script>

色を変えたり、回転させたり、大きさを変えたり、様々な動きをさせたり、、、web制作において出てくるであろう、ちょっとしたアニメーションなら、anime.jsできまりですね！