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

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

智能推荐

LUXAND人脸识别（linux版本）_luxand 获取faceid-程序员宅基地

文章浏览阅读1.9k次。https://www.luxand.com/https://www.zhihu.com/question/19561362_luxand 获取faceid

linux系统服务器因为错误操作重启之后无法进入系统_centos系统linux 重启后lvm未激活-程序员宅基地

文章浏览阅读2.3k次。1、挂在光驱，原始的centos镜像2、按F11或者其他提示的按键进入修复模式3、使用以下的命令进行修复；_centos系统linux 重启后lvm未激活

Qt5 利用QProcess执行cmd命令_qt qprocess使用cmd切换目录-程序员宅基地

文章浏览阅读2.6k次。Qt5利用QProcess执行cmd命令把文件从一个目录移动到另一个目录,即执行cmd里的copy命令:copy 原文件目标位置代码需要在头文件中加入 #include<QProcess>void MainWindow::on_ptn_clicked(){ QProcess p(0); //这个会报错 p.start("copy C:\\Users\..._qt qprocess使用cmd切换目录

技术动态 | 利用知识图谱克服人工智能幻觉-程序员宅基地

文章浏览阅读573次。转载公众号 | 知识管理就在夏博自从ChatGPT成功推出以来，像大型语言模型LLM这样的人工智能系统引起了全球的关注，尽管LLM存在的时间要长得多。这些系统现在支持从聊天机器人、内容生成到头脑风暴和脚本代码的很多场景。然而，随着这些模型变得越来越复杂，它们产生错误的可能性也越来越大。最近，像ChatGPT这样的大型语言模型产生了不准确的报告，争论了不正确的事实，并在他们的答案中描述了现实世界的偏..._知识图谱chatgpy幻觉

白盒测试之分支-条件覆盖_白盒测试测试中的分支测试-程序员宅基地

文章浏览阅读549次，点赞17次，收藏11次。分支-条件覆盖可以使程序中的判断语句以及判断语句中的条件的真、假分支都得到覆盖，但是分支-条件覆盖达到 100% 仍然强度不够，程序中的某些逻辑运算等错误仍然可能不会被发现。_白盒测试测试中的分支测试

fastadmin 关联模型查询线下测试没问题线上报错Unknown column_fastadmin关联搜索出错-程序员宅基地

文章浏览阅读172次。PHP版本也是一样的都是7.4。就很迷惑一模一样的代码怎么上线就会报错。但是又不能不用因为两个表有相同的字段去掉别名更是报错。奇怪的是线下环境大写小写都可以用不报错。最终解决手段：别名首字母改小写就好了。线上环境只能小写大写就报错了。代码上线之后莫名报错。_fastadmin关联搜索出错

随便推点

八大排序算法的Java实现-程序员宅基地

文章浏览阅读69次。一、插入排序1. 直接插入排序2. 希尔排序

使用Sophus练习李群SO3、SE3以及对应的李代数so3、se3-程序员宅基地

文章浏览阅读2.2k次。这是高博《视觉SLAM14讲，从理论到实践》第4章的练习。加了一些注释和理解：#include <iostream>#include <cmath>using namespace std;#include <Eigen/Core>#include <Eigen/Geometry>#include "sophus/so3.h"#includ..._so3 distance

mat1 and mat2 shapes cannot be multiplied ( )的解决-程序员宅基地

文章浏览阅读8.7w次，点赞36次，收藏70次。问题描述错误代码：class Net(nn.Module): def __init__(self): super(Net, self).__init__() # nn.Conv2d(input_channel, output_channel, kernel, stride) self.conv1 = nn.Conv2d(3,64,5,1,1) # 64个5*5的filter -> 64个124*124的matrix sel_mat1 and mat2 shapes cannot be multiplied

ssm+jsp计算机毕业设计果蔬仓库管理系统6czxv（程序+lw+源码+远程部署）._果蔬仓库环境监测系统设计csdnl-程序员宅基地

文章浏览阅读52次。Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。SSM + mybatis + Maven + JSP 等等组成，B/S模式 + Maven管理等等。1. 使用Navicat或者其它工具，在mysql中创建对应名称的数据库，并导入项目的sql文件；其他版本理论上也可以。2. 使用IDEA/Eclipse/MyEclipse导入项目，修改配置，运行项目；_果蔬仓库环境监测系统设计csdnl

带视频详细教程三套模板免授权交友盲盒1.8.0H5脱单盲盒交友源码_盲盒代码免费版-程序员宅基地

文章浏览阅读686次。本套源码为H5独立版无需授权，无需公众号，有三套模板可自由切换，后台是thinkphp的框架。有详细文档搭建教程。本系统免公众号支持第三方免签约支付支持打包安卓+IOS双端支付接口：微信官方接口+易支付+虎皮椒+XORPAY主要盈利点：开启收费开启盲盒投放付费条件筛选付费！可设置付费购买代理（代理指的是红娘）注：版本为1.8 单纯去授权，其他加密文件未动！源码介绍注：测试系统，禁止商用！..._盲盒代码免费版

产品迭代发布如何更快速？阿里持续集成与持续交付实践之路全解析-程序员宅基地

文章浏览阅读168次。2017年5月9日，云效平台资深研发工程师向禹通过直播分享了《持续集成与持续交付实践之路》。他从云效背景、云效方案、云效价值三个方面进行了分享。他主要分享了持续集成持续交付的解决方案和案例，并且对大型系统如何实现持续集成、持续交付、进行产品迭代发布进行了详细介绍。以下内容根据直播视频..._项目迭代块、发布频次高,传统的人工构建交付,