Question

我正在构建一组SVG icons，并且需要将动画包含在SVG文件中-没有Javascript或CSS 。这个想法是要有独立的SVG文件，这些文件可以按我的html代码（例如<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>

此示例显示了动画的准时堆叠，我想无限地重复-我需要重复整个动画。

有什么主意吗？

Answer 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>

Answer 2

我环顾四周，应该是：repeatCount="indefinite"

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

希望它能起作用！

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

2 个答案: