Javascript 缓动不动画

Question

尝试在 javascript（没有 jQuery）中实现简单的缓动，但不幸的是，当单击按钮时似乎没有任何动画（见下文）。

我的目标是通过补间第一个项目的左边距属性来使隐藏的列表项目（最后一个项目）可见。我知道这不是 CSS 问题，因为手动修改样式会移动列表，但我不确定问题是什么。我的猜测是我如何调用 ease 函数，但更改参数仍然对我不起作用。

缓动部分如下，完整代码在这里：Fiddle

JS：

var start = document.getElementById('start'),
    list = document.getElementById('my-list'),
    imgs = list.getElementsByTagName('img'),
    last_img = imgs[imgs.length -1 ];

    ease = function(t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t + b;
            return -c/2 * ((--t)*(t-2) - 1) + b;
    },

    shift_imgs = function(el) {
        var orig_value = parseFloat( el.style.marginLeft ),
            end_value = -37,
            change = Math.abs( end_value - orig_value ),
            duration = 1, // 1 second
            time = 0;

        for ( var i = 0; i < change; i++ ) {
            setTimeout(function() {
                el.style.marginLeft = ( parseFloat( el.style.marginLeft ) + 1 ) + 'px';
                }, time);
            time = ease(time, orig_value, change, duration);
        }
    };

start.onclick = function() {
    shift_imgs(last_img);
}

Answer 1

您的orig_value 是NaN，因为parseFloat(el.style.marginLeft) 不会返回任何内容，即使您在css 中设置了初始值。即：margin-left: 15px; 仍然不会返回任何内容。

你可以使用window.getComputedStyle(...).getPropertyValue，类似这样：

window.getComputedStyle(el, null).getPropertyValue("margin-left");

这将为您提供实际的当前值以及px，即：0px。
（即使在 CSS 中设置为 em 或pt)

所以你需要删除px 并获取浮点值。

你可以把它包装成一个类似这样的小助手：

getElementMarginLeftAsFloat = function (el) {
    var pxValue = window.getComputedStyle(el, null).getPropertyValue("margin-left");
    var valueOnly = pxValue.substring(0, pxValue.length - 2);

    return parseFloat(valueOnly);
}

另一个问题是实际元素的移动发生在循环内执行的setTimeout 内。调用setTimeout 的循环导致每个setTimeout 几乎同时排队，因此它们几乎同时执行，导致元素只是跳转。

您可以在方法中使用递归子方法，该方法使用setTimeout 调用自身，直到完成。这样每个setTimeout 仅在指定的时间间隔后才被触发，从而使它们在指定的时间间隔内足够接近地执行，类似于：

shift_imgs = function (el) {
    var orig_value = getElementMarginLeftAsFloat(el),
        end_value = -37,
        change = Math.abs(end_value - orig_value),
        duration = 1, // 1 second
        time = 0;

    function doShift() {
        currentValue = getElementMarginLeftAsFloat(el);

        if(currentValue+1 > change){
            return;
        };

        el.style.marginLeft = (currentValue + 1) + 'px';
        time = ease(time, orig_value, change, duration);
        setTimeout(doShift, time);
    }

    doShift();
};

通过让setTimeout 函数调用自身，它释放资源，确保元素的绘制可以在每次“迭代”之间进行。

我更新了你的代码以使用这种方法，现在它似乎可以工作了。

---

DEMO - 使用计算样式动画运动

---

您很可能可以通过许多其他方式执行此操作，也可以肯定地美化此代码，但这应该可以让您以任何一种方式开始。