anime.js - にほんご。

Callback

更新日: 2018-06-25

アニメーションやタイムラインの開始時、実行中、終了時に関数を実行します。

名称type引数説明
updatefunctionanimation Objecttime = 0の時に呼び出されます。
beginfunctionanimation Objectアニメーションのdelayの後に呼び出されます。
completefunctionanimation Object全てのループが終了後だけ呼び出されます。

all

デモ

全てのコールバックを使用した例です。 要素をクリックするとアニメーションを開始します。

JavaScript

var updateLogEl2 = document.querySelector('#allCallbacks .update-log');
var beganLogEl2 = document.querySelector('#allCallbacks .began-log');
var completedLogEl2 = document.querySelector('#allCallbacks .completed-log');
 
var allCallbacks = anime({
  targets: '#allCallbacks .el',
  translateX: 250,
  delay: function(el, i) { return 1000 + (i * 100); },
  duration: function(el, i) { return 500 + (i * 500); }
});
 
allCallbacks.update = function(anim) {
  if (!anim.began) {
    updateLogEl2.value = 'begins in ' + Math.round(anim.delay - anim.currentTime) + 'ms';
    beganLogEl2.value = '';
  } else {
    updateLogEl2.value = 'begins in 0ms';
  }
  if (!anim.completed) {
    completedLogEl2.value = '';
  }
}
 
allCallbacks.begin =  function() { beganLogEl2.value = 'began'; };
allCallbacks.complete = function() { completedLogEl2.value = 'completed'; };

HTML

<div id="allCallbacks">
  <div class="logs">
    <input class="log update-log">
    <input class="log began-log">
    <input class="log completed-log">
  </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 class="line">
    <div class="square small shadow"></div>
    <div class="square small el"></div>
  </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;
}
 
.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;
}

update

update()は、インスタンスの再生中、 全てのフレームで呼び出されます。

var myAnimation = anime({
  targets: '#update .el',
  translateX: 250,
  delay: 1000,
  update: function(anim) {
    console.log(anim.currentTime + 'ms'); // 'myAnimation.currentTime'で現在のアニメーションの時間を取得し、ms単位で値を返します。
    console.log(anim.progress + '%'); // 'myAnimation.progress'で現在のアニメーションの進行状況を取得し、値を%で返します。
  }
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var updateLogEl = document.querySelector('#update .current-time-log');
var progressLogEl = document.querySelector('#update .progress-log');
 
var update = anime({
  targets: '#update .el',
  translateX: 250,
  delay: 1000,
  update: function(anim) {
    updateLogEl.value = 'current time : ' + Math.round(anim.currentTime) + 'ms';
    progressLogEl.value = 'progress : ' + Math.round(anim.progress) + '%';
  }
});

HTML

<div id="update">
  <div class="logs">
    <input class="log current-time-log">
    <input class="log progress-log">
  </div>
  <div class="square large shadow"></div>
  <div class="square large el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}
 
.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}
 
.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;
}

begin

begin()は、delayの終了後に一度だけ呼び出されます。

var myAnimation = anime({
  targets: '#begin .el',
  translateX: 250,
  delay: 1000,
  begin: function(anim) {
    console.log(anim.began); // 1000ms後にtrueを出力します。
  }
});

myAnimation.beganでアニメーションが始まっているかを確認し、 trueまたはfalseを返します。

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var beganLogEl = document.querySelector('#begin .began-log');
 
var begin = anime({
  targets: '#begin .el',
  translateX: 250,
  delay: 1000,
  begin: function(anim) {
    beganLogEl.value = 'began : ' + anim.began;
  }
});

HTML

<div id="begin">
  <div class="logs">
    <input class="log began-log" value="began : false">
  </div>
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}
 
.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}
 
.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;
}

run

run()は、delayの終了後、全てのフレームで呼び出されます。

var myAnimation = anime({
  targets: '#run .el',
  translateX: 250,
  delay: 1000,
  run: function(anim) {
    console.log(anim.currentTime);
  }
});

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var runLogEl = document.querySelector('#run .current-time-log');
var runProgressLogEl = document.querySelector('#run .progress-log');
 
var run = anime({
  targets: '#run .el',
  translateX: 250,
  delay: 1000,
  run: function(anim) {
    runLogEl.value = 'running';
    runProgressLogEl.value = 'progress : ' + Math.round(anim.progress) + '%';
  },
  complete: function(anim) {
    runLogEl.value = 'not running';
    runProgressLogEl.value = 'progress : 100%';
  }
});

HTML

<div id="run">
  <div class="logs">
    <input class="log current-time-log" value="not running">
    <input class="log progress-log" value="progress : 0%">
  </div>
  <div class="square large shadow"></div>
  <div class="square large el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}
 
.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}
 
.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;
}

complete

complete()は、アニメーションの終了後、一度だけ呼び出されます。

var myAnimation = anime({
  targets: '#complete .el',
  translateX: 250,
  complete: function(anim) {
    console.log(anim.completed);
  }
});

myAnimation.completedでアニメーションが終了してるかを確認し、 trueまたはfalseを返します。

デモ

要素をクリックするとアニメーションを開始します。

JavaScript

var completedLogEl = document.querySelector('#complete .completed-log');
 
var complete = anime({
  targets: '#complete .el',
  translateX: 250,
  complete: function(anim) {
    completedLogEl.value = 'completed : ' + anim.completed;
  }
});

HTML

<div id="complete">
  <div class="logs">
    <input class="log completed-log" value="completed : false">
  </div>
  <div class="square shadow"></div>
  <div class="square el"></div>
</div>

CSS

.shadow {
  position: absolute;
  opacity: .2;
}
 
.square {
  pointer-events: none;
  width: 28px;
  height: 28px;
  margin: 1px;
  font-size: 12px;
}
 
.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;
}

MIT license. © 2017 Julian Garnier.

このコンテンツはJulian Garnier(juliangarnier)によるanime.jsドキュメントを翻訳/改変したものです。