Question

我想为SVG动画循环的每次迭代添加一个延迟。这是一个简单的例子。

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
  <circle cx="50" cy="50" r="15" fill="blue">
    <animate id="op" attributeType="CSS" attributeName="opacity"
             from="1" to="0" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>

使用begin只会延迟第一次迭代，那么有没有办法延迟每次迭代？

Answer 1

您可以将SMIL动画元素的end事件添加到begin属性。
此外，您可以添加多个值，以;分隔为此begin属性：

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
  <circle cx="50" cy="50" r="15" fill="blue">
    <animate id="op" attributeType="CSS" attributeName="opacity"
             from="1" to="0" dur="3s" begin="3s;op.end+3s" />
  </circle>
</svg>

Answer 2

定义虚拟循环并设置相对开始时间。看到 How to make SVG Loop Animation?

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
  <rect>
    <animate id="o1" begin="0;o1.end" dur="10s"
    attributeName="visibility" from="hide" to="hide"/>
  </rect>
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin" 
    attributeName="cx" from="250" to="50" dur="5.05s"/>
  </circle>
  <circle fill="blue" cx="150" cy="100" r="50" />
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin+5s" 
    attributeName="cx" from="50" to="250" dur="5.05s"/>
  </circle>
</svg>

＆＃13;

Answer 3

我认为您正在寻找的是svg的加法/累积属性。这是我从css tricks

获得的一个例子

＆＃13;

svg {
  border: 3px solid #eee;
  display: block;
  margin: 1em auto;
}

＆＃13;

<svg width="500" height="100">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />

  <animate xlink:href="#orange-circle" attributeName="cx" from="0" to="100" additive="sum" repeatCount="3" calcMode="spline" keyTimes="0;1" keySplines=".42 0 1 1" dur="1s" begin="click" fill="freeze" />
</svg>

＆＃13;

事实上，这是一个更好的例子（同源）

＆＃13;

svg {
  border: 3px solid #eee;
  display: block;
  margin: 1em auto;
}

＆＃13;

<svg width="500" height="150">
  <style>
    rect {
      -moz-transform-origin: 75px 75px;
      transform-origin: 50% 50%;
    }
  </style>
  <rect id="deepPink-rectangle" width="50" height="50" x="50" y="50" fill="deepPink" />
  
  <animateTransform 
           xlink:href="#deepPink-rectangle"
           attributeName="transform" 
           attributeType="XML"
           type="rotate"
           from="0 75 75"
           to="360 75 75" 
           dur="2s"
           begin="0s; 5s; 9s; 17s;"
           end="2s; 8s; 15s; 25s;"
           fill="freeze" 
           restart="whenNotActive"
           />
  
</svg>

＆＃13;

Answer 4

在此示例中，“闭着眼睛”的例子...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 16"><g>
  <g >
  <ellipse cx="9.45" cy="7.7" rx="0.96" ry="0.96" style="stroke: none; fill: black;">
   <animate id="op" attributeName="ry" attributeType="XML"
             to="0.1"
             begin="3s;op.end+3s" dur="0.15s"
             fill="remove" repeatCount="2"
            />
  </ellipse>
  <ellipse cx="14.6" cy="7.8" rx="0.8" ry="0.8" style="stroke: none; fill: black;">
   <animate id="op" attributeName="ry" attributeType="XML"
             to="0.1"
             begin="3s;op.end+3s" dur="0.15s"
             fill="remove" repeatCount="2"
            />
  </ellipse>
 </g>
</svg>

Answer 5

这是Danjiro Daiwa的示例的更详细版本，其中没有隐藏的矩形来同步动画，并且没有使用opacity="0"来设置可见圈之外的橙色圆圈来隐藏它们。有四个动画同时运行，a1 / a2进行移动，o1 / o2在橙色的doppelganger圆在蓝色圆的后面/上方移动时隐藏它们，r1-r4更改半径r和f1-f4更改fill的颜色。

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
  <circle fill="#f70" cx="0" cy="100" r="20" opacity="0">
    <animate id="a1" attributeName="cx" begin="0s;a2.end" from="250" to="50" dur="3s"/>
    <animate id="o1" attributeName="opacity" begin="a1.begin" end="a1.end" from="1" to="1"/>
    <animate id="r1" attributeName="r" begin="a1.begin" from="20" to="15" dur="1.5s"/>
    <animate id="r2" attributeName="r" begin="r1.end" from="15" to="20" dur="1.5s"/>
    <animate id="f1" attributeName="fill" begin="a1.begin" from="#f70" to="#c00" dur="1.5s"/>
    <animate id="f2" attributeName="fill" begin="f1.end" from="#c00" to="#f70" dur="1.5s"/>
  </circle>

  <circle fill="blue" cx="150" cy="100" r="50" />

  <circle fill="#f90" cx="0" cy="100" r="20" opacity="0">
    <animate id="a2" attributeName="cx" begin="a1.end" from="50" to="250" dur="2s"/>
    <animate id="o2" attributeName="opacity" begin="a2.begin" end="a2.end" from="1" to="1"/>
    <animate id="r3" attributeName="r" begin="a2.begin" from="20" to="25" dur="1s"/>
    <animate id="r4" attributeName="r" begin="r3.end" from="25" to="20" dur="1s"/>
    <animate id="f3" attributeName="fill" begin="a2.begin" from="#f70" to="#ff0" dur="1s"/>
    <animate id="f4" attributeName="fill" begin="f3.end" from="#ff0" to="#f70" dur="1s"/>
  </circle>
</svg>

每次重复时SVG动画延迟

5 个答案: