android svg 线条动画教程,SVG技术入门：线条动画实现原理-程序员宅基地

相信大家都见到过这样神奇的技术：一副线条构成的画能自动画出自己。非常的酷。Jake Archibald是这种SVG技术的首创者，并且写了一篇非常好的文章来描述它是如何实现的。Brian Suda也在24 Ways网站上讨论过它。 Polygon使用它在一篇设计方面的文章里创造出了非常神奇的效果。Codrops也做出了一些非常漂亮的例子。

其实我没有什么好增补的，只是想把这种技术说的更明白些，所以，在这里我要用我的方式把这种技术再讲解一遍。

1. 你有一个SVG图形

how-svg-line-animation-works.html

2. 这个图形必须要有一个线条(stroke)属性

how-svg-line-animation-works.html

3. 线条可以是虚线

我们可以用Illustrator制作，也可以用编程实现。我们用CSS来设置这些路径的样式(假定我们这里是inline SVG，或通过一个)，把它们变成虚线形式。

.path {

stroke-dasharray: 20;

}

这是让虚线里的每个小线段长度为20px。

how-svg-line-animation-works.html

4. 可以让虚线小段的长度变得更长….

.path {

stroke-dasharray: 100;

}

how-svg-line-animation-works.html

5. 我们还可以给我们的线条设置”offset”偏移量，这样会导致虚线里的小线段的位置发生移动。

当我们动态设置图形中线条的“offset”值时，可以看到这个效果：

how-svg-line-animation-works.html

可以这样简单的实现：

.path {

stroke-dasharray: 100;

animation: dash 5s linear;

}

@keyframes dash {

to {

stroke-dashoffset: 1000;

}

6. 想象，当虚线的小线条足够长，超过图形的整个线条长度时

没有什么变化，整个图像看起来完全不是虚线。你只需要将stroke-dasharray属性设置的足够长，超过整个线条的长度。

7. 现在给线条设置偏移量，让它不再覆盖整个图形。

这样你就看不见图形了。

8. 现在动态的慢慢将线条的偏移量设置回归到0

how-svg-line-animation-works.html

如果通过CSS，你需要将animation属性设置成forwards，这样整个动画就会停止在它的最终状态。

.path {

stroke-dasharray: 1000;

stroke-dashoffset: 1000;

animation: dash 5s linear forwards;

}

@keyframes dash {

to {

stroke-dashoffset: 0;

}

Tada!

实例演示

See the Pen bGyoz by Chris Coyier (@chriscoyier) on CodePen.

为什么要用JavaScript?

大部分你看到的SVG线条动画都使用了JavaScript。这是因为在现实情况中你很难知道线条有多长。我们这里设置的是1000，是因为它碰巧是1000。

用JavaScript获取长度值的写法是这样的：

var path = document.querySelector('.path');

var length = path.getTotalLength();

然后你就可以随便使用这个值了。文本顶部链接的那些文章讲的都比本文透彻，你最好还是参考一下那些文章。我只想简单的讲一下这种技术方法，希望它能给你一些启示。

本文链接：https://blog.csdn.net/weixin_28365523/article/details/117581792

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

《第一行代码》（第二版）广播的问题及其解决_代码里的广播错误-程序员宅基地

文章浏览阅读2.6k次，点赞5次，收藏13次。1）5.2.1弹出两次已连接或者未连接这是因为你同时打开了流量和WiFi，他就会发出两次广播。2）5.3.1中发送自定义广播问题标准广播未能弹出消息：Intent intent=new Intent("com.example.broadcasttest.MY_BROADCAST");sendBroadcast(intent);上述已经失效了。修改：Intent intent=new Intent("com.example.broadcasttest...._代码里的广播错误

K8s 学习者绝对不能错过的最全知识图谱（内含 58个知识点链接）-程序员宅基地

文章浏览阅读249次。作者 |平名阿里服务端开发技术专家导读：Kubernetes 作为云原生时代的“操作系统”，熟悉和使用它是每名用户的必备技能。本篇文章概述了容器服务 Kubernet..._k8知识库

TencentOS3.1安装PHP+Nginx+redis测试系统_tencentos-3.1-程序员宅基地

文章浏览阅读923次。分别是etc/pear.conf，etc/php-fpm.conf， etc/php-fpm.d/www.conf，lib/php.ini。php8安装基本一致，因为一个服务期内有2个版本，所以注意修改不同的安装目录和端口号。可以直接使用sbin下的nginx命令启动服务。完成编译安装需要gcc支持，如果没有，使用如下命令安装。安装过程基本一致，下面是安装7.1.33的步骤。执行如下命令，检查已经安装的包和可安装的包。执行如下命令，检查已经安装的包和可安装的包。执行如下命令，检查已经安装的包和可安装的包。_tencentos-3.1

urllib.request.urlopen()基本使用_urllib.request.urlopen(url)-程序员宅基地

文章浏览阅读3.1w次，点赞21次，收藏75次。import urllib.requesturl = 'https://www.python.org'# 方式一response = urllib.request.urlopen(url)print(type(response)) # <class 'http.client.HTTPResponse'># 方式二request = urllib.request.Req..._urllib.request.urlopen(url)

如何用ChatGPT+GEE+ENVI+Python进行高光谱，多光谱成像遥感数据处理？-程序员宅基地

文章浏览阅读1.5k次，点赞12次，收藏15次。如何用ChatGPT+GEE+ENVI+Python进行高光谱，多光谱成像遥感数据处理？

RS485总线常识_rs485 差分走綫間距-程序员宅基地

文章浏览阅读1.2k次。RS485总线常识 2010-10-12 15:56:36| 分类：知识储备 | 标签：rs485 总线传输差分 |字号大中小订阅RS485总线RS485采用平衡发送和差分接收方式实现通信：发送端将串行口的TTL电平信号转换成差分信号A,B两路输出，经过线缆传输之后在接收端将差分信号还原成TTL电平信号。由于传输线通常使用双绞线，又是差分传输，所_rs485 差分走綫間距

随便推点

移植、制作uboot、Linux（一）_uboot制作-程序员宅基地

文章浏览阅读621次。u-boot、linux烧录_uboot制作

windows下安装git和gitbash安装教程_64-bit git for windows setup.-程序员宅基地

文章浏览阅读1.2w次，点赞10次，收藏44次。windos上git安装，git bash安装_64-bit git for windows setup.

环形链表（算法java）_java 实现环形链表-程序员宅基地

文章浏览阅读196次。环形链表（算法java）的两种解决方法_java 实现环形链表

docker部署Airflow(修改URL-path、更换postgres --＞myslq数据库、LDAP登录)_airflow docker-程序员宅基地

文章浏览阅读5.7k次。Airflow什么是 Airflow？Airflow 的架构Airflow 解决哪些问题一、docker-compose 安装airflow（postgres）1、创建启动文件airflow-docker-compose.yml.1.1、添加挂载卷，需要修改airflow-docker-compose.yml的位置2、创建本地配置文件airflow.cfg2.1、如果想修改WEB URL地址，需要修改airflow.cfg中以下两个地方3、之后up -d直接启动即可web访问地址：二、存储数据库更换post_airflow docker

计算机毕业设计springboot高校教务管理系统532k79【附源码+数据库+部署+LW】-程序员宅基地

文章浏览阅读28次。选题背景：随着社会的发展和教育的普及，高校教务管理系统在现代高等教育中扮演着至关重要的角色。传统的手工管理方式已经无法满足高校日益增长的规模和复杂的管理需求。因此，开发一套高效、智能的教务管理系统成为了当今高校管理的迫切需求。选题意义：高校教务管理系统的开发具有重要的意义和价值。首先，它可以提高高校教务管理的效率和准确性。通过自动化处理学生选课、排课、考试安排等繁琐的事务，大大减轻了教务人员的工作负担，提高了工作效率。同时，系统可以实时更新学生信息和课程信息，减少了数据错误和冗余，保证了管理的准确性

javaint接收float_Java Integer转换double，float，int，long，string-程序员宅基地

文章浏览阅读132次。首页>基础教程>常用类>常用 Integer类Java Integer转换double，float，int，long，stringjava中Integer类可以很方便的转换成double，float，int，long，string等类型，都有固定的方法进行转换。方法double doubleValue() //以 double 类型返回该 Integer 的值。flo..._java integet接收float类型的参数