Question

以下幻灯片动画具有惯性：幻灯片动画继续前进，然后速度随时间缓慢下降。当interval到达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()

有效。但它非常慢。如何提高整体速度？（从最初的滑动到动画停止的时候？）

修改

这就是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
}

Answer 1

++间隔将增加间隔的值。所以间隔越来越大，动画越来越慢。

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

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

（编辑 - 现在有问题的代码）。转换需要多长时间？我建议可能会导致性能不佳，因为在这种情况下它会被执行很多。

Answer 2

Here是一个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);

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

2 个答案: