Question

我一直在浏览互联网上的指南，但我还没有找到一种方法让一条线从一个位置动画到一个新位置。

显然这需要＆＃34;补间＆＃34;，以创建流畅的动画，并且不是内置的？我所能找到的只是＃34;查看这个为你处理这个问题的JavaScript框架！＆＃34;

类似于：

的vanilla JavaScript（或jQuery）中是否存在某些东西

animateLine(current, target, duration, easingFunction)
{
    move(line.x1, target.x1, duration, easingFunction);
    move(line.y1, target.y1, duration, easingFunction);
    move(line.x2, target.x2, duration, easingFunction);
    move(line.y2, target.y2, duration, easingFunction);
}

我想迭代一系列行，在animateLine(lines[i], targets[i], duration, easingFunction)内调用setInterval()。

Answer 1

为这只猫设置皮肤的方法很多......但是，对于逐帧动画，你需要requestAnimationFrame。此函数调用传递给它的任何内容，并传递时间戳。然后，只需更改这些“线”的属性即可将它们移动到屏幕上。

如果您为<hr>元素制作动画，则可以将其置于绝对位置，然后每帧更改top数量：

HTML：

<hr id="myLine"/>

的CSS：

#myLine { position:absolute; width:100% }

JS：

function easeOutQuad(t) { return t*(2-t) };
var startTime = null,
    percent, elapsed,
    duration = 3000,
    end = 400,
    hr = document.getElementById('myLine');

function step(timestamp) {
    if (startTime === null) startTime = timestamp;

    elapsed = timestamp - startTime;
    percent = elapsed/duration;

    if (elapsed < duration) {

        // apply easing fn
        percent = easeOutQuad(percent);

        var frameDist = end * percent;
        hr.style.top = frameDist + 'px';
        // next frame
        requestAnimationFrame(step);
    } else {
        // on complete...
    }
}

// begin
requestAnimationFrame(step);

这是一个小提琴：http://jsfiddle.net/oytwdk9s/

如果您想支持IE9及更早版本，则requestAnimationFrame需要polyfill。

在vanilla JS中动画一个简单的2D线

1 个答案: