javascript - 如何使用 setInterval() 制作动画？

Question

我有一个包含 10 张图片的 slider 。切换图片无动画。我需要实现图片与动画的平滑过渡。没有 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 相比)。也可以实现贝塞尔曲线效果，但代码会变得更长、更复杂。