文档章节

SVG描边动画

小尾巴儿
 小尾巴儿
发布于 2016/11/04 22:32
字数 261
阅读 29
收藏 0

先上效果:

图片标题

再上代码: svg1.html ###1.stroke-dasharray 画笔虚线的每个线段的长度,见图

图片标题

<svg width="500" height="200" style="padding-top: 100px">
    <line x1="0" y1="0" x2="100%" y2="0" stroke-dasharray="0" stroke-width="5" stroke="pink"></line>
    <line x1="0" y1="60" x2="100%" y2="60" stroke-dasharray="20" stroke-width="5" stroke="pink" ></line>
    <line x1="0" y1="120" x2="100%" y2="120" stroke-dasharray="40" stroke-width="5" stroke="pink" ></line>
</svg>

###2.stroke-dashoffset 画笔虚线的起始偏移,大于0,向前移动,小于0,向后偏移

图片标题

我们可以利用改变stroke-dashoffset造成元素在移动的假象,下图分别是增加和减小stroke-dashoffset

图片标题 图片标题

###3.描边动画 3.1 此时,如果我们将stroke-dasharray设置的和元素的路径一样大,那么元素将完全被画笔的实线部分填充。

3.2 然后再将stroke-dashoffset设置的和元素路径一样大,元素将完全被画笔的空白部分填充。

3.3 在css动画中修改stroke-dashoffset,形成描边动画。

@keyframes drawAnimate {
        from{
            stroke-dashoffset: 2640px;
        }
        to{
            stroke-dashoffset: 0;
        }
    }

###4.获取路径长度

var path = document.querySelector('.draw-animate');
var length = path.getTotalLength();

实际效果参考

© 著作权归作者所有

小尾巴儿
粉丝 5
博文 10
码字总数 11539
作品 0
深圳
程序员
私信 提问
关于控制SVG描边属性缩放的神句vector-effect: non-scaling-stroke

在这篇文章不炫技,SVG+CSS3 旋转动画属性就能实现的梦幻效果的黄金螺旋效果中,曾经留下过一个小尾巴,就是关于描边属性随着缩放动效等比例缩放的问题,当时用尽了各种方法,也没有解决,尝...

泱泱
2018/03/14
0
0
UI设计师福利之手把手做一枚与众不同的loading动图

SVG动画本质上是动图,我们并不能把它当做实现真正动画的工具,它比gif动图的优势在于小的体量,可交互,可矢量放大,方便修改色值,但它的劣势也很明显,渲染需要耗内存(所以能用基本的移动...

泱泱
2017/05/24
0
0
双效合一的SVG多色描边变形动画

今天在codepen看到一个效果如下: 觉得十分有趣,作者是SVG结合canvas完成的,里面所有的路径部分是SVG完成的,但动画效果是canvas完成的。canvas能看懂一丢丢,能改一丢丢,但不会写(硬伤~...

泱泱
2017/08/01
0
0
Android 制作逐渐显示动画(描边动画、矢量动画VectorDrawble)

传统的Android提供的动画只有平移、缩放、显示等效果,那么怎么才能实现逐渐绘制动画? 答案是使用矢量图动画。 一、 矢量图支持VectorDrawble Android 系统从5.0开始支持矢量图,可以通过 ...

Mr云台
2017/09/20
0
0
画影图形: SVG & Canvas Shapes

画影图形指描画犯人面影,悬赏通缉。这里用法明显有问题,不过取其表义而已。 在一个前端看来,画图有三种方法,Cavas,SVG 以及 CSS。至于三者优劣,将在此针对各种图形做逐一比较,有方,圆...

shanyue
2018/07/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
6
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0
OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
1K
11
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部