Helpers

remove

実行中のアニメーションやタイムラインからターゲットを削除します。

targetsパラメータはtargetsプロパティと同じ値を指定することができます。

anime.remove(targets);

anime({
  targets: '.remove-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutQuad'
});

document.querySelector('.remove-el-button').addEventListener('click', function() {
  anime.remove('.remove-demo .line:nth-child(2) .el');
});

デモ

"2番めを削除"をクリックすると2番目の要素のアニメーションが停止します。

JavaScript

var remove = anime({
  targets: '#remove .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutQuad'
});

document.querySelector('.remove').addEventListener('click', function() {
  anime.remove('#remove .line:nth-child(2) .el');
});

HTML

<div id="remove">
  <div class="line">
    <div class="square small shadow"></div>
    <div class="square small el"></div>
  </div>
  <div class="line">
    <div class="square small shadow"></div>
    <div class="square small el"></div>
  </div>
  <div class="line">
    <div class="square small shadow"></div>
    <div class="square small el"></div>
  </div>
</div>
<div class="player">
  <button class="remove">2番目を削除</button>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.player {
  opacity: .4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 10px;
}

.player button {
  position: relative;
  display: block;
  margin: 0 0 0 -1px;
  padding: 5px 10px;
  font-size: 12px;
  text-transform: uppercase;
  border: 1px solid #000;
  background-color: transparent;
  color: #000;
}

get

要素の元の値を返します。

anime.get(target, propertyName, unit);

anime.jsはgetComputedStyleを使用して元のCSSを取得するため、 ほとんどの場合、値は'px'で返します。 3番目の引数(オプション)を指定すると希望の単位に値を変換します。

anime.get(domNode, 'width', 'rem');

CSS transforms : インラインで指定された値のみを取得することが出来ます。

var logEl = document.querySelector('.get-value-demo-log');
var el = document.querySelector('.get-value-demo .el');

logEl.innerHTML = '';
logEl.innerHTML += '".el" width is :<br>';
logEl.innerHTML += '"' + anime.get(el, 'width', 'px') + '"';
logEl.innerHTML += ' or "' + anime.get(el, 'width', 'rem') + 'rem"'

デモ

JavaScript

var logEl = document.querySelector('#get .get-log');
var el = document.querySelector('#get .el');

logEl.innerHTML = '';
logEl.innerHTML += '".el" width is :<br>';
logEl.innerHTML += '"' + anime.get(el, 'width', 'px') + '"';
logEl.innerHTML += ' or "' + anime.get(el, 'width', 'rem') + 'rem"'

HTML

<div id="get">
  <div class="logs">
    <div class="log get-log"></div>
  </div>
  <div class="circle large el"></div>
</div>

CSS

.circle {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
  border-radius: 50%;
}

.large {
  width: 48px;
  height: 48px;
}

.logs {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

.log {
  width: 100%;
  height: 22px;
  background: transparent;
  color: currentColor;
  border: none;
  font-size: 16px;
  text-align: center;
}

set

指定したターゲットにすぐに値を設定します。

anime.set(targets, {property: value});

anime.set('.set-value-demo .el', {
  translateX: function() { return anime.random(50, 250); },
  rotate: function() { return anime.random(0, 360); },
});

デモ

JavaScript

var set = anime.set('#set .el', {
  translateX: function() { return anime.random(50, 250); },
  rotate: function() { return anime.random(0, 360); },
});

HTML

<div id="set">
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
  <div class="square small shadow"></div>
  <div class="square small el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.small {
  width: 18px;
  height: 18px;
}

random

特定の範囲内のランダムな整数を返します。

anime.random(minValue, maxValue);

function randomValues() {
  anime({
    targets: '.random-demo .el',
    translateX: function() {
      return anime.random(0, 270);
    },
    easing: 'easeInOutQuad',
    duration: 750,
    complete: randomValues
  });
}

randomValues();

デモ

JavaScript

function randomValues() {
  anime({
    targets: '.random-demo .el',
    translateX: function() {
      return anime.random(0, 270);
    },
    easing: 'easeInOutQuad',
    duration: 750,
    complete: randomValues
  });
}

randomValues();

HTML

<div id="random">
  <div class="circle small shadow"></div>
  <div class="circle small el"></div>
  <div class="circle small shadow"></div>
  <div class="circle small el"></div>
  <div class="circle small shadow"></div>
  <div class="circle small el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.circle {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
  border-radius: 50%;
}

.small {
  width: 18px;
  height: 18px;
}

tick

外部のrequestAnimationFrameループを使ってアニメーションします。

animation.tick(time)

anime.jsに組み込まれているRAF(requestAnimationFrame)が動かないようにするために autoplayをfalseにするのを忘れないようにしてください。

var animation = anime({
  targets: '.tick-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutQuad',
  autoplay: false
});

function loop(t) {
  animation.tick(t);
  customRAF = requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

デモ

JavaScript

var animation = anime({
  targets: '#tick .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutQuad',
  autoplay: false
});

function loop(t) {
  animation.tick(t);
  customRAF = requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

HTML

<div id="tick">
  <div class="circle shadow"></div>
  <div class="circle el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.circle {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
  border-radius: 50%;
}

running

現在実行中の全てのanime.jsインスタンスの配列を返します。

anime.running

var runninLogEl = document.querySelector('.running-log');

anime({
  targets: '.running-demo .square.el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'linear'
});

anime({
  targets: '.running-demo .circle.el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutCirc'
});

anime({
  targets: '.running-demo .triangle.el',
  translateX: 270,
  direction: 'alternate',
  easing: 'easeInOutQuad',
  loop: true,
  update: function() {
    runninLogEl.innerHTML = 'there are currently ' + anime.running.length + ' instances running';
  }
});

デモ

JavaScript

var runninLogEl = document.querySelector('#running .log');

anime({
  targets: '#running .square.el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'linear'
});

anime({
  targets: '#running .circle.el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutCirc'
});

anime({
  targets: '#running .triangle.el',
  translateX: 270,
  direction: 'alternate',
  easing: 'easeInOutQuad',
  loop: true,
  update: function() {
    runninLogEl.innerHTML = '現在 ' + anime.running.length + '個のインスタンスが動いています';
  }
});

HTML

<div id="running">
  <div class="square shadow"></div>
  <div class="square el"></div>
  <div class="circle shadow"></div>
  <div class="circle el"></div>
  <div class="triangle shadow"></div>
  <div class="triangle el"></div>
  <div class="log runnning-log"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}

.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.circle {
  border-radius: 50%;
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}

.triangle {
  pointer-events: none;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 17px 10px;
  border-color: transparent transparent currentColor transparent;
}

.log {
  width: 100%;
  height: 22px;
  background: transparent;
  color: currentColor;
  border: none;
  font-size: 16px;
  text-align: center;
}