前端技术分享-码匠 极客编程技术分享

您当前位于：HTML5新技术 ——> SVG 动画实现与制作的基本原理与方法
上一篇：SVG 常见的SVG属性有哪些，SVG的简单案例实战 下一篇：Canvas 图像绘制的基本方法（上）

SVG 动画实现与制作的基本原理与方法

2015/07/18 14:43:43 | 作者：HTML5学堂（码匠） | 分类：HTML5新技术 | 关键词：SVG,绘制图像,动画,animate

SVG - 动画制作

HTML5学堂：SVG - 动画制作。上一篇文章讲解了SVG的基本属性，大家能够利用SVG的基本属性进行绘制图像，那么如何让绘制好的图像动起来呢？今天要给大家分享的是SVG的动画制作，具体我们来看看下面的内容吧。

接触过HTML5的人，都知道，Canvas实现一个动画，需要不断的清除画布再重新绘制，如果没有接触过Canvas也不要紧，SVG之后我们紧接着要为大家介绍的就是Canvas。SVG提供了比较方便的API接口，动画实现起来比较方便，具体看看下面的动画命令。

SVG 动画基本命令

<set> 表示瞬间的动画设置

<animate> 用于实现单属性的动画效果

<animateColor> 颜色发生动画效果（也能够使用animate进行操作，因此，可忽略）

<animateTransform> 变形类动画

<animateMotion> 沿着某个路径进行运动

SVG 动画参数介绍

1、attributeName的属性值是要变化的元素属性名称

2、attributeType = "CSS | XML | auto";如果你不提供一个attributeType属性，那么浏览器会尝试猜测是一个XML属性还是CSS属性

3、from, to

from：动画的起始值。

to：指定动画的结束值。

4、begin, end

begin：指动画开始的时间。begin的定义是分号分隔的一组值。

end：指定动画结束的时间。与begin的取值方法类似。

5、dur

指定动画的持续时间。可以取下面三者之一：大于0的数值、media和indefinite。该属性值缺省为indefinite，即无限长。

SVG示例1：<set> 动画设置

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5学堂</title>
  6.  <link rel="stylesheet" href="reset.css">
  7.  <style>
  8.   .smile {
  9.    border: 1px solid #999;
  10.   }
  11.  </style>
  12. </head>
  13. <body>
  14.  <svg class="smile" version="1.1" width="800" height="400" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  15.   <rect x="100" y="10" width="220" height="60" fill="yellow">
  16.    <set attributeName="x" attributeType="XML" to="300" begin="1s"/>
  17.    <!-- 如果你不提供一个attributeType属性，那么浏览器会尝试猜测是一个XML属性还是CSS属性。 -->
  18.   </rect>
  19.   <text x="20" y="40" fill="red">set瞬间动画设置</text>
  20.  </svg>
  21. </body>
  22. </html>

SVG示例2：<animate> 动画设置

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5学堂</title>
  6.  <link rel="stylesheet" href="reset.css">
  7.  <style>
  8.   .smile {
  9.    border: 1px solid #999;
  10.   }
  11.  </style>
  12. </head>
  13. <body>
  14.  <svg class="smile" version="1.1" width="800" height="400" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  15.   <rect x="100" y="100" width="220" height="60" fill="yellow">
  16.    <animate attributeName="x" attributeType="XML" from="100"  to="470" begin="0s" dur="5s" fill="remove" repeatCount="indefinite"/>
  17.    <!-- 当动画完成，animate的属性被设置回其原始值（fill="remove"）。如果想要的将动画属保持在to值的位置，则fill设置为"freeze"。动画如果无限重复则设置repeatCount的值。 -->
  18.   </rect>
  19.   <text x="20" y="140" fill="red">animate用于实现单属性的动画效果</text>
  20.  </svg>
  21. </body>
  22. </html>

SVG示例3：<animateTransform> 动画设置

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5学堂</title>
  6.  <link rel="stylesheet" href="reset.css">
  7.  <style>
  8.   .smile {
  9.    border: 1px solid #999;
  10.   }
  11.  </style>
  12. </head>
  13. <body>
  14.  <svg class="smile" version="1.1" width="800" height="400" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  15.   <rect x="100" y="200" width="220" height="60" fill="yellow">
  16.     <animateTransform attributeName="transform" type="rotate" from="0 50 220" to="360 50 220" begin="0s" dur="10s"repeatCount="indefinite"/>
  17.   </rect>
  18.   <text x="20" y="240" fill="red">animateTransform变形类动画</text>
  19.  </svg>
  20. </body>
  21. </html>

欢迎沟通交流~HTML5学堂

SVG示例4：<animateMotion> 动画设置

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5学堂</title>
  6.  <link rel="stylesheet" href="reset.css">
  7.  <style>
  8.   .smile {
  9.    border: 1px solid #999;
  10.   }
  11.  </style>
  12. </head>
  13. <body>
  14.  <svg class="smile" version="1.1" width="800" height="400" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  15.    <path d="M200,300 q60,50 100,0 q60,-50 100,0" stroke="#000000" fill="none"/>
  16.   <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;">
  17.       <animateMotion path="M200,300 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite"/>
  18.   </rect>
  19.   <text x="20" y="300" fill="red">set瞬间动画设置</text>
  20.  </svg>
  21. </body>
  22. </html>

SVG 动画效果综合示例

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>HTML5学堂</title>
  6.  <link rel="stylesheet" href="reset.css">
  7.  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  8.  <style>
  9.   .smile {
  10.    width: 800px;
  11.    height: 400px;
  12.    border: 1px solid #f00;
  13.   }
  14.  </style>
  15. </head>
  16. <body>
  17.  <svg  class="smile" version="1.1" width="800" height="400" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  18.   <path d="M10,50 q60,50 100,0 q60,-50 100,0" stroke="#000000" fill="none"/>
  19.   <circle cx="0" cy="0" r="100" fill="yellow" stroke="black" stroke-width="1px">
  20.    <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" dur="4s" repeatCount="indefinite"/>
  21.   </circle>
  22.  
  23.   <circle cx="-50" cy="-20" r="20" fill="black">
  24.    <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" dur="4s" repeatCount="indefinite" />
  25.   </circle>
  26.  
  27.   <circle cx="50" cy="-20" r="20" fill="black">
  28.    <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" dur="4s" repeatCount="indefinite" />
  29.   </circle>
  30.  
  31.   <clipPath id="faceClip">
  32.    <rect x="-100" y="40" width="220" height="60" />
  33.   </clipPath>
  34.   <circle cx="0" cy="0" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)">
  35.    <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" dur="4s" repeatCount="indefinite" />
  36.   </circle>
  37.  </svg>
  38.  <!-- 注释 -->
  39.  <!-- 清除路径 clipPath -->
  40.  <!-- 简单的理解就是画一个路径把它剪切出来 -->
  41.  <!-- 用于隐藏位于剪切路径以外的对象部分。定义绘制什么和什么不绘制的模具被称为剪切路径 -->
  42.  <!-- 动画 -->
  43.  <!-- path中可以使用M L 和 z。M表示将画笔移动到某个位置，即moveTo L表示的是lineTo z则表示的是关闭路径（closePath） -->
  44.  <!-- q表示的贝塞尔，也就是拐点的位置（Q表示绝对，q表示相对） -->
  45. </body>
  46. </html>

SVG动画效果图

SVG 动画效果综合示例

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇：SVG 常见的SVG属性有哪些，SVG的简单案例实战 下一篇：Canvas 图像绘制的基本方法（上）