Callback & Promises

update

アニメーションを開始すると同時に、全てのフレームでコールバックがトリガーされます。

var updates = 0;

anime({
  targets: '.update-demo .el',
  translateX: 270,
  delay: 1000,
  direction: 'alternate',
  loop: 3,
  easing: 'easeInOutCirc',
  update: function(anim) {
    updates++;
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
    updateLogEl.value = 'updates : '+updates;
  }
});

デモ

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

JavaScript

var progressLogEl = document.querySelector('#update .progress-log');
var updateLogEl = document.querySelector('#update .current-time-log');

var updates = 0;
var update = anime({
  targets: '#update .el',
  translateX: 270,
  delay: 1000,
  direction: 'alternate',
  loop: 3,
  easing: 'easeInOutCirc',
  update: function(anim) {
    updates++;
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
    updateLogEl.value = 'updates : '+updates;
  }
});

HTML

<div id="update">
  <div class="logs">
    <input class="log progress-log">
    <input class="log current-time-log">
  </div>
  <div class="circle large shadow"></div>
  <div class="circle large 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%;
}

.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 & complete

begin()は、アニメーション開始時に一度だけ呼び出されます。

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

アニメーションのdurationが0の場合、 begin()とcomplete()が両方とも呼び出されます。

anime({
  targets: '.begin-complete-demo .el',
  translateX: 240,
  delay: 1000,
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : ' + Math.round(anim.progress) + '%';
    beginLogEl.value = 'began : ' + anim.began;
    completeLogEl.value = 'completed : ' + anim.completed;
  },
  begin: function(anim) {
    beginLogEl.value = 'began : ' + anim.began;
  },
  complete: function(anim) {
    completeLogEl.value = 'completed : ' + anim.completed;
  }
});

デモ

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

JavaScript

var progressLogEl = document.querySelector('#begin .progress-log');
var beginLogEl = document.querySelector('#begin .begin-log');
var completeLogEl = document.querySelector('#begin .completed-log');
var begin = anime({
  targets: '#begin .el',
  translateX: 240,
  delay: 1000,
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : ' + Math.round(anim.progress) + '%';
    beginLogEl.value = 'began : ' + anim.began;
    completeLogEl.value = 'completed : ' + anim.completed;
  },
  begin: function(anim) {
    beginLogEl.value = 'began : ' + anim.began;
  },
  complete: function(anim) {
    completeLogEl.value = 'completed : ' + anim.completed;
  }
});

HTML

<div id="begin">
  <div class="logs">
    <input class="log progress-log">
    <input class="log begin-log">
    <input class="log completed-log">
  </div>
  <div class="circle large shadow"></div>
  <div class="circle large 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%;
}

.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;
}

loopBegin & loopComplete

loopBegin()は、ループが始まるたびに一度呼び出されます。

loopComplete()は、ループが終わるたびに一度呼び出されます。

var loopBegan = 0;
var loopCompleted = 0;

anime({
  targets: '.loopBegin-loopComplete-demo .el',
  translateX: 240,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutCirc',
  loopBegin: function(anim) {
    loopBegan++;
    beginLogEl.value = 'loop began : ' + loopBegan;
  },
  loopComplete: function(anim) {
    loopCompleted++;
    completeLogEl.value = 'loop completed : ' + loopCompleted;
  }
});

デモ

JavaScript

var beginLogEl = document.querySelector('#loopBegin .begin-log');
var completeLogEl = document.querySelector('#loopBegin .completed-log');
var loopBegan = 0;
var loopCompleted = 0;

var loopBegin = anime({
  targets: '#loopBegin .el',
  translateX: 240,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutCirc',
  loopBegin: function(anim) {
    loopBegan++;
    beginLogEl.value = 'loop began : ' + loopBegan;
  },
  loopComplete: function(anim) {
    loopCompleted++;
    completeLogEl.value = 'loop completed : ' + loopCompleted;
  }
});

HTML

<div id="loopBegin">
  <div class="logs">
    <input class="log begin-log">
    <input class="log completed-log">
  </div>
  <div class="circle large shadow"></div>
  <div class="circle large 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%;
}

.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;
}

change

change()は、アニメーションのdelayとendDelay間の全てのフレームで呼び出されます。

var changes = 0;

anime({
  targets: '.change-demo .el',
  translateX: 270,
  delay: 1000,
  endDelay: 1000,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  },
  change: function() {
    changes++;
    changeLogEl.value = 'changes : ' + changes;
  }
});

デモ

JavaScript

var progressLogEl = document.querySelector('#change .progress-log');
var changeLogEl = document.querySelector('#change .changes-log');
var changes = 0;

var change = anime({
  targets: '#change .el',
  translateX: 270,
  delay: 1000,
  endDelay: 1000,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  },
  change: function() {
    changes++;
    changeLogEl.value = 'changes : ' + changes;
  }
});

HTML

<div id="change">
  <div class="logs">
    <input class="log progress-log">
    <input class="log changes-log">
  </div>
  <div class="circle large shadow"></div>
  <div class="circle large 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%;
}

.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;
}

changeBegin & changeComplete

changeBegin()は、アニメーションが動き出すたびに呼び出されます。

changeComplete()は、アニメーションが止まるたびに呼び出されます。

アニメーションの方向はchangeBegin()とchangeCompleteが呼び出される順序に影響します。

var changeBegan = 0;
var changeCompleted = 0;

anime({
  targets: '.changeBegin-chnageComplete-demo .el',
  translateX: 240,
  delay: 1000,
  endDelay: 1000,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  },
  changeBegin: function(anim) {
    changeBegan++;
    beginLogEl.value = 'change began : ' + changeBegan;
  },
  changeComplete: function(anim) {
    changeCompleted++;
    completeLogEl.value = 'change completed : ' + changeCompleted;
  }
});

デモ

JavaScript

var progressLogEl = document.querySelector('#changeBegin .progress-log');
var beginLogEl = document.querySelector('#changeBegin .begin-log');
var completeLogEl = document.querySelector('#changeBegin .completed-log');
var changeBegan = 0;
var changeCompleted = 0;

var changeBegin = anime({
  targets: '#changeBegin .el',
  translateX: 240,
  delay: 1000,
  endDelay: 1000,
  loop: true,
  direction: 'alternate',
  easing: 'easeInOutCirc',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  },
  changeBegin: function(anim) {
    changeBegan++;
    beginLogEl.value = 'change began : ' + changeBegan;
  },
  changeComplete: function(anim) {
    changeCompleted++;
    completeLogEl.value = 'change completed : ' + changeCompleted;
  }
});

HTML

<div id="changeBegin">
  <div class="logs">
    <input class="log progress-log">
    <input class="log begin-log">
    <input class="log completed-log">
  </div>
  <div class="circle large shadow"></div>
  <div class="circle large 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%;
}

.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;
}

終了Promise

アニメーションが終了すると、 全てのアニメーションインスタンスはfinishedPromiseを返します。

animation.finished.then(function() {
  // やりたいこと
});

PromiseはIE < 11はサポートしていません。

var progressLogEl = document.querySelector('.promise-demo .progress-log');
var promiseEl = document.querySelector('.promise-demo .el');
var finishedLogEl = document.querySelector('.promise-demo .finished-log');
var demoPromiseResetTimeout;

function logFinished() {
  anime.set(finishedLogEl, {value: 'Promise resolved'});
  anime.set(promiseEl, {backgroundColor: '#18FF92'});
}

var animation = anime.timeline({
  targets: promiseEl,
  delay: 400,
  duration: 500,
  endDelay: 400,
  easing: 'easeInOutSine',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  }
}).add({
  translateX: 250
}).add({
  scale: 2
}).add({
  translateX: 0
});

animation.finished.then(logFinished);

デモ

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

JavaScript

var progressLogEl = document.querySelector('#finished .progress-log');
var promiseEl = document.querySelector('#finished .el');
var finishedLogEl = document.querySelector('#finished .finished-log');
var demoPromiseResetTimeout;

function logFinished() {
  anime.set(finishedLogEl, {value: 'Promise resolved'});
  anime.set(promiseEl, {backgroundColor: '#18FF92'});
}

var animation = anime.timeline({
  targets: promiseEl,
  delay: 400,
  duration: 500,
  endDelay: 400,
  easing: 'easeInOutSine',
  update: function(anim) {
    progressLogEl.value = 'progress : '+Math.round(anim.progress)+'%';
  }
}).add({
  translateX: 250
}).add({
  scale: 2
}).add({
  translateX: 0
});

animation.finished.then(logFinished);

HTML

<div id="finished">
  <div class="logs">
    <input class="log progress-log">
    <input class="log finished-log">
  </div>
  <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%;
}

.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;
}