使用速度为 svg 对象列表设置动画

Question

我有一个基本上是饼图形状的 SVG，有 20 个切片。我想转换切片的颜色，但每个切片都比前一个略有延迟（有点像时钟倒计时或向上计时）。我试过 jquery 和普通 javascript，以及 css 转换，但没有成功。我也试过速度，但所有切片仍然同时过渡。

这是我的代码：

var color1 = "#FF0000";
        
var slices = $("#s4-pie").find("path");

for (i = 0; i < slices.length; i++) {
  var delay = (1000 * i);
  $(slices[i]).velocity({ fill: color1, delay: delay, duration: 1000, loop: 1});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.1/velocity.min.js"></script>
<div>
  <svg id="s4-pie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs id="defs"/><rect x="0" y="0" width="200" height="200" stroke="none" stroke-width="0" fill="#424242"/><g><path d="M100,100L100,10A90,90,0,0,1,123.29371405922686,13.066675633983849L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L123.29371405922686,13.066675633983849A90,90,0,0,1,145,22.05771365940052L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L145,22.05771365940052A90,90,0,0,1,163.63961030678928,36.36038969321073L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L163.63961030678928,36.36038969321073A90,90,0,0,1,177.94228634059948,55.00000000000001L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L177.94228634059948,55.00000000000001A90,90,0,0,1,186.93332436601617,76.70628594077314L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L186.93332436601617,76.70628594077314A90,90,0,0,1,190,100L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L190,100A90,90,0,0,1,186.93332436601617,123.29371405922686L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L186.93332436601617,123.29371405922686A90,90,0,0,1,177.94228634059948,145.00000000000003L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L177.94228634059948,145A90,90,0,0,1,163.63961030678928,163.63961030678928L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L163.63961030678928,163.63961030678928A90,90,0,0,1,145,177.94228634059948L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L145,177.94228634059948A90,90,0,0,1,123.29371405922686,186.93332436601617L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L76.70628594077314,13.066675633983849A90,90,0,0,1,100,10L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L54.99999999999996,22.057713659400534A90,90,0,0,1,76.70628594077314,13.066675633983849L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L36.360389693210706,36.36038969321073A90,90,0,0,1,54.99999999999996,22.057713659400534L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L22.05771365940052,54.99999999999999A90,90,0,0,1,36.360389693210706,36.36038969321073L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L13.066675633983849,76.70628594077317A90,90,0,0,1,22.05771365940052,54.99999999999999L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L10,100.00000000000001A90,90,0,0,1,13.066675633983849,76.70628594077317L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L13.066675633983863,123.29371405922689A90,90,0,0,1,10,100.00000000000001L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L22.05771365940052,145A90,90,0,0,1,13.066675633983863,123.29371405922689L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L36.36038969321073,163.63961030678928A90,90,0,0,1,22.05771365940052,145L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L55.00000000000002,177.94228634059948A90,90,0,0,1,36.36038969321073,163.63961030678928L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L76.70628594077313,186.93332436601617A90,90,0,0,1,55.00000000000005,177.9422863405995L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g>
    <g><path d="M100,100L100,190A90,90,0,0,1,76.70628594077313,186.93332436601617L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L123.29371405922686,186.93332436601617A90,90,0,0,1,100,190L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g/></svg>
</div>

如何对每个要设置动画的元素应用延迟？

Answer 1

你似乎用错误的语法调用速度，它有两个参数，第二个包含诸如延迟之类的东西，例如

var color1 = "#FF0000";
        
var slices = $("#s4-pie").find("path");

for (i = 0; i < slices.length; i++) {
  var delay = (1000 * i);
  $(slices[i]).velocity({ fill: color1}, {delay: delay, duration: 1000});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.1/velocity.min.js"></script>
<div>
  <svg id="s4-pie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs id="defs"/><rect x="0" y="0" width="200" height="200" stroke="none" stroke-width="0" fill="#424242"/>
<g><path d="M100,100L100,10A90,90,0,0,1,123.29371405922686,13.066675633983849L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/>
</g>
<g>
    <path d="M100,100L123.29371405922686,13.066675633983849A90,90,0,0,1,145,22.05771365940052L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/>
</g>
<g>
    <path d="M100,100L145,22.05771365940052A90,90,0,0,1,163.63961030678928,36.36038969321073L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/>
</g>
<g>
    <path d="M100,100L163.63961030678928,36.36038969321073A90,90,0,0,1,177.94228634059948,55.00000000000001L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/>
</g>
<g>
    <path d="M100,100L177.94228634059948,55.00000000000001A90,90,0,0,1,186.93332436601617,76.70628594077314L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/>
</g>
<g>
    <path d="M100,100L186.93332436601617,76.70628594077314A90,90,0,0,1,190,100L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/>
</g>
<g>
    <path d="M100,100L190,100A90,90,0,0,1,186.93332436601617,123.29371405922686L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/>
</g>
<g>
    <path d="M100,100L186.93332436601617,123.29371405922686A90,90,0,0,1,177.94228634059948,145.00000000000003L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/>
</g>
<g>
    <path d="M100,100L177.94228634059948,145A90,90,0,0,1,163.63961030678928,163.63961030678928L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/>
</g>
<g>
    <path d="M100,100L163.63961030678928,163.63961030678928A90,90,0,0,1,145,177.94228634059948L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/>
</g>
<g>
    <path d="M100,100L145,177.94228634059948A90,90,0,0,1,123.29371405922686,186.93332436601617L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/>
</g>
<g>
    <path d="M100,100L123.29371405922686,186.93332436601617A90,90,0,0,1,100,190L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/>
</g>
<g>
    <path d="M100,100L100,190A90,90,0,0,1,76.70628594077313,186.93332436601617L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/>
</g>
<g>
    <path d="M100,100L76.70628594077313,186.93332436601617A90,90,0,0,1,55.00000000000005,177.9422863405995L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/>
</g>
<g>
    <path d="M100,100L55.00000000000002,177.94228634059948A90,90,0,0,1,36.36038969321073,163.63961030678928L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/>
</g>
<g>
    <path d="M100,100L36.36038969321073,163.63961030678928A90,90,0,0,1,22.05771365940052,145L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/>
</g>
<g>
    <path d="M100,100L22.05771365940052,145A90,90,0,0,1,13.066675633983863,123.29371405922689L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/>
</g>
<g>
    <path d="M100,100L13.066675633983863,123.29371405922689A90,90,0,0,1,10,100.00000000000001L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/>
</g>
<g>
    <path d="M100,100L10,100.00000000000001A90,90,0,0,1,13.066675633983849,76.70628594077317L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/>
</g>
<g>
    <path d="M100,100L13.066675633983849,76.70628594077317A90,90,0,0,1,22.05771365940052,54.99999999999999L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/>
</g>
<g>
    <path d="M100,100L22.05771365940052,54.99999999999999A90,90,0,0,1,36.360389693210706,36.36038969321073L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/>
</g>
<g>
    <path d="M100,100L36.360389693210706,36.36038969321073A90,90,0,0,1,54.99999999999996,22.057713659400534L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/>
</g>
<g>
    <path d="M100,100L54.99999999999996,22.057713659400534A90,90,0,0,1,76.70628594077314,13.066675633983849L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/>
</g>
<g>
    <path d="M100,100L76.70628594077314,13.066675633983849A90,90,0,0,1,100,10L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/>
</g>
<g/>
</svg>
</div>

使用速度为 svg 对象列表设置动画

Animate a list of svg objects with velocity

javascript

svg

velocity.js