初窥 SVG Path 动画

本文讨论的主题是 SVG Path 动画(路径动画)。之所以要讨论这个话题,是因为在项目中有要求用到它。所谓 SVG Path 动画,就是让图形有像人实时绘制一样的动画效果,就比如下面这种:

1. 基础知识

开始 SVG Path 动画之前,你需要先准备一些基础知识,主要是SVG是什么,以及 Path(路径) 和 Stroke (描边)这两个东东。

1.1 SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics),因此,SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。SVG 除了制作图像之外,还有各种用途,比如动画、 ICONFONT等。

看看兼容性:

1.2 path(路径)

path 元素是 SVG 基本形状中最强大的一个,它不仅能创建其他基本形状,还能创建更多其他形状。另外,path 只需要设定很少的点,就可以创建平滑流畅的线条(比如曲线)。

<svg>
 <path d="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100"
  stroke="#05D380" stroke-width="2"
  fill="none"/>
</svg>

1.3 stroke(描边)

要实现绘制动画效果,除了 path 外,还要依靠 stroke 的两个重要属性来完成,即 stroke-dasharraystroke-dashoffset

  • 属性 stroke-dasharray:该值可能由两个值合写,使用英文逗号(,)分隔,第一个值是画出的每段实线线段的长度,第二个值是各段之间空隙的长度。如果无分隔,则说明两个值都是一样大小的。
  • 属性 stroke-dashoffset:指定每个实线线段的起始偏移量。正数从路径起始点向前偏移,负数则向后。

举例而言,如果要实现类似 CSS 中 border-style: dotted; 这样的虚线效果,则可以设置 stroke-dasharray:5,10,第一个数字表示每一段实线长度为 5,第二个表示实线直接间隔长度为 10

<svg>
 <path d="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100"
  stroke="#05D380" stroke-width="2"
  fill="none"
  stroke-dasharray="5,10"/>
</svg>

1.4 CSS 控制

我们将 SVG 代码插入到 HTML 文件中,SVG本身也是一种DOM节点,能使用CSS属性控制。例如上例也可以改成这样。我们为 path 定义了一个样式类 mypath,并在 <style> 中进行定义:

<style>
.mypath {
    stroke: #05D380;
    stroke-width: 2;
    stroke-dasharray: 5, 10;
    fill: none;
}
</style>

<svg>
    <path d="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100" class="mypath" />
</svg>

1.5 CSS3 的 keyframes 和 animation

要动画,就需要借助 CSS3 的 keyframesanimation。此处知识略。

2. SVG Path 绘制动画原理分析

假设一条路径的总长度为 888,我们设置这条路径的 storke-dasharray:888 ,于是这条路径就变成了由长度 888 的实线与长度 888 的间隔组成;但是,由于路径的总长度只有 888,因此看上去和正常场景是一样的,只不过在实线的后面,还跟着一段长度 888 的间隔;

当我们设置 stroke-dashoffset:100 , 我们将该虚线向前偏移了 100;那我们设置 stroke-dashoffset:888,该路径就变成了空白。

在 CSS 中,你如果设置一个块级元素 margin-left: -100%,很可能你在屏幕中就看不到它了。其实 stroke-dashoffset 的表现也和这个差不多,用于定义“偏移”。

通过控制 stroke-dashoffset 属性值,我们就控制了这个路径的展示和隐藏,再配合 CSS3 的 animation 动画,就能够完美的实现绘制动画。

3. SVG Path 绘制动画实践

3.1 获得路径长度

路径的长度可以使用 js 来获得,上例的路径长度就是 888

var path = document.querySelector('.mypath');
var length = path.getTotalLength(); // 888.7

3.2 设置stroke-dasharray和stroke-dashoffset

我们设置 stroke-dasharraystroke-dashoffset 的值都为 888,这个值恰好是路径的长度。

不同的 path 其长度是不一样的,请先用 js 获取其长度。

<style>
.mypath {
    stroke: #05D380;
    stroke-width: 2;
    stroke-dasharray: 888;
    stroke-dashoffset: 888;
    fill: none;
}
</style>

<svg>
    <path d="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100" class="mypath" />
</svg>

你会发现什么都看不到,但当你手动修改 stroke-dashoffset 的值,使之从 888 逐步减少到 0时,你会发现图像会慢慢出现。

3.3 配合 CSS3 animation 动画

接下来,使用 CSS3 动画中的 keyframe 来控制 stroke-offset属性,把它的值从 888 变为 0,Path 绘制效果就出来了。

<style>
.mypath {
    stroke: #05D380;
    stroke-width: 2;
    stroke-dasharray: 888;
    stroke-dashoffset: 888;
    fill: none;
    -webkit-animation: go 4s ease-in-out forwards;
}

@-webkit-keyframes go {
    0% {
        stroke-dashoffset: 888;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
</style>
<svg>
    <path d="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100" class="mypath" />
</svg>

到这里,SVG Path 绘制动画基本就讲完了,仅限于入门使用。你可以找其他的 path 来试试看。

路径动画的方向,其实是路径本身就规定了的,所以如果你需要一个特别的路径动画,那么就得保证路径是按你动画要求的步骤来绘制的。

4. 如果获得 path?

这是补充的内容。一开始我看到 path 元素里的 d 值,我是崩溃的,这玩意是啥啊。我怎么才能得到这个值呢?

首先,你得有一个 SVG 文件,怎么制作 SVG 文件,这个自己 Google 吧。

获得 SVG 文件之后,使用文本编辑器打开它,你会看到里面有你所需要的 svg 标签,也有你需要的 path 元素了,你所需要做的,可能就是拷贝,然后适当修改一下,最后再加上动画即可。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Flutter&Dart

Flutter之WidgetsApp使用详解&与MaterialApp的纠缠

如果对MaterialApp不熟悉,可先看我上一篇文章: Flutter之MaterialApp使用详解

883
来自专栏Google Dart

AngularDart Material Design 屑 顶

“chip”小部件呈现“chip”格式的对象 - 带阴影的圆形框,通常用于水平列表。可以使用任何实现HasUIDisplayName接口的对象,或者根本不使用任...

764
来自专栏opengps

新手入门百度地图开发的(0,0)坐标问题

        对于大部分人来讲,由于百度地图资料众多,过度依赖搜索引擎等等原因。新接触百度地图开发工作其实并不容易。今天说说关于坐标(0,0)的问题。 ...

3316
来自专栏影子

css伪类的说明以及使用(css事件)

转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/7670959.html

1195
来自专栏老司机的简书

老司机读书笔记——Weex学习笔记

Weex整体上与Vue语法大概一直,基本用法由阿里进行二次封装。以下主要介绍Weex的一些内置组件。

1334
来自专栏GreenLeaves

Js框架设计之DomReady

一、在介绍DomReady之前,先了解下相关的知识 1、HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不...

2056
来自专栏每日一篇技术文章

OpenGL ES _ 着色器_ 顶点着色器详解

提醒广大网友,当你看到这篇文章的时候,以后写的关于OpenGL 更多的便是代码实战了!

711
来自专栏web编程技术分享

HTML&CSS Table元素详细解说

3398
来自专栏双十二技术哥

深入Weex系列(五)Component组件源码解析

在上一篇文章《深入Weex系列(四)之Module组件源码解析》中我们结合源码学习了Module的注册、调用、回调等流程,并且分析一个Weex自带Module的...

853
来自专栏向治洪

VectorDrawable与AnimatedVectorDrawable

VectorDrawable  Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图。先来一个例子吧...

1845

扫码关注云+社区