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

您似乎使用错误的语法调用velocity，它需要2个参数，第二个包含延迟等内容。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
  <select id="mySelect">
    <option value="1" data-data1="AB" data-data2="WX">Route1</option>
    <option value="2" data-data1="CD" data-data2="YZ">Route2</option>
  </select>
</div>

＆＃13;

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});
}

＆＃13;

以速度

1 个答案: