mo.jsのinstall アニメーション起動

いろいろなモーションを作れるJSライブラリ、mo · jsをinstallして使用してみました。

Install

GitHubのリポジトリやnpm bower cdnなどでinstallできます。

ドキュメント

readme.md
チュートリアル

描画する

チュートリアルを参考に進めていきます。
基本的にはnew mojs.xxx({ 設定 })で描画できました。

sample.js

const shape = new mojs.Shape({
  shape: 'circle',
  isShowStart: true
});

また設定部分の値を{初期値 : 終了値}で指定した後にplay()などを行うとアニメーションが起動します。

sample.js

const shape = new mojs.Shape({
  shape: 'circle',
  isShowStart: true,
  x: { 0 : 200 },
  duration: 1000,
  repeat: 999
}).play();

他にもアニメーションに合わせてonStart onUpdateなども使用出来ます。

sample.js

let count = 0;

const shape = new mojs.Shape({
  shape: 'circle',
  isShowStart:  true,
  x: { 0 : 200 },
  duration: 1000,
  repeat: 999,
  onRepeatComplete () {
    count += 1;
    if (2 > count) return;
    shape
      .tune({
        fill: 'cyan'
      })
      .replay();
  },
}).play();

また他にもhtml要素などもアニメーションすることができます。

sample.html

<div id="block">Block</div>
<div id="block2">Block2</div>
<div id="block3">Block3</div>

sample.js

const PROPERTIES = {
  y: { 0 : 100 },
  scale: { 0 : 25 },
  display: 'block'
};

const block = new mojs.Html({
  el: '#block',
  y: PROPERTIES.y,
  scale: PROPERTIES.scale,
  display: PROPERTIES.display,
  duration: 4000,
  onComplete () {
    block.stop();
    block2.play();
  }
}).play();

const block2 = new mojs.Html({
  el: '#block2',
  y: PROPERTIES.y,
  scale: PROPERTIES.scale,
  display: PROPERTIES.display,
  duration: 4000,
  onComplete () {
    block2.stop();
    block3.play();
  }
});

const block3 = new mojs.Html({
  el: '#block3',
  y: PROPERTIES.y,
  scale: PROPERTIES.scale,
  display: PROPERTIES.display,
  duration: 4000
});