如何在anime.js 中使用“seek”来控制滚动时的动画？举个例子，请

Question

更新的anime.js 文档（Controls->Seek）说你可以在滚动时控制动画，但是没有例子。

谁能举例说明如何设置animation.seek？

https://animejs.com/documentation/#seekAnim

var animation = anime({
  targets: '.seek-anim-demo .el',
  translateX: 270,
  delay: function(el, i) { return i * 100; },
  elasticity: 200,
  easing: 'easeInOutSine',
  autoplay: false
});

var seekProgressEl = document.querySelector('.seek-anim-demo .progress');
seekProgressEl.oninput = function() {
  animation.seek(animation.duration * (seekProgressEl.value / 100));
};

Answer 1

这就是你要找的。

JavaScript：

function getScrollPercent() {
   var h = document.documentElement,
   b = document.body,
   st = 'scrollTop',
   sh = 'scrollHeight';
   return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
 }
 const
 // parent = document.querySelector('.outerHeight'),
 els = document.querySelectorAll('.el'),
 tl = anime.timeline({ autoplay: false });
    
 _.map(els, el => {
   anime.set(el, {
     top: anime.random(0, 150) + 'vh',
     left: anime.random(0, 100) + 'vw' });
    
   tl.add({
     targets: el,
     translateX: anime.random(-500, 500) + '%',
     translateY: anime.random(-500, 500) + '%',
     scale: anime.random(0.3, 1.7),
     rotate: anime.random(-365, 365) + 'deg',
     duration: anime.random(500, 5000), easing: 'easeInOutCirc' },
   0);
 });
    
 // new AnimePlayer({ add: tl })
    
 window.addEventListener('scroll', () => {
   const persentage = getScrollPercent();
   tl.seek(tl.duration * (persentage * 0.01));
});

资料来源：Codepen（https://codepen.io/gaougalos/pen/bJXYZa）