HTML5(九)——超强的 SVG 动画
<p data-track="1">SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？</p><h1 class="pgc-h-arrow-right" data-track="2">一、SVG 的 animation</h1>
<p data-track="7">SVG animation 有五大元素，他们控制着各种不同类型的动画，分别为：</p>
<ul>
<li data-track="8">set</li>
<li data-track="9">animate</li>
<li data-track="10">animateColor</li>
<li data-track="11">animateTransform</li>
<li data-track="12">animateMotion</li>
</ul>
<h3 data-track="14">1.1、set</h3>
<p data-track="19">set 为动画元素设置延迟，此元素是SVG中最简单的动画元素，但是他并没有动画效果。</p>
<p data-track="20">使用语法：</p>
<pre class="syl-page-code hljs bash"><code><<span class="hljs-built_in">set attributeName=<span class="hljs-string">"" attributeType=<span class="hljs-string">"" to=<span class="hljs-string">"" begin=<span class="hljs-string">"" /></span></span></span></span></span></code></pre>
<ul>
<li data-track="15">attributeName ：是要改变的元素属性名称。</li>
<li data-track="23">attributeType ：是表明attributeName属性值的列表，支持三个固定参数 CSS/XML/auto，如x,y以及transform属于XML，opacity属于CSS。auto是浏览器自动判别的意思，也是默认值，如果你不知道该选哪个就填auto，浏览器自己判别。</li>
<li data-track="24">to ：动画结束的属性值。</li>
<li data-track="25">begin ：动画延迟时间。</li>
</ul>
<p data-track="26">eg：绘制一个半径为200的圆，4秒之后，半径变为50。</p>
<div class="cnblogs_code">
<pre><svg width="320" height="320">
<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
<set attributeName="r" attributeType="XML" to="50" begin="4s" />
</circle>
</svg></pre>
</div>
<p> </p>
<h3 data-track="22">1.2、animate</h3>
<p data-track="28">是基础的动画元素，实现单属性的过渡效果。</p>
<p data-track="29">使用语法：</p>
<pre class="syl-page-code hljs javascript"><code><animate
attributeName=<span class="hljs-string">"r"
<span class="hljs-keyword">from=<span class="hljs-string">"200" to=<span class="hljs-string">"50"
begin=<span class="hljs-string">"4s" dur=<span class="hljs-string">"2s"
repeatCount=<span class="hljs-string">"2"
><span class="xml"><span class="hljs-tag"></<span class="hljs-name">animate></span></span></span></span></span></span></span></span></span></span></code></pre>
<ul>
<li data-track="16">from ：过渡效果的属性开始值。</li>
<li data-track="32">to：过渡效果的属性结束值。</li>
<li data-track="33">begin：动画开始时间。</li>
<li data-track="34">dur：动画过渡时间，控制动画速度。</li>
<li data-track="41">repeatCount：动画重复次数。</li>
</ul>
<p data-track="36">eg：绘制一个半径为200的圆，4秒之后半径在2秒内从200逐渐变为50。</p>
<div class="cnblogs_code">
<pre><circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
<animate attributeName="r" from="200" to="50"<span style="color: rgba(0, 0, 0, 1)">
begin</span>="4s" dur="2s" repeatCount="2"></animate>
</circle></pre>
</div>
<p> </p>
<h3 data-track="31">1.3、animateColor</h3>
<p data-track="39">控制颜色动画，animate也可以实现这个效果，所以该属性目前已被废弃。</p>
<h3 data-track="17">1.4、animateTransform</h3>
<p data-track="40">实现transform变换动画效果，与css3的transform变换类似。实现平移、旋转、缩放等效果。</p>
<p data-track="43">使用语法：</p>
<pre class="syl-page-code hljs javascript"><code><animateTransform attributeName=<span class="hljs-string">"transform"type=<span class="hljs-string">"scale"
<span class="hljs-keyword">from=<span class="hljs-string">"1.5" to=<span class="hljs-string">"0"
begin=<span class="hljs-string">"2s"dur=<span class="hljs-string">"3s"
repeatCount=<span class="hljs-string">"indefinite"><span class="xml"><span class="hljs-tag"></<span class="hljs-name">animateTransform></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<ul>
<li data-track="42">repeatCount：重复次数，设置为 indefinite 表示无限循环，一直执行。</li>
<li data-track="45">type：添加 transform 变换类型。</li>
</ul>
<p data-track="45">eg：绘制一个半径为200的圆，4秒之后开始缩放，在2秒内从1.5缩小到0倍。</p>
<div class="cnblogs_code">
<pre><svg width="320" height="320">
<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
<animateTransform attributeName="transform" begin="4s"<span style="color: rgba(0, 0, 0, 1)">
dur</span>="2s" type="scale" from="1.5" to="0"<span style="color: rgba(0, 0, 0, 1)">
repeatCount</span>="indefinite"></animateTransform>
</circle>
</svg></pre>
</div>
<pre class="syl-page-code hljs xml"><code><span class="hljs-tag"> </span></code></pre>
<h3 data-track="18">1.5、animateMotion</h3>
<p data-track="48">可以定义动画路径，让SVG各个图形，沿着指定路径运动。</p>
<p data-track="49">使用语法：</p>
<pre class="syl-page-code hljs xml"><code><span class="hljs-tag"><<span class="hljs-name">animateMotion
<span class="hljs-attr">path=<span class="hljs-string">"M 0 0 L 320 320"
<span class="hljs-attr">begin=<span class="hljs-string">"4s" <span class="hljs-attr">dur=<span class="hljs-string">"2s"><span class="hljs-tag"></<span class="hljs-name">animateMotion></span></span></span></span></span></span></span></span></span></span></code></pre>
<ul>
<li>path：定义路径，使用语法与《HTML5(八)——SVG 之 path 详解》path的d属性一致。</li>
<li data-track="54">begin：延迟时间。</li>
<li data-track="55">dur：动画执行时间。</li>
</ul>
<p data-track="53">eg：绘制一个半径为10的圆，延迟4秒从左上角运动的右下角。</p>
<div class="cnblogs_code">
<pre><svg width="320" height="320">
<circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">
<<span style="color: rgba(0, 0, 0, 1)">animateMotion
path</span>="M 0 0 L 320 320"<span style="color: rgba(0, 0, 0, 1)">
begin</span>="4s" dur="2s"
></animateMotion>
</circle>
</svg></pre>
</div>
<p> </p>
<p data-track="3">实际制作动画的时候，动画太单一不酷，需要同时改变多个属性时，上边的四种元素可以互相组合，同类型的动画也能组合。以上这些元素虽然能够实现动画，但是无法动态地添加事件，所以接下来我们就看看 js 如何制作动画。</p>
<h1 class="pgc-h-arrow-right" data-track="131">二、JavaScript 控制</h1>
<p data-track="59">上篇文章我们介绍js可以操作path，同样也可以操作SVG的内置形状元素，还可以给任意元素添加事件。</p>
<p data-track="60">给SVG元素添加事件方法与普通元素一样，可以只用on+事件名 或者addEventListener添加。</p>
<p data-track="57">eg：使用SVG绘制地一条线，点击线条地时候改变 x1 ,实现旋转效果。</p>
<div class="cnblogs_code">
<pre><svg width="800" height="800" id="svg">
<line id="line" x1="100" y1="100"<span style="color: rgba(0, 0, 0, 1)">
x2</span>="400" y2="300"<span style="color: rgba(0, 0, 0, 1)">
stroke</span>="black" stroke-width="5"></line>
</svg>
<script><span style="color: rgba(0, 0, 0, 1)">
window.onload </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
</span><span style="color: rgba(0, 0, 255, 1)">var</span> line = document.getElementById("line"<span style="color: rgba(0, 0, 0, 1)">)
line.onclick </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
let start </span>= parseInt(line.getAttribute("x1"<span style="color: rgba(0, 0, 0, 1)">)),
end</span>=400,dis = start-<span style="color: rgba(0, 0, 0, 1)">end
requestAnimationFrame(next)
let count </span>= 0<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> next(){
count</span>++<span style="color: rgba(0, 0, 0, 1)">
let a </span>= count/200,cur = Math.abs(start+ dis*a)
line.setAttribute('x1'<span style="color: rgba(0, 0, 0, 1)">,cur)
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(count<200<span style="color: rgba(0, 0, 0, 1)">)requestAnimationFrame(next)
}
}
}
</span></script></pre>
</div>
<p> </p>
<p data-track="4">js制作的SVG动画，主要利用 requestAnimationFrame 来实现一帧一帧的改变。</p>
<p data-track="62">我们上述制作的 SVG 图形、动画等，运行在低版本IE中，发现SVG只有IE9以上才支持，低版本的并不能支持，为了兼容低版本浏览器，可以使用 VML ,VML需要添加额外东西，每个元素需要添加 v:元素，样式中还需要添加 behavier ，经常用于绘制地图。由于使用太麻烦，所以我们借助 Raphael.js 库。</p>
<h1 class="pgc-h-arrow-right" data-track="132">三、Raphaël.js (拉斐尔)</h1>
<p data-track="63">Raphael.js是通过SVG/VML+js实现跨浏览器的矢量图形，在IE浏览器中使用VML，非IE浏览器使用SVG，类似于jquery，本质还是一个javascript库，使用简单，容易上手。</p>
<p data-track="64">使用之前需要先引入Raphael.js库文件。cdn的地址为：<br>https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js</p>
<h3 data-track="66">3.1、创建画布</h3>
<p data-track="71">Rapheal有两种创建画布的方式：</p>
<p data-track="72">第一种：浏览器窗口上创建画布</p>
<p data-track="73">创建语法：</p>
<p class="syl-line-pure-english" data-track="134">var paper = Raphael(x,y,width,height)</p>
<p data-track="74">x,y是画布左上角的坐标，此时画布的位置是绝对定位，有可能会与其他html元素重叠。width、height是画布的宽高。</p>
<p data-track="75">第二种：在一个元素中创建画布</p>
<p data-track="76">创建语法：</p>
<p class="syl-line-pure-english" data-track="135">var paper = Raphael(element, width, height);</p>
<p data-track="77">element是元素节点本身或ID width、height是画布的宽度和高度。</p>
<h3 data-track="67">3.2、绘制图形</h3>
<p data-track="79">画布创建好之后，该对象自带SVG内置图形有矩形、圆形、椭圆形。他们的方法分别为：</p>
<blockquote>
<p data-track="82">paper.circle(cx, cy, r); // (cx , cy)圆心坐标 r 半径<br class="sysbr">paper.rect(x, y, width, height, r); // (x,y)左上角坐标 width宽度 height高度 r圆角半径(可选)<br class="sysbr">paper. ellipse(cx, cy, rx, ry); // (cx , cy)圆心坐标 rx水平半径 ry垂直半径</p>
</blockquote>
<p data-track="68">eg：在div中绘制一个圆形，一个椭圆、一个矩形。</p>
<div class="cnblogs_code">
<pre><div id="box"></div>
<script>
<span style="color: rgba(0, 0, 255, 1)">var</span> paper = Raphael("box",300,300<span style="color: rgba(0, 0, 0, 1)">)
paper.circle(</span>150,150,150<span style="color: rgba(0, 0, 0, 1)">)
paper.rect(</span>0,0,300,300<span style="color: rgba(0, 0, 0, 1)">)
paper.ellipse(</span>150,150,100,150<span style="color: rgba(0, 0, 0, 1)">)
</span></script></pre>
</div>
<p> </p>
<p data-track="83">运行结果如下：</p>
<div class="pgc-img"><img alt="HTML5(九)——超强的 SVG 动画" class="syl-page-img lazyload" data-src="https://p1-tt.byteimg.com/origin/pgc-image/0cb5bbe4755a4080b876dfee920442c6?from=pc">
<p class="pgc-img-caption"> </p>
</div>
<p data-track="85">除了简单图形之外，还可以绘制复杂图形，如三角形、心型，这时就使用path方法。</p>
<p data-track="100">使用语法：paper.path(pathString)</p>
<p data-track="101">pathString是由一个或多个命令组成，每个命令以字母开始，多个参数是由逗号分隔。</p>
<p data-track="102">eg：绘制一个三角形。</p>
<pre class="syl-page-code hljs bash"><code><span class="hljs-built_in">let sj = paper.path(<span class="hljs-string">"M 0,0 L100,100 L100,0 'Z'")</span></span></code></pre>
<p data-track="99">还可以绘制文字，如果需要换行，使用 \n 。</p>
<p data-track="106">文字语法：paper.text(x,y,text)</p>
<p data-track="107">(x,y)是文字坐标，text是要绘制的文字。</p>
<h3 data-track="105">3.3、设置属性</h3>
<p data-track="88">图形绘制之后，我们通常会添加stroke、fill、stroke-width等让图形更美观，Raphael使用attr给图形设置属性。</p>
<p data-track="89">使用语法：circle.attr({"属性名","属性值","属性名","属性值",...})</p>
<p data-track="90">如果只有属性名没有属性值，则是获取属性，如果有属性值，则是设置属性。</p>
<p data-track="93">注意：如果只设置一个属性时，可以省略‘{}’。如：rect.attr('fill','pink')</p>
<p data-track="91">eg：给上边的矩形添加边框和背景色。</p>
<div class="cnblogs_code">
<pre><div id="box"></div>
<script>
<span style="color: rgba(0, 0, 255, 1)">var</span> paper = Raphael("box",300,300<span style="color: rgba(0, 0, 0, 1)">)
let rect </span>= paper.rect(100,100,150,200<span style="color: rgba(0, 0, 0, 1)">)
rect.attr({</span>'fill':'red','stroke':'blue','stroke-width':'10'<span style="color: rgba(0, 0, 0, 1)">})
</span></script></pre>
</div>
<p> </p>
<h3 data-track="108">3.4、添加事件</h3>
<p data-track="109">RaphaelJS一般具有以下事件：<br class="sysbr">click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及对应的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。</p>
<p data-track="110">使用语法：</p>
<pre class="syl-page-code hljs javascript"><code>obj.click(<span class="hljs-function"><span class="hljs-keyword">function(<span class="hljs-params">){
<span class="hljs-comment">//需要操作的内容
})</span></span></span></span></code></pre>
<h3 data-track="70">3.5、添加动画</h3>
<p data-track="65">animate为指定图形添加动画并执行。</p>
<p data-track="115">使用语法：</p>
<pre class="syl-page-code hljs lua"><code>obj.animate({
<span class="hljs-string">"属性名1":属性值<span class="hljs-number">1,
<span class="hljs-string">"属性名2":属性值<span class="hljs-number">2,
...
},<span class="hljs-built_in">time,<span class="hljs-built_in">type)</span></span></span></span></span></span></code></pre>
<p data-track="117">属性名和属性值就根据你想要的动画类型加就ok。</p>
<p data-track="118">time：动画所需时间。</p>
<p data-track="119">type：指动画缓动类型。常用值有：</p>
<ul>
<li data-track="120">linear - 线性渐变</li>
<li data-track="121">ease-in | easeIn | < - 由慢到快</li>
<li data-track="122">ease-out | easeOut | > - 由快到慢</li>
<li data-track="123">ease-in-out | easeInOut | <> - 由慢到快再到慢</li>
<li data-track="124">back-in | backIn - 开始时回弹</li>
<li data-track="125">back-out | backOut - 结束时回弹</li>
<li data-track="126">elastic - 橡皮筋</li>
<li data-track="127">bounce - 弹跳</li>
</ul>
<p data-track="128">eg：点击矩形，矩形缓缓变大。</p>
<div class="cnblogs_code">
<pre><div id="box"></div>
<script>
<span style="color: rgba(0, 0, 255, 1)">var</span> paper = Raphael("box",800,500<span style="color: rgba(0, 0, 0, 1)">)
let rect </span>= paper.rect(100,100,150,100<span style="color: rgba(0, 0, 0, 1)">)
rect.attr({</span>'fill':'red','stroke':'blue','stroke-width':'10'<span style="color: rgba(0, 0, 0, 1)">})
rect.attr(</span>'fill','pink'<span style="color: rgba(0, 0, 0, 1)">)
rect.click(</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
rect.animate({
</span>"width":300<span style="color: rgba(0, 0, 0, 1)">,
</span>"height":300<span style="color: rgba(0, 0, 0, 1)">
},</span>1000,"bounce"<span style="color: rgba(0, 0, 0, 1)">)
})
</span></script></pre>
</div>
<p> </p>
<p data-track="130">复制上边的代码，分别在各个浏览器和低版本IE浏览器运行，发现都可以正常运行。SVG的动画库挺多了，我们介绍了拉斐尔，有兴趣的小伙伴可以自行找找其他库。</p><br><br>
来源：https://www.cnblogs.com/web-learn/p/15132540.html
頁:
[1]