为了在滚动时控制动画，如何在anime.js中使用“搜索”？请举例，

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）