SVG - 动画制作

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> 动画设置

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

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

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

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

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

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

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

SVG 动画效果综合示例

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

SVG动画效果图

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-08-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

5个最好的开源Javascript图表库

在这篇文章中,我向大家介绍前5名最好的开源JavaScript图表库。每个站点的仪表板都是不完整的,因为他们缺少图表,所以为我们的站点找到正确的图表库是非常重要...

2268
来自专栏我和未来有约会

使用jQuery来创建Silverlight

使用jQuery来创建Silverlight jQuery已经成为了VS2010内置支持的JavaScript脚本框架了,小巧实用。这里看看怎么用jQuer...

3416
来自专栏cloudskyme

开发自动化插件地址记录

代码改进插件和相应的下载站点 URL 工具目的Eclipse 插件的 URL CheckStyle 编码标准分析 http://eclipse-cs.s...

3367
来自专栏黑白安全

web安全之XSS

XSS: (Cross Site Scripting) 跨站脚本攻击, 是Web程序中最常见的漏洞。

363
来自专栏木可大大

XSS攻击与防范

XSS攻击,又称为CSS(Cross Site Scripting),由于CSS已经被用作层叠样式表,为了避免这个冲突,我们将Cross缩写成X。XSS攻击的中...

531
来自专栏phodal

【开源】2md:将复制的内容、网页转成 markdown

如果一个 Markdown 编辑器不能解决问题,那么就用两个编辑器。 作为一个作者、程序员,兼知名的 markdown 程序员,我总是要在 Markdown、H...

3148
来自专栏walterlv - 吕毅的博客

WPF 应用完全模拟 UWP 的标题栏按钮

发布于 2018-08-04 09:35 更新于 2018-08...

152
来自专栏Java技术分享

跨域与跨域访问

什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的...

18810
来自专栏前端知识分享

第151天:网页中插入百度地图方法(不需要密钥)

 以上就是网页中插入百度地图的方法,做企业站,总是要插入百度地图,以后再也不用愁了。

652
来自专栏张善友的专栏

使用jQuery Uploadify在ASP.NET 上传附件

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示。Uploadify官方网址:http://www.uploadify.com/,...

1799

扫描关注云+社区