正文

svg动画

海角在眼前  海角在眼前  2022-08-10  133

关键词：

动画原理

SVG动画，就是元素的属性值关于时间的变化。如下图来说，元素的某个属性值的起始值（from）到结束值（to）在一个时间段（duration）根据时间函数（timing-function）计算出每一帧（frame）的插值（interpolation）作为变换的行为。

PS：SVG动画是帧动画，在SVG里也就是每秒设置多少个value值。

SVG动画语法

SVG动画是基于SMIL（Synchronized Multimedia Integration Language）语言的，全称是同步多媒体集成语言。

SVG动画使用

SVG元素使用动画有两种方式：

1. 被xlink:href引用

<animate  xlink:href="url(#rect1)"></animate>

2. 包含在目标元素里

<rect  x="0"  ...>
     <animate></animate>
</rect>

<animate>标签

该标签用于基本动画。

参数	描述
attributeName	要变化属性名称 1.可以是元素直接暴露的属性 2.可以是CSS属性
attributeType	用来表明attributeName属性值的类型支持三个固定参数，CSS/XML/auto，默认值auto。例如：x、 y以及transform就属于XML, opacity就属于CSS。
from	起始值起始值与元素的默认值是一样的，该参数可省略。
to	结束值
by	相对from的变化值 PS：当有to值时，该值无效。
values	动画的多个关键值，用分号分隔。
dur	持续时间取值：常规时间值 \| "indefinite"
repeatCount	动画执行次数取值：合法数值或者“indefinite”
fill	动画间隙的填充方式取值：freeze \| remove（默认值）。 remove：表示动画结束直接回到开始的地方。 freeze：表示动画结束后保持了动画结束之后的状态。
calcMode	控制动画的快慢取值：discrete \| linear（默认值） \| paced \| spline. 中文意思分别是：“离散”\|“线性”\|“踏步”\|“样条”。另外，该参数要结合keyTimes、keySplines使用，数值的是对应values的，所以如果没有设置values和keyTime或keySplines，是没有效果的。
begin	动画开始的时机，取值： time-value \| offset-value \| syncbase-value \| event-value \| repeat-value \| accessKey-value \| media-marker-value \| wallclock-sync-value \| "indefinite" 1. time-value：动画开始时间，可传多个值，分号分隔。 2. syncbase-value：[元素的id].begin/end +/- 时间值（offset-value）某个动画效果开始或结束触发此动画的，可加上偏移量。 3. event-value：事件触发 4. repeat-value：指某animation重复多少次开始。语法为：[元素的id].repeat(整数) +/- 时间值
end	end与begin除了名字和字面含义不一样，其值的种类与表意都是一模一样的。

PS：只列出常用参数，其他请查阅参考文献。

例子：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <rect x="50" y ="50" width="100" height="50" fill="red">
          <animate attributeType="XML"
               attributeName="x"
               from="50"
               to="400"
               dur="5s"
               fill="freeze">
          </animate>
     </rect>
     <rect x="50" y ="150" width="100" height="50" fill="green">
          <animate attributeType="XML"
               attributeName="x"
               from="50"
               by="400"
               dur="5s"
               fill="freeze">
          </animate>
     </rect>
     <rect x="50" y ="250" width="100" height="50" fill="blue">
          <animate attributeType="XML"
               attributeName="x"
               values="50;450;50"
               dur="10s"
               >
          </animate>
     </rect>
     <rect x="50" y ="350" width="100" height="50" fill="orange">
          <animate attributeType="XML"
               attributeName="x"
               dur="10s"
               values="50;450;50"
               calcMode="spline"
               keySplines=".5 0 .5 1; 0 0 1 1"
               fill="freeze"
               >
          </animate>
     </rect>
     <rect x="50" y ="450" width="100" height="50" fill="black">
          <animate attributeType="XML"
               attributeName="x"
               from="50"
               by="400"
               dur="5s"
               calcMode="spline"
               keySplines=".5 0 .5 1; 0 0 1 1"
               fill="freeze"
               >
          </animate>
     </rect>
</svg>

效果：

begin例子：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <text x="50" y="30" id="t" stroke="red">click red go</text>
     <rect x="50" y ="50" width="100" height="50" fill="red">
          <animate attributeType="XML"
               attributeName="x"
               begin="t.click"
               from="50"
               to="400"
               dur="5s"
               fill="freeze">
          </animate>
     </rect>
     <rect x="50" y ="150" width="100" height="50" fill="green">
          <!--表示的是3s之后动画开始，10s时候动画再开始一次
               （如果之前动画没走完，会立即停止从头开始）-->
          <animate attributeType="XML"
               attributeName="x"
               begin="3s;10s"
               from="50"
               to="400"
               dur="5s"
               fill="freeze">
          </animate>
     </rect>
     <rect x="50" y ="250" width="100" height="50" fill="blue">
          <animate id="goleft" attributeType="XML"
               attributeName="x"
               from="50"
               to="400"
               dur="5s"
               fill="freeze"
               >
          </animate>
          <!--注意begin的id是animate的id，不是元素的-->
          <animate attributeType="XML"
               attributeName="y"
               begin="goleft.end"
               to="350"
               dur="2s"
               fill="freeze"
               >
          </animate>
     </rect>
     <rect x="50" y ="350" width="100" height="50" fill="orange">
          <animate id="goleft" attributeType="XML"
               attributeName="x"
               from="50"
               to="400"
               dur="5s"
               fill="freeze"
               >
          </animate>
          <!--注意begin的id是animate的id，不是元素的-->
          <animate attributeType="XML"
               attributeName="y"
               to="400"
               dur="5s"
               fill="freeze"
               >
          </animate>
     </rect>
     <line stroke='black' x1="50" y1="350" x2="500" y2="350"/>
     <line stroke='black' x1="50" y1="400" x2="500" y2="400"//>
</svg>

效果：

注意：

1. 多个animate是可以叠加的。

<animateTransform>标签

该标签用于变换动画，animateTransform也有animate的参数，额外的是type。

参数	描述
type	变换的类型，取值：translate、scale、rotate、skewX、skewY

例子：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 800 800">
     <rect x="50" y ="50" width="50" height="50" fill="red">
          <animateTransform attributeName="transform"
               attributeType="XML"
               type="rotate"
               from="0 75 75"
               to="360 75 75"
               dur="2"
               repeatCount="indefinite"/>
     </rect>
     <!--x、y都放大了-->
     <rect x="50" y ="150" width="50" height="50" fill="green">
          <animateTransform attributeName="transform"
               attributeType="XML"
               type="scale"
               from="1"
               to="2"
               dur="2"
               fill="freeze"/>
     </rect>     
     <rect x="50" y ="250" width="50" height="50" fill="blue">
          <animateTransform attributeName="transform"
               attributeType="XML"
               type="translate"
               to="250 0"
               dur="2"
               fill="freeze"/>
     </rect>
     <rect x="50" y ="150" width="50" height="50" fill="black">
          <animateTransform attributeName="transform"
               attributeType="XML"
               type="rotate"
               from="0 75 125"
               to="360 75 125"
               dur="2"
               repeatCount="indefinite" additive="sum"/>
          <animateTransform attributeName="transform"
               attributeType="XML"
               type="scale"
               from="1"
               to="2"
               dur="2"
               fill="freeze" additive="sum"/>
     </rect>
</svg>

效果：

注意：

1. animateTransform也是可以叠加的，不过要加上additive="sum"，否则后面的无效了。

<animateMotion>标签

这个标签让元素在路径（Path）上滑动。

例子：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <path d="M100,400Q150,300 250,400 T400,400" stroke="red" fill="none"/>
     <rect width="20" height="20" fill="red">
          <animateMotion
               path="M100,400Q150,300 250,400 T400,400"
               rotate="auto"
               dur="3s"
               fill="freeze">
          </animateMotion>
     </rect>
</svg>

效果：

注意：

1. 设置rotate="auto"，可以让元素根据路径的切线方向做旋转。

脚本动画

SVG的requestAnimationFrame函数可以让我们用js来做动画，浏览器对requestAnimationFrame调用的频率是每秒60次逐帧动画。

例子：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
     <rect id="rect" x="50" y="50" width="100" height="100" fill="green" />
</svg>
<script>
    var cur = 0;
    var rect=document.getElementById("rect");
    var frames = window.requestAnimationFrame(doAnim);
    function doAnim(){
        if(cur>=360){
            //取消帧动画
            window.cancelAnimationFrame(frames);
            return;
        }
        cur++;
        rect.setAttribute("transform", "rotate(" + cur + ",100, 100)");
        frames = window.requestAnimationFrame(doAnim);
    }
</script>

PS：效果就是正方形旋转360°后停止。

参考视频

1. SVG课程（慕课网）

参考文献

1. http://www.w3.org/TR/SVG/animate.html

2. http://www.zhangxinxu.com/wordpress/?p=4333

本文为原创文章，转载请保留原出处，方便溯源，如有错误地方，谢谢指正。

本文地址：http://www.cnblogs.com/lovesong/p/6011328.html

svg交互动画制作

前面我们已经说过了要怎样制作CSS3动画，但是SVG动画一直都没有时间研究过，正好趁现在有一点时间静下心来研究一下。一般来说，常见前端动画实现方案分为三种，CSS3动画，HTML动画（SVG动画），JS动画或者我们可以称之为Canv... 查看详情

SVG 动画 - 来自中心的 SVG 的 CSS 悬停动画

】SVG动画-来自中心的SVG的CSS悬停动画【英文标题】：SVGAnimation-CSSHoverAnimationForSVGFromTheCenter【发布时间】：2021-02-0202:50:03【问题描述】：我在GSAP中做过这个效果这里是Codepen作为参考：https://codepen.io/whitelionx/full/vYGQqBZconstsvgs=documen... 查看详情

在页面加载之前，动画 SVG 不会动画

】在页面加载之前，动画SVG不会动画【英文标题】：AnimatedSVGsdon\'tanimateuntilpageisloaded【发布时间】：2015-03-1117:22:21【问题描述】：我的网站包含相当多的广告，这些广告需要一段时间才能加载。这完全不是问题，但我注意到任何... 查看详情

svg动画精髓(代码片段)

TL;DR本文主要是讲解关于SVG的一些高级动画特效，比如SVG动画标签，图形渐变，路径动画，线条动画，SVG裁剪等。例如：路径动画图形渐变：线条动画：以及，相关的动画的矩阵知识，这个也是现在CSS动画里面最重要，同时也是... 查看详情

使用填充为 svg 设置动画

】使用填充为svg设置动画【英文标题】：animatesvgusingfill【发布时间】：2015-04-1201:19:40【问题描述】：如何使用ilustrator的路径svg制作动画。在完成制作对象后，我从ilustratorcs6获得了svg代码（路径）。对于动画，我使用的是没有jav... 查看详情

svg动画精髓(代码片段)

SVG 直线动画 CSS

】SVG直线动画CSS【英文标题】：SVGstraightlineanimationCSS【发布时间】：2018-05-2803:04:56【问题描述】：我正在尝试在网站中使用SVG路径进行动画来实现这一点（下图）。我看到了这个https://css-tricks.com/svg-line-animation-works/并想尝试一下... 查看详情

需要帮助清理 SVG 动画

】需要帮助清理SVG动画【英文标题】：NeedhelpcleaningupSVGanimation【发布时间】：2021-10-0714:01:06【问题描述】：我为svg填充动画创建了一个演示。我的方法：我正在创建原始svg的蒙版，然后剪裁该蒙版。然后我在悬停时从下到上为蒙... 查看详情

将 SVG 动画转换为图像序列

】将SVG动画转换为图像序列【英文标题】：ConvertSVGanimationtoimagesequence【发布时间】：2020-03-1505:52:18【问题描述】：我正在尝试从SVG动画渲染图像。这是我的代码。https://jsfiddle.net/d3bhfa1L/2/它生成图像序列，但无法从SVG捕获动画。... 查看详情

SVG按钮路径动画

】SVG按钮路径动画【英文标题】：Svgbuttonpathanimation【发布时间】：2021-12-1910:37:46【问题描述】：我有这个SVG按钮，我试图在悬停时设置动画。我希望按钮在悬停时产生斑点效果。我希望你们能帮助我。这是SVG的链接https://codepen.i... 查看详情

svg动画.资料（20180208）

1、　　手把手教你轻松实现SVG动画.html（https://baijiahao.baidu.com/s?id=1571093667630324&wfr=spider&for=pc）　　【Web动画】SVG实现复杂线条动画-ChokCoco-博客园.html（https://www.cnblogs.com/coco1s/p/6230165.html）　　SVG奇思妙想.html（查看详情

将 SVG 动画录制并保存为动画 GIF [关闭]

】将SVG动画录制并保存为动画GIF[关闭]【英文标题】：RecordingandsavinganSVGanimationasananimatedGIF[closed]【发布时间】：2014-02-1415:55:38【问题描述】：是否有用于录制SVG动画并将其保存为动画GIF的库或工具？SVG几何图形使用JavaScript和D3.js... 查看详情

svg动画.资料

1、SVG+JSpath等值变化实现CSS3兴叹的图形动画?张鑫旭-鑫空间-鑫生活.htmlhttp://www.zhangxinxu.com/wordpress/2014/06/svg-path-d-polyline-points-bezier-curves/2、SVG之Animation-前端学习笔记-SegmentFault.htmlhttps://segmentfault.com/a/11 查看详情

SVG 动画图案边缘

】SVG动画图案边缘【英文标题】：SVGAnimationspatternedge【发布时间】：2017-07-2412:51:58【问题描述】：我想创建条纹动画背景，但由于某种原因无法删除出现在图案边缘的垂直线。这是我的svg：<svg><defs> <linearGradientid=\'str... 查看详情

在 svg 路径更改后再次执行动画

】在svg路径更改后再次执行动画【英文标题】：Makeanimateexecuteagainaftersvgpathchanges【发布时间】：2022-01-2405:40:04【问题描述】：我想为svg路径设置动画，使动画只运行一次，但是如果d值发生变化，那么动画应该再次运行一次。每... 查看详情

svg动画类库snap.svg简介

...一种特殊的DOM元素，可以使用CSS以及一般的JS类库来实现动画控制。但是这些方法都没提供SVG动画样式属性的完整控制，现在介绍一个专门的SVG动画类库Snap.svg，其github地址为：https://github.com/adobe-webplatform/Snap.svgSnap.svg提供多种安... 查看详情

绘制 svg 虚线的动画

】绘制svg虚线的动画【英文标题】：Animatethedrawingofadashedsvgline【发布时间】：2014-07-2404:34:20【问题描述】：我正在尝试使用svg和css动画为带有虚线的箭头设置动画，类似于------->，但具有水平和垂直路径。我尝试了几种不同的... 查看详情

GPU 加速 CSS 动画与 SVG 原生动画

】GPU加速CSS动画与SVG原生动画【英文标题】：GPUacceleratedCSSanimationvsSVGnativeanimations【发布时间】：2014-10-0316:32:53【问题描述】：我的问题是，什么是更快的原生SVG动画标签，例如：<pathd="somethingverylongandnon-human-friendly"><animat... 查看详情