Javascript动画-数学

我有一个关于JS动画的问题。我不知道其他库是如何制作动画的，但我见过一个带有

setTimeout（）

的库，这可能非常简单。但是我对数学有点困惑。比方说，我想将元素的高度（使用“纯”javascript）从80px设置为240px。因此，我需要首先获取元素的当前高度

parseInt（element.style.height，10）

——这应该只返回一个没有px的数值。或者使用

getComputedStyle（）

或其他任何方法。所以现在我需要计算初始高度和最终高度之间的差值。所以它是160px。现在我想将动画持续时间设置为2000ms

问题：如何计算此动画的超时和“步长”高度（调用

setTimeout

时我将添加到最后一个高度的高度）

代码：

函数动画（元素、高度、时间）{
var initHeight=parseInt（elem.style.height，10）；
/*var styles=window.getComputedStyle（elem）；
var initHeight=styles.getPropertyValue（'height'）*/
变量diffHeight=（initHeight>height？（initHeight-height）：
（（initHeight！=height）？（height-initHeight）：false）；
var stepHeight=？？？要添加的高度？？？？？？？
变量持续时间=？？？超时持续时间？？？？？？
var lasthheight=initHeight；
动画（）；
函数动画（）{
setTimeout（函数（）{
lastHeight+=八；
elem.style.height=lastHeight+'px'；
如果（lastHeight

---

PS:我不想使用jQuery

您是否试图实现以下目标：

另外，

setTimeout

将在指定延迟后运行<代码>设置间隔将以特定延迟循环功能。但是使用

setInterval

，您应该注意在阈值限制上清除它

您可以使用

速度
控制平滑度。我已将速度降至
10ms

代码


函数动画（元素、高度、速度、持续时间）{
var限制=持续时间/速度；
变量高度增量=（高度-元素高度）/极限；
var计数=0；
var anim_interval=setInterval（函数（）{
var h=parseFloat（elem.style.height | | elem.clientHeight）；
元素样式高度=（h+高度增量）+“px”；
如果（计数+>=限制）
窗口清除间隔（动画间隔）
}，速度）
}
var el=document.getElementById（'square'）；
制作动画（el，240，102000）
.square{
高度：80px；
宽度：80px；
边框：2件纯银；
}
为什么不向元素添加CSS
transition
属性，然后使用JS设置CSS样式？：）或者，您希望使用恒定速度动画，在该动画中，您每固定（毫秒）秒将大小增加一个固定量，在这种情况下，您只需继续这样做，直到达到高度为止。或者，您希望每x（毫秒）秒将高度增加足够多，以便在固定数量的动画步骤后达到最终高度。在这种情况下，它只是
increaseBy=heightDifference/animationSteps
。因为我对JS比对CSS3更感兴趣。我可以用CSS做些什么，但是CSS中的动画对我来说是不自然的：每2000/160像素完成一次。。。12,5毫秒，或者如果你喜欢每2次等待25毫秒。我不想使用恒定速度。因为我想设置动画时间，它取决于速度。。谢谢尼娜·斯科尔斯：）有没有办法让它更流畅？我已经更新了我的答案。你可以通过速度来控制平滑度。你还应该仔细观察。对于动画，这比
setTimeout
或
setInterval
function animate( elem, height, time ) {
    var initHeight = parseInt(elem.style.height, 10);
    /* var styles = window.getComputedStyle(elem);
       var initHeight = styles.getPropertyValue('height'); */

    var diffHeight = ( initHeight > height ? ( initHeight - height ) :
    (( initHeight != height ) ? ( height - initHeight ) : false ) );

    var stepHeight = ????? height to be added ???????
    var duration = ????? duration of timeout ??????

    var lastHeight = initHeight;
    animation();
    function animation () {
        setTimeout(function () {
            lastHeight += stepHeight;
            elem.style.height = lastHeight + 'px';

            if ( lastHeight < height ) { animation(); }
            else { elem.style.height = height + 'px'; }  // set required value if is exceeded
        }, duration);
    }
}

var el = document.getElementById('square');
animate( el, 240, 2000 );