android svg 线条动画教程,SVG技术入门：线条动画实现原理

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

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

1. 你有一个SVG图形

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

3. 线条可以是虚线

我们可以用Illustrator制作，也可以用编程实现。我们用CSS来设置这些路径的样式(假定我们这里是inline 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!

实例演示

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();

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

android svg 线条动画教程,SVG技术入门：线条动画实现原理相关推荐

【UnityDragonBones】像素角色人物骨骼动画教程（三）骨骼动画人物奔跑起来
[手机游戏像素画美术教程]跟Tsugumo学像素画系列-奔跑动画序列(完结) [手机游戏像素画美术教程]跟Tsugumo学像素画系列-让光照进来 [手机游戏像素画美术教程]跟Tsugumo学像素画系列 ...
区块链技术入门——核心概念与原理
区块链的前世今生密码朋克(Cypherpunk):是一个邮件组,里面有许多大牛. 比特币的底层技术: 点对点网络时间戳加密技术工作量证明可以应用到其他领域. 将这些技术提炼出来,就提出了区块 ...
android svg 线条动画教程,SVG之旅：SVG线条动画实现原理
对于SVG路径动画,我相信大家都看到过这样的动效:一条线就像它自己画自己.非常的酷.@Jake Archibald是这项技巧的先驱,他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的 ...
android ui组件开发教程,安卓开发入门教程-UI控件_Switch
什么是Switch Switch是一种用于显示开关状态的UI控件. 基础样例 1.普通开关效果图代码 android:layout_width="wrap_content" a ...
html5二维动画教程,H5+JS二维动画制作的一个实例
今天介绍一个网络上并不常用的插件two.js,刚开始学习的过程中,发现网上并没有合适的教程,在此发表基本操作 two.js是一款网页二维绘图软件,可以在指定区域内产生自设的各种动画效果下载网址如下: ...
大量电气自动化专业的Flash动画教程开始上架，你期待吗？
http://pan.baidu.com/s/1dD6f4PF 电路分析Flash动画教程 1天搞定模电数电FLASH课件视频教程 39个动画精美讲解初学者必备电力电子技术Flash动画教程液压 ...
android 动态生成直线,Android SVG技术入门：线条动画实现原理
SVG技术入门:线条动画实现原理这是一个有点神奇的技术:一副线条构成的画能自动画出自己,非常的酷.SVG 意为可缩放矢量图形(Scalable Vector Graphics),是使用 XML 来描 ...
android svg 线条动画教程,简单的SVG线条动画
[TOC] 看到网页中那种有如写字般的动画,觉得挺好玩的,就找了下制作方法,也比较简单,在此记录一下; 先上几张图看看: 简单的线条动画 ps4 用到的属性 stroke 定义边框颜色值; strok ...
【Web动画】SVG 实现复杂线条动画
在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...
SVG实例入门与动画实战
前言在日常开发过程中,我们或多或少都接触过SVG,有可能是用它来画一些简单的图形,有可能是使用它来构建工程的字体文件库,甚至是用它来绘制一些复杂的可视化模块.本文会详细介绍SVG的基本图形以及常见的 ...

android svg 线条动画教程,SVG技术入门：线条动画实现原理

android svg 线条动画教程,SVG技术入门：线条动画实现原理相关推荐

最新文章

热门文章