Question

我目前正在尝试制作运动路径动画，其中有一个我用作“ anime.path”的SVG路径。图像是沿着动画路径移动的目标。我可以使完整的运动路径正常工作，但是，我希望能够仅沿着路径的一部分移动目标，具体取决于anime.path长度的百分比。

正如我从

所看到的，我已经使用动画来绘制线条来实现类似的概念

document.addEventListener("DOMContentLoaded", function(event) {
    let mileageData = [{"distance : 283"}, {"distance : 212"}, {"distance : 73"}];
    let targetDistance = 3500;
    let totalMileage = new Number();

    mileageData.forEach(element => {
    totalMileage += parseInt(element.distance);
    });

    let progressPath = document.getElementById('progress-path');

    let progressPathLength = progressPath.getTotalLength();

    let travelledPercentage = totalMileage / targetDistance;
    let calculatedDistance = progressPathLength * travelledPercentage;
    let animeDistance = progressPathLength - calculatedDistance;

    let routePath = anime.path('.progress-map .route-path');

    anime({
        targets: '.progress-biker',
        translateX: routePath('x'),
        translateY: routePath('y'),
        rotate: routePath('angle'),
        easing: 'easeInOutQuad',
        duration: 8000,
        loop: false,
    });

    anime({
        targets: '.progress-map .progress-path',
        strokeDashoffset: [anime.setDashoffset, animeDistance],
        easing: 'easeOutQuad',
        duration: 8000,
        loop: false
    });
});

当前，这将使对象沿路径全程行进。但是，我希望能够做到这一点，以便它仅基于“ animeDistance”变量沿路径的一部分行进。我知道svg.getPointAtLength（）（https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength），但看不到我如何对此进行动画处理并保持在正确的路径上。非常感谢任何建议。

我可以使用动画路径的一定百分比来实现部分运动路径吗？

0 个答案: