如何使用setInterval（）制作动画？

Question

我有10张图片的滑块。 切换无动画的图片。 我需要用动画实现图片的平滑过渡。 没有CSS-transition ，带有setInterval()谢谢！

Answer 1

这是如何为html元素的不透明度设置动画的示例：

 var o = 1.0; // start opacity var d = false; // direction. false = decrease, true = increase var s = 0.02; // step function anim() { if (d == false) { o -= s; if (o < 0.0) { o = 0.0; d = true; } } else { o += s; if (o > 1.0) { o = 1.0; d = false; } } document.getElementById("pic").style.opacity = o; } setInterval(anim, 1000/60); // 60 FPS. 

 <div id="pic" style="background:red;width:100px;height:100px;">Picture</div> 

它的代码很慢，很长，并且只有线性效果（与CSS相比）。 也可以实现贝塞尔曲线效果，但是代码将变得更长，更复杂。

Answer 2

您是否考虑过使用jQuery之类的东西？ 它带有.animate()类的函数，可让您执行所需的动画。 还有其他的javascript库可以添加类似的功能。 在这里看看它们： jQuery ， Velocity.js ， GSAP