【Web动画】SVG 线条动画入门
通常我们说的 Web 动画,包含了三大类。
CSS3
动画javascript
动画(canvas)html
动画(SVG)
个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。
举个栗子
SVG 线条动画,在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条:
把里面的进度条单独拿出来,也就是需要实现这样一个效果:
脑洞大开一下,使用 CSS3 如何实现这样一个进度条呢。
CSS3 是可以做到的,就是很麻烦。但是如果采用 SVG 的话,迎刃而解。
我们假定你在阅读本文的时候有了一定的 SVG 基础,上面代码看看就懂了,好了,本文到此结束。
好吧,还是一步一步解释,上面进度条的主要 SVG 代码如下:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400"><polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/><polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>
SVG 为何
可缩放矢量图形,即SVG,是W3C XML的分枝语言之一,用于标记可缩放的矢量图形。(摘自MDN)
上面代码中,先谈谈 svg
标签:
version
: 表示<svg>
的版本,目前只有 1.0,1.1 两种xmlns
:http://www.w3.org/2000/svg
固定值xmlns:xlink
:http://www.w3.org/1999/xlink
固定值xml:space
:preserve
固定值,上述三个值固定,表示命名空间,当数据单独存在svg
文件内时,这3个值不能省略class
:就是我们熟悉的 classwidth
|height
: 定义svg
画布的大小viewbox
: 定义了画布上可以显示的区域,当 viewBox 的大小和 svg 不同时,viewBox 在屏幕上的显示会缩放至 svg 同等大小(暂时可以不用理解)
有了 svg
标签,我们就可以愉快的在内部添加 SVG
图形了,上面,我在 svg
中定义了两个 polyline
标签。
SVG 基本形状
polyline
:是SVG的一个基本形状,用来创建一系列直线连接多个点。
其实,polyline
是一个比较不常用的形状,比较常用的是path
,rect
,circle
等。这里我使用polyline
的原因是需要使用 stroke-linejoin
和 stroke-linecap
属性,在线段连接处创建圆滑过渡角。
SVG 中定义了一些基本形状,在继续下文之前,建议点进去先了解一些基本图形的标签及写法:
SVG 线条动画
好,终于到本文的重点了。
上面,我们给两个 polyline
都设置了 class,SVG 图形的一个好处就是部分属性样式可以使用 CSS 的方式书写,更重要的是可以配合 CSS 动画一起使用。
上面,主要的 CSS 代码:
.g-rect-path{fill: none;stroke-width:10;stroke:#d3dce6;stroke-linejoin:round;stroke-linecap:round;
}.g-rect-fill{fill: none;stroke-width:10;stroke:#ff7700;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray: 0, 1370;stroke-dashoffset: 0;animation: lineMove 2s ease-out infinite;
}@keyframes lineMove {0%{stroke-dasharray: 0, 1350;}100%{stroke-dasharray: 1350, 1350;}
}
这尼玛是什么 CSS?怎么除了 animation
全都不认识?
莫慌,其实很多和 CSS 对比一下非常好理解,只是换了个名字:
fill
:类比 css 中的background-color
,给svg
图形填充颜色;stroke-width
:类比 css 中的border-width
,给svg
图形设定边框宽度;stroke
:类比 css 中的border-color
,给svg
图形设定边框颜色;stroke-linejoin
|stroke-linecap
:上文稍微提到过,设定线段连接处的样式;stroke-dasharray
:值是一组数组,没数量上限,每个数字交替表示划线与间隔的宽度;stroke-dashoffset
:则是虚线的偏移量
重点讲讲能够实现线条动画的关键属性 stroke-dasharray
。
属性 stroke-dasharray 可
控制用来描边的点划线的图案范式。
它是一个<length>和<percentage>数列,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。因此,5,3,2等同于5,3,2,5,3,2。
解释很苍白,直接看例子:
上面,填充进度条,使用了下面这个动画 :
@keyframes lineMove {0%{stroke-dasharray: 0, 1350;}100%{stroke-dasharray: 1350, 1350;}
}
stroke-dasharray: 0, 1350;
,表示线框短划线和缺口的长度分别为 0 和 1350,所以一开始整个图形都是被缺口占据,所以在视觉效果上长度为 0。
然后过渡到 stroke-dasharray: 1350, 1350
,表示线框短划线和缺口的长度分别为 1350 和 1350,因为整个图形的长度就是 1350,所以整个进度条会被慢慢填充满。
掌握了这个技巧后,就可以使用 stroke-dasharray
和 stroke-dashoffset
制作很多不错的交互场景:
SVG 线条动画实现按钮交互
SVG 线条动画实现圆形进度条
多 SVG 图形线条动画配合
之前我司一个 h5 里面应用过的,多SVG
图形线条动画配合,可以制作一些比较酷炫的动画,很有科技感。
正文结束,我在我的 Github 上,使用 SVG 实现了一些图形 -- SVG奇思妙想,Demo可以戳这里。
下篇文章将会详述非规则图形,如何使用 PS + AI 生成 path
路径,实现 SVG 动画,放个 Demo,敬请期待。
(12.28更新,下篇文章已出:【Web动画】SVG 实现复杂线条动画)
到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
【Web动画】SVG 线条动画入门相关推荐
- svg 动画_根据AI导出的SVG path制作SVG线条动画
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 首先祝大家2019新年快乐,万事大吉,猪事顺利,阖家欢乐. 前面文章SVG 线条动画基础入门知识学习到了基础知识,现在来给 ...
- svg html 鼠标滚轮交互,鼠标滚轮控制SVG线条动画
之前用D3制作图表是初次接触SVG,当时只顾感叹D3的强大了.后来当看到网站 Serio Verify 的时候,才意识到SVG用于制作可交互的页面动画是多么有意思. 于是自己也尝试在HTML页面中制作 ...
- css3宽度变大动画_SVG线条动画
什么是线条动画 通常来说,对于web前端来实现动画效果,不外乎通过下面几种方案: CSS动画:利用css3的样式效果可以将dom元素做出动画的效果来. Canvas动画:利用Canvas提供的API, ...
- android svg 线条动画教程,SVG之旅:SVG线条动画实现原理
对于SVG路径动画,我相信大家都看到过这样的动效:一条线就像它自己画自己.非常的酷.@Jake Archibald是这项技巧的先驱,他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的 ...
- svg 线条动画浅尝
看了别人网站的svg动画觉得非常舒服,自己尝试实现一下 效果如下: 实现需要明白2个关于svg的css属性 1. stroke-dasharray stroke-dasharray: <perc ...
- android svg 线条动画教程,简单的SVG线条动画
[TOC] 看到网页中那种有如写字般的动画,觉得挺好玩的,就找了下制作方法,也比较简单,在此记录一下; 先上几张图看看: 简单的线条动画 ps4 用到的属性 stroke 定义边框颜色值; strok ...
- 怎樣制作线段动画_线条动画视频制作 如何制作线条运动图?线条动态图制作...
上周广东终于成功入秋,但是为什么,此刻小编感觉到很热嘞~广东这个天气真的是一年四季随机循环的啊~哈哈.好啦,不说废话,来看看今天的教程方案吧!线条动画大家知道是什么意思嘛?就是画面中有线条在运动的动画 ...
- css3直线运动_css3动画--边框线条动画
网上看到一个css3动画, 最开始思路是,里面一个DIV方块,右上角一个同样大小的div1,向上,向右平移8px,设div1的border-top,border-right值形成,如图所示 再用cli ...
- android svg路径动画,Svg 路径动画实现旋转进度条
尝试使的候通现端数是制这.效合应近环大过这业据用 Svg 实现简易的动画效果.有关 Svg 的具体知识点不在此文赘述,仅就所举示例的需求点阐述实在重说道.础过学开概码数项遍间里哦行览屏屏定处..容标中 ...
- 【Web动画】SVG 实现复杂线条动画
在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...
最新文章
- Windows Phone 7 自定义控件库
- 阿里巴巴为什么要禁用 Executors 创建线程池?
- 缩进一个字符_解析Word——Word段落格式中的几种缩进(中)
- 2014/School_C_C++_A/5/勾股定理
- 关于easyUI在子页面增加显示tabs的一个问题
- 微信开发4——PHP实现PC扫码授权登陆获取用户信息
- [资料]PHP中的__set __get使用
- 3.10 datetime
- Python 基础总结
- Struts秘籍之起式:第1.6式:管理Struts配置文件
- mysql软件可行性分析报告_网上商城系统可行性分析报告.doc
- centos7安装java(多种方式)
- 【高速总线】JESD204B简介
- 转化Foggy_Cityscapes数据集为voc和yolo格式用作目标检测
- jsp代码中ArrayList函数提示“无法解释为类型”
- 国家税务总局河南省电子税务局中,交契税时,报房屋属地税务机关必填的解决方法
- 安装火绒的情况下怎么关闭防火墙
- echarts实现甘特图
- rl滤波器原理_滤波器电路合集(图文详解)
- 计算机科学与技术专接本试题,计算机科学与技术专业专接本入学考试试题.doc...