如何提高以下幻灯片动画的速度？

The following slide animation has inertia: the slide animation keeps going and then the speed decreases slowly over time. When interval reaches 100, the animation stops.

以下幻灯片动画具有惯性:幻灯片动画继续前进,然后速度随时间缓慢下降。当间隔达到100时,动画停止。

let interval = 1 // initial speed
const timer = function () {
  ++interval // decrease the speed
  slideThumbs(thumbs, direction) // do the sliding animation
  const timeOut = setTimeout(timer, interval)
  // stop animation when the speed reaches 100
  if (interval === 100) {
    clearTimeout(timeOut)
  }
}
timer()

It works. But it's extremely slow. How can I increase the overall speed? (From the initial sliding to when the animation stops?)

有用。但它非常慢。如何提高整体速度? (从最初的滑动到动画停止的时候?)

EDIT:

This is what's inside slideThumbs:

这就是slideThumbs中的内容:

const totalThumbs = newChildrenArr.length
const thumbWidth = 144 // thumb width plus margin
const slideLimit = (totalThumbs - 1) * thumbWidth
if (arrow === 'left') {
  store.state.translateX += 1 // add one pixel to the `transform: translateX` attribute
}

2 个解决方案

#1

The ++interval will increase the value of the interval. So the interval is increasing and slowing the animation.

++间隔将增加间隔的值。因此间隔增加并减慢动画。

Only thing I'd suggest is to decrease the delta between each call to a smaller value and reduce the interval from 100.

我建议的唯一的事情是减少每次调用较小值之间的差值,并将间隔从100减少。

Also look into doing some performance analysis of the slideThumbs method - it might be this that is causing the overhead, but without seeing the code it's difficult to test.

还要考虑对slideThumbs方法进行一些性能分析 - 这可能会导致开销,但是如果没有看到代码就很难测试。

(Edit - got the code now on the question). How much time does the transform take? I'd suggest it might be this which is causing the poor performance as it'll be executed a lot in this case.

(编辑 - 现在得到了关于问题的代码)。转换需要多长时间?我建议这可能导致性能不佳,因为在这种情况下它会被执行很多。

#2

Here is an JSFiddle example of how I'd do what I said in the comments

这是一个JSFiddle示例,说明我在评论中如何做

 function ClosureWrapper(callback) {
  var distance = 50;
  var timer = Trigger;

  function Trigger() {
    if (distance <= 0) {
      callback();
    } else {
      distance--;
      //do something
      console.log("distance moved this interval is: " + distance);
    }
  }
  return timer;
}

var someTimer = setInterval(ClosureWrapper(function() {
  console.log("Movement Finished")
  clearInterval(someTimer);
}), 100);

#1