SVG动画实践篇-无中生有的线条动画
git: https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/path
说明
这个动画实现的是线条动画,主要用到的是 SVG 的 path 标签。
<path> 标签命令
使用 <path> 标签的 d 属性标识路径集合,勾画线条的形状。
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
例如:
<svg width="300" height="300" version="1.2" xml:space="default">
<path d="M0 0 L150 100 V200 H100" stroke="#f00" stroke-width="1"/>
</svg>
动画实现
步骤一: 定义SVG线条
定义SVG线条,除了使用 d 属性定义路径外,还需要用到两个重要的属性, stroke-dasharray 和 stroke-dashoffset, 这两个属性值可以在 path 标签上定义,也可以在样式表中定义。
- stroke-dasharray 定义短划线和缺口的长度,实现画虚线的效果。例如4px 2px/4px,2px,数与数之间可用空白或逗号隔开。
- stroke-dashoffset 标识的是整个路径的偏移值。
svg代码如下:
<svg width="500" height="200" version="1.2" xml:space="default">
<path id="path" d="M0,150c0,0,0-61,72-44c0,0-47,117,81,57s5-110,10-67s-51,77.979-50,33.989" stroke="#f00" stroke-width="1" stroke-dasharray="4px,2px" stroke-dashoffset="10px" fill="none"/>
</svg>
步骤二: 给path标签使用CSS3动画
定义 css3 的 animation,通过改变 path 标签的 stroke-dasharray 或 stroke-dashoffset 值来使路径动起来。
path 路径的长度可使用 js 的 document.getElementById(‘path’).getTotalLength() 来获得。
方法一: 改变 stroke-dasharray 来实现动画
css 代码如下:
#path{
-webkit-animation:slide 2s linear infinite;
} @keyframes slide {
0%{
stroke-dasharray:0 511px; /* 511px 为整个路径的长度 */
}
100%{
stroke-dasharray:511px 511px;
}
}
- stroke-dasharray:0 511px; 实线宽度为0,空隙宽度为整个path路径的宽度,所以刚开始路径没有实线,是不可见的。
- stroke-dasharray:511px 511px; 实线宽度为整个 path 路径长度,所以整条路径可见。
- css3 animation 动画定义路径从不可见到可见的变化。
方法二: 改变 stroke-dashoffset 来实现动画
css 代码如下:
#path{
stroke-dasharray:511px 511px;
-webkit-animation:slide2 2s linear infinite;
} @keyframes slide2 {
0%{
stroke-dashoffset:511px;
}
100%{
stroke-dashoffset:0px;
}
}
- stroke-dasharray:511px 511px; 给 path 标签定义实线宽度和空隙宽度都为整个path 的长度。这个时候如果不用动画,则线条会全部展示。
- 0%{stroke-dashoffset:511px;} path 路径左偏移 511px, 则会显示 511px 的空隙宽度。此时路径没有实线,是不可见的。
- 100%{stroke-dashoffset:0px;} path 路径偏移量为0,则恢复到最初始状态,显示全部的实线。
- css3 animation 动画定义路径从不可见到可见的变化。
多条 path 的动画或文字动画
- 使用 symbol 定义和 use 实例化来画出SVG路径。
- 使用 CSS3 的 animation 属性来修改实例化路径的 stroke-dasharray 或 stroke-dashoffset 的值,从而实现动画效果。
- 可新建多个同样的 SVG 路径,并且每个路径的颜色和动画效果都不一样,最终形成错落的完整的动画。
参考资料: http://www.alloyteam.com/2017/02/the-beauty-of-the-lines-break-lines-svg-animation/
SVG动画实践篇-无中生有的线条动画的更多相关文章
- 【Web动画】SVG 实现复杂线条动画
在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...
- 【Web动画】SVG 线条动画入门
通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...
- SVG动画实践篇-模拟音量高低效果
git 地址:https://github.com/rainnaZR/svg-animations/tree/master/src/demo/step2/volumn 说明 这个动画的效果就是多个线条 ...
- 炫酷线条动画--svg
我们经常可以在一些页面看到看起来很酷的线条动画,有些可以用css实现,有些css就无能为力了,今天来研究另一种实现方式,svg 如果对svg是什么还不了解的话,可以先去看看svg的基础教程: 一般对于 ...
- SVG动画实践篇-音量变化效果
git 地址:https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/volumn 说明 这个动画的效果就是多个线 ...
- 线条之美,玩转SVG线条动画
线条之美,玩转SVG线条动画 作者:AlloyTeam www.alloyteam.com/2017/02/the-beauty-of-the-lines-break-lines-svg-animat ...
- 玩转SVG线条动画
在上一节的<SVG线条动画实现原理>一文中,了解了SVG中线动画是怎么做的.在这篇文章中,了解了怎么借助Sketch这样的制作软件绘制SVG的路径,然后借助于SVG的stroke-dash ...
- SVG动画实践篇-字母切换
git: https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/letter.change 说明 这个页面实现了 ...
- PPT制作线条动画
0.小叙闲言 今天在用PPT做动画的时候小有心得,百度了一下线条动画制作,有一个贴子里面的讨论,也给了我一些灵感,贴子地址:http://www.rapidbbs.cn/thread-24577-1- ...
随机推荐
- matlab画图颜色设置
各种颜色属性选项选项意义选项意义'r' 红色 'm' 粉红'g' 绿色 'c' 青色'b' 兰色 'w' 白色'y' 黄色 'k' 黑色各种线型属性选项选项意义选项意义'-' 实线 '--' 虚线': ...
- python面试题解析(数据库和缓存)
1. 答: 关系型数据库:Mysql,Oracel,Microsoft SQL Server 非关系型数据库:MongoDB,memcache,Redis. 2. 答: MyI ...
- dubbo基础文档
随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当网站流量很小时,只需一个应用, ...
- 02_ThreadLocal语法与源码分析
文章导读: 早在JDK 1.2的版本中就提供Java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地编写出优美的多线程 ...
- Java学习ing
ConcurrentHashMap从JDK1.5开始随java.util.concurrent包一起引入JDK中,主要为了解决HashMap线程不安全和Hashtable效率不高的问题. Concur ...
- Spring Boot 必须先说说 Spring 框架!
现在 Spring Boot 非常火,各种技术文章,各种付费教程,多如牛毛,可能还有些不知道 Spring Boot 的,那它到底是什么呢?有什么用?今天给大家详细介绍一下. Spring Boot ...
- 刷题总结——advanced fruits(hud1503)
题目: The company "21st Century Fruits" has specialized in creating new sorts of fruits by t ...
- [转] Makefile 基础 (5) —— Makefile 使用变量
该篇文章为转载,是对原作者系列文章的总汇加上标注. 支持原创,请移步陈浩大神博客:(最原始版本) http://blog.csdn.net/haoel/article/details/2886 我转自 ...
- element-ui select组件使用需要注意的
当在使用select组件的时候,要注意 <el-select v-model="scope.row.state" @change="editDriftStatus& ...
- vue.js源码学习分享(九)
/* */ var arrayKeys = Object.getOwnPropertyNames(arrayMethods);//获取arrayMethods的属性名称 /** * By defaul ...