HTML5：如何制作虚线动画

Question

HTML5：如何制作虚线动画

javascripthtmlanimationcanvaspath

4

作为一个相对新手的HTML5游戏玩家，我想问一下是否有可能沿着路径动画化虚线？就像诺基亚时代的贪吃蛇一样，只是用虚线...

我有一个虚线（表示电流流动），我想将其动画化为“移动”，以显示电流正在流向某个地方。

感谢Rod在this帖子上的回答，我已经让虚线走了起来，但不确定如何开始让它动起来。有人知道从哪里开始吗？

谢谢！

- crawf

2个回答

0

您可以使用SNAPSVG库创建虚线动画。

请在此处查看教程 DEMO

- Khanakia

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ariel · Accepted Answer

根据这篇文章（作者为phrogz），我已经在这里解决了问题。

我的操作步骤如下：

添加一个start参数，该参数为0到99之间的数值
计算dashSize，将破折号数组的内容相加得到
根据start百分比计算出dashOffSet，该偏移量为dashSize的一部分
从x、y中减去偏移量并添加到dx、dy中
只有当偏移量消失时（它是负数，请记住），才开始绘制
添加一个setInterval来更新start，从0到99，步长为10

更新

原始算法不能用于垂直或负倾斜线。对于这些情况，添加了一个检查来基于y斜率使用倾斜度，而不是基于x斜率。

演示在此处

更新的代码如下：

if (window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.lineTo) {
    CanvasRenderingContext2D.prototype.dashedLine = function(x, y, x2, y2, dashArray, start) {
        if (!dashArray) dashArray = [10, 5];
        var dashCount = dashArray.length;
        var dashSize = 0;
        for (i = 0; i < dashCount; i++) dashSize += parseInt(dashArray[i]);
        var dx = (x2 - x),
            dy = (y2 - y);
        var slopex = (dy < dx);
        var slope = (slopex) ? dy / dx : dx / dy;
        var dashOffSet = dashSize * (1 - (start / 100))
        if (slopex) {
            var xOffsetStep = Math.sqrt(dashOffSet * dashOffSet / (1 + slope * slope));
            x -= xOffsetStep;
            dx += xOffsetStep;
            y -= slope * xOffsetStep;
            dy += slope * xOffsetStep;
        } else {
            var yOffsetStep = Math.sqrt(dashOffSet * dashOffSet / (1 + slope * slope));
            y -= yOffsetStep;
            dy += yOffsetStep;
            x -= slope * yOffsetStep;
            dx += slope * yOffsetStep;
        }
        this.moveTo(x, y);
        var distRemaining = Math.sqrt(dx * dx + dy * dy);
        var dashIndex = 0,
            draw = true;
        while (distRemaining >= 0.1 && dashIndex < 10000) {
            var dashLength = dashArray[dashIndex++ % dashCount];
            if (dashLength > distRemaining) dashLength = distRemaining;
            if (slopex) {
                var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
                x += xStep
                y += slope * xStep;
            } else {
                var yStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
                y += yStep
                x += slope * yStep;
            }
            if (dashOffSet > 0) {
                dashOffSet -= dashLength;
                this.moveTo(x, y);
            } else {
                this[draw ? 'lineTo' : 'moveTo'](x, y);
            }
            distRemaining -= dashLength;
            draw = !draw;
        }
        // Ensure that the last segment is closed for proper stroking
        this.moveTo(0, 0);
    }
}

var dashes = '10 20 2 20'

var c = document.getElementsByTagName('canvas')[0];
c.width = 300;
c.height = 400;
var ctx = c.getContext('2d');
ctx.strokeStyle = 'black';

var drawDashes = function() {
    ctx.clearRect(0, 0, c.width, c.height);
    var dashGapArray = dashes.replace(/^\s+|\s+$/g, '').split(/\s+/);
    if (!dashGapArray[0] || (dashGapArray.length == 1 && dashGapArray[0] == 0)) return;

    ctx.lineWidth = 4;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.dashedLine(10, 0, 10, c.height, dashGapArray, currentOffset);
    ctx.dashedLine(0, 10, c.width, 10, dashGapArray, currentOffset);
    ctx.dashedLine(0, 0, c.width, c.height, dashGapArray, currentOffset);
    ctx.dashedLine(0, c.height, c.width, 0, dashGapArray, currentOffset);
    ctx.closePath();
    ctx.stroke();
};
window.setInterval(dashInterval, 500);

var currentOffset = 0;

function dashInterval() {
    drawDashes();
    currentOffset += 10;
    if (currentOffset >= 100) currentOffset = 0;
}