SVG技术入门:线条动画实现原理
相信大家都见到过这样神奇的技术:一副线条构成的画能自动画出自己。非常的酷。Jake Archibald是这种SVG技术的首创者,并且写了一篇非常好的文章来描述它是如何实现的。Brian Suda也在24 Ways网站上讨论过它。 Polygon使用它在一篇设计方面的文章里创造出了非常神奇的效果。Codrops也做出了一些非常漂亮的例子。
其实我没有什么好增补的,只是想把这种技术说的更明白些,所以,在这里我要用我的方式把这种技术再讲解一遍。
1. 你有一个SVG图形
2. 这个图形必须要有一个线条(stroke)属性
3. 线条可以是虚线
我们可以用Illustrator制作,也可以用编程实现。我们用CSS来设置这些路径的样式(假定我们这里是inline SVG,或通过一个<object>
),把它们变成虚线形式。
<svg ...> <path class="path" stroke="#000000" ... > </svg>
.path {stroke-dasharray: 20; }
这是让虚线里的每个小线段长度为20px。
4. 可以让虚线小段的长度变得更长….
.path {stroke-dasharray: 100; }
5. 我们还可以给我们的线条设置”offset”偏移量,这样会导致虚线里的小线段的位置发生移动。
当我们动态设置图形中线条的“offset”值时,可以看到这个效果:
可以这样简单的实现:
.path {stroke-dasharray: 100; animation: dash 5s linear; } @keyframes dash { to { stroke-dashoffset: 1000; } }
6. 想象,当虚线的小线条足够长,超过图形的整个线条长度时
没有什么变化,整个图像看起来完全不是虚线。你只需要将stroke-dasharray
属性设置的足够长,超过整个线条的长度。
7. 现在给线条设置偏移量,让它不再覆盖整个图形。
这样你就看不见图形了。
8. 现在动态的慢慢将线条的偏移量设置回归到0
如果通过CSS,你需要将animation
属性设置成forwards
,这样整个动画就会停止在它的最终状态。
.path {stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; } @keyframes dash { to { stroke-dashoffset: 0; } }
Tada!
实例演示
为什么要用JavaScript?
大部分你看到的SVG线条动画都使用了JavaScript。这是因为在现实情况中你很难知道线条有多长。我们这里设置的是1000
,是因为它碰巧是1000。
用JavaScript获取长度值的写法是这样的:
var path = document.querySelector('.path'); var length = path.getTotalLength();
然后你就可以随便使用这个值了。文本顶部链接的那些文章讲的都比本文透彻,你最好还是参考一下那些文章。我只想简单的讲一下这种技术方法,希望它能给你一些启示。
(英文:How SVG Line Animation Works.)
转载于:https://www.cnblogs.com/w3cdream/p/4995131.html
SVG技术入门:线条动画实现原理相关推荐
- android 动态生成直线,Android SVG技术入门:线条动画实现原理
SVG技术入门:线条动画实现原理 这是一个有点神奇的技术:一副线条构成的画能自动画出自己,非常的酷.SVG 意为可缩放矢量图形(Scalable Vector Graphics),是使用 XML 来描 ...
- android svg 线条动画教程,SVG之旅:SVG线条动画实现原理
对于SVG路径动画,我相信大家都看到过这样的动效:一条线就像它自己画自己.非常的酷.@Jake Archibald是这项技巧的先驱,他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的 ...
- 【Web动画】SVG 实现复杂线条动画
在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...
- SVG+CSS3 简单线条动画
CSS3: #g1 path {stroke-dasharray: 1000;/*当线条很长很长的时候,这个值也要相应的的增大,否则会导致线条变成线段*/stroke-dashoffset: 1000 ...
- 区块链技术入门——核心概念与原理
区块链的前世今生 密码朋克(Cypherpunk):是一个邮件组,里面有许多大牛. 比特币的底层技术: 点对点网络 时间戳 加密技术 工作量证明 可以应用到其他领域. 将这些技术提炼出来,就提出了区块 ...
- SVG实例入门与动画实战
前言 在日常开发过程中,我们或多或少都接触过SVG,有可能是用它来画一些简单的图形,有可能是使用它来构建工程的字体文件库,甚至是用它来绘制一些复杂的可视化模块.本文会详细介绍SVG的基本图形以及常见的 ...
- 利用svg技术实现在线动画演示
搜索MDCC的论文,发现了这个站点,里面有演示动画,居然是通过svg来实现的. 分享给大家看看: 有空研究下,做一个类似的演示,展示一下OceanBase内部的常见操作. 展示一个svg做的游戏: h ...
- css3宽度变大动画_SVG线条动画
什么是线条动画 通常来说,对于web前端来实现动画效果,不外乎通过下面几种方案: CSS动画:利用css3的样式效果可以将dom元素做出动画的效果来. Canvas动画:利用Canvas提供的API, ...
- svg 动画_根据AI导出的SVG path制作SVG线条动画
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 首先祝大家2019新年快乐,万事大吉,猪事顺利,阖家欢乐. 前面文章SVG 线条动画基础入门知识学习到了基础知识,现在来给 ...
最新文章
- Jackson、FastJson快速入门(整合SpringMVC)
- POJ1376简单广搜
- python xlsxwriter使用方法汇总
- 毁掉云计算项目的三个“好办法”
- python练习小例子(二)
- vue目录结构及简单的开发介绍
- MarkDown语言
- oracle 不包含某个单词,SQL SELECT WHERE字段包含单词
- python怎么写运维脚本_python运维脚本实例
- 服务器503能自动恢复吗,服务器出现503错误的原因与解决方法
- 推送后更改git commit消息(假设没有人从远程拉出)
- Discuz = 7.2 SQL注入漏洞详情
- python正则表达式re
- 自动化查询及增加配置参数功能
- Java集合类之Collection接口学习
- 腾讯视频TS文件转MP4
- 多一份感动,多一份行动
- python关键词排名批量查排名_Python批量查询百度排名
- CRM项目半途而废 “烂摊子”该如何收拾?
- 冒险岛mysql破解_冒险岛079浩浩2020年3月年度一键端版
热门文章
- 计算机图形学二维变换知识点,计算机图形学 二维变换及二维.ppt
- loadrunner 只能并发50_loadrunner 场景设计-(一)
- html中超链接使用_HTML实例源码
- 电脑cmd命令大全_电脑定时关机的方法(2)
- 无向图求割点(找桥)tarjan
- 51NOD 1212 无向图最小生成树
- HDU - 1253 胜利大逃亡(搜索)
- 如何解决Qt程序在其他电脑上无法运行的问题(Qt程序打包发布)
- C语言中 *.c和*.h文件的区别!
- 【人体姿态估计2】Real-time Multi-person 2d pose estimation using part affinity fields_2017