我想在svg路径中的选定点处开始svg路径的动画

Question

我对SVG动画有一些问题。我想从SVG路径中的选定点开始动画。现在，我的动画从上侧中间开始。但我想从圆的左侧或右侧中间开始动画。 有什么技巧可以选择动画起点？ 下面是我的笔，您可以在其中查看我的代码。

Bidders::where('project_id', $id)
         ->where('active', 1)
         ->where(function ($query) {
             $query->where('status', 1)
                   ->orWhere('status', 2);
         })->first();

my SVG animation pen

Answer 1

我将在正确的四分之一点开始展示动画的一些可能性。显而易见，如何在左侧更改它们。

1。围绕其中心旋转圆

<path class="anim-circle" transform="rotate(90 165 255)" d="M165 170
    a 85 85 0 0 1 0 170
    a 85 85 0 0 1 0 -170"></path>

2。在正确的四分之一点开始路径

<path class="anim-circle" d="M250 255
    a 85 85 0 0 1 -170 0
    a 85 85 0 0 1 170 0"></path>

3。为正确的stroke-dasharray长度设置动画

您正在使用路径长度的经验法则值。顺便说一句，这导致对动画实际花费多长时间的控制不足。并不复杂：您的圆的半径为r = 85，因此圆周为2π × r ≃ 534。

（对于nitpickers：理论上，您可以使用pathLength 属性定义笔画的人工长度，但是Safari中未实现。）

stroke-dasharray的工作方式如下：它是一个数字列表，每个数字交替表示笔划的长度和间隙。没有理由为什么不应该为该列表而不是stroke-dashoffset设置列表的动画，该列表可以保留在四分之一圆的位置。

.anim-circle {
    stroke-dasharray: 0 534;
    stroke-dashoffset: -133.5; /*move the start of the stroke by one quarter*/
}

@keyframes dash {
    0% {
        stroke-dasharray: 534 0; /*all stroke*/
    }
    100% {
        stroke-dasharray: 0 534; /*all all gap*/
    }
}

（您有一会儿，我才注意到您用白色描边遮盖了蓝色路径，并且错误地将.anim-circle的CSS规则加倍了。）