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动画效果图
- 【Go 语言社区】golang的bufio用于内容解析
- [Go语言]从Docker源码学习Go——指针和Structs - lemon_bar
- Git 项目推荐 | Go 语言读写 INI 文件工具包
- 初识Python (r10笔记第52天)
- 挑战数据结构与算法面试题——统计上排数在下排出现的次数
- Go语言的 10 个实用技术--转
- MySQL反连接的优化总结(r10笔记第51天)
- python基础知识——内置数据结构(列表)
- 【Go 语言社区】Go语言Slice去重
- 【Go 语言社区】Golang 语言再谈接口
- 【Go 语言社区】Golang 语言再谈常量
- 【Go 语言社区】HTML5 Canvas+JS控制电脑或手机上的摄像头实例
- MySQL Profile在5.7的简单测试(r10笔记第50天)
- 【Go 语言社区】Golang中interface判断nil问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Cordova 运行 Web 应用
- SSH 端口转发小结
- Hive实现自增序列及元数据问题
- 手工将项目升级至 Angular 9 记录
- 备份和恢复 timescaledb 的超级表 (hypertables)
- CVE-2020-14644 weblogic iiop反序列化漏洞
- Ubuntu 17.10 安装折腾记录
- charles工具使用
- 干货 | 从0到1,搭建一个体系完善的前端React组件库
- LeetCode 01两数之和&02两数相加
- 给GitHub "彩蛋" readme 生成自定义统计信息
- Android |《看完不忘系列》之okhttp
- pt-osc改表过程中的中文乱码问题
- Hive Query生命周期 —— 钩子(Hook)函数篇
- python快速排序