tween.jsでキャンセルできる直列なアニメーションを実装する
const TWEEN = require('tween.js') const [tween] = [...document.querySelectorAll('.animate')] .map(el => { const state = {x: 0} return new TWEEN.Tween(state) .to({x: 300}) .onUpdate(() => { el.style.transform = `translate(${state.x}px, 0)` }) }) .map((currentTween, i, tweens) => { const nextTween = tweens[i + 1] if (nextTween) currentTween.chain(nextTween) return currentTween }) tween.start() document.querySelector('.stop').onclick = () => tween.stop() requestAnimationFrame(function animate(time) { requestAnimationFrame(animate) TWEEN.update(time) })
気の利かないライブラリだとsindresorhus/p-cancelableとかでcancelableなPromisesにする感じなのかなと思うけど、tween.jsは丁度いいAPIなので楽にできた。