时间戳

首页 > 解决方案 > SVG动画（SMIL），如何重复整个动画？

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

问题描述

我正在构建一组，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>

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

任何想法？

标签： htmlanimationsvgw3csmil

解决方案

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

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

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>

推荐阅读