SVG动画（SMIL），如何重复整个动画？答案

【问题标题】：SVG animation (SMIL), how to repeat the whole animation?SVG动画（SMIL），如何重复整个动画？
【发布时间】：2019-10-07 05:16:07
【问题描述】：

我正在构建一组SVG icons，我需要在 SVG 文件中包含动画 - 没有 Javascript 或没有 CSS。这个想法是拥有可以在我的 html 代码中添加的独立 SVG 文件，例如 <img src="my-icon.svg">

每个图标都有一组SMIL animations，包括简介、主要动画、事件触发动画和结尾。

SVG 文件如下所示：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" ...>

    <g id="group1" ...>
        <path id="path1" d="M0-0l37.5,27,...">
        <path id="path2" d="M0-0l37.5,27,...">
        ...
    </g>

    <g id="group2" ...>
        ...
    </g>

    <!-- Intro -->
    <animate
        id="animation1"
        attributeName="opacity"
        from="0" 
        to="1"
        begin="2s" 
        dur="1.5s"
        keySplines="1 0 1 1"
        calcMode="spline"
    />

    <!-- Animations -->
    <animateTransform
        id="animation2"
        xlink:href="#arrows"
        attributeName="transform"
        type="translate"
        from="..."
        to="..."
        begin="animation1.end - 1s"
        dur="2s"
        values="..."
        keyTimes="..."
        keySplines="..."
        calcMode="spline"
        repeatCount="3"
    />

    <animate
        ...
    />

    ...

    <!-- Outro -->
    <animate
        id="animationX"
        attributeName="opacity"
        from="1" 
        to="0"
        begin="animation3.end - 1s" 
        dur="1.5s"
        keySplines="0.5 0 1 0.5"
        calcMode="spline"
    />

</svg>

这个例子展示了一个按时堆叠的动画，我想无限期地重复 - 我需要重复整个动画。

有什么想法吗？

【问题讨论】：

标签： html animation svg w3c smil

【解决方案1】：

正如我从您的问题中了解到的，您需要连续执行多个动画
并且在最后一个动画结束后，去执行第一个动画

这可以使用开始第一个动画的条件来完成

begin="svg1.click;animation4.end"，在哪里

svg1.click - 点击后第一次开始动画

animation4.end - 在上一个动画结束后重新启动相同的动画

这就是几个连续动画的循环实现的方式。

点击后动画会开始

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" style="border:1px solid">

    <g id="group1" opacity="0">
       <path  fill="#6DBB00" d="M16 0a16 16 0 100 32 16 16 0 000-32z"/>
  <path fill="#FAFAFA" d="M24.1 12.6l-8.7 8.7a1.3 1.3 0 01-1.8 0l-4.4-4.4a1.3 1.3 0 112-1.8l3.3 3.3 7.7-7.7a1.3 1.3 0 112 2z"/>
    </g>

    <g id="group2" >
        
    </g>

    <!-- Intro --> 
    <!-- Icon appearance animation -->
    <animate 
        xlink:href="#group1"
        id="animation1"
        attributeName="opacity"
        values="0;1"
        begin="svg1.click;animation4.end" 
        dur="1s"
        fill="freeze"
        restart="whenNotActive"
       
    />

    <!-- Animation of moving icons -->
    <animateTransform
        id="animation2"
        xlink:href="#group1"
        attributeName="transform"
        type="translate"
        values="0,0;32,0"
        begin="animation1.end"
        dur="1s"
        fill="freeze"
        restart="whenNotActive"
    />

   

    <!-- Outro --> 
    <!-- Disappearing icon animation -->
    <animate
        xlink:href="#group1"
        id="animation3"
        attributeName="opacity"
        values="1;0"
        begin="animation2.end" 
        dur="1s"
        fill="freeze"
        restart="whenNotActive"
        
    />  
      <!-- Animation of returning the icon to its original position -->
    <animateTransform
        id="animation4"
        xlink:href="#group1"
        attributeName="transform"
        type="translate"
        values="32,0;0,0"
        begin="animation3.end"
        dur="1s"
        fill="freeze"
        restart="whenNotActive"
    />

</svg>

【讨论】：

【解决方案2】：

我看了一圈，应该是：repeatCount="indefinite"

我很快就偶然发现了this page，然后自己尝试了一下

希望它有效！

【讨论】：

repeatCount="indefinite" 仅适用于一个 <anime> 元素，我需要对整个动画执行相同的操作