菜单

SVG 新驾车员驾乘指南

2019年4月21日 - 皇家前端

SVG 新司机驾乘指南

2017/04/10 · HTML5 ·
SVG

原版的书文出处: Tw93   

SVG 线条动画入门

2016/12/29 · HTML5 ·
SVG,
动画

正文小编: 伯乐在线 –
chokcoco
。未经小编许可,禁止转发!
招待出席伯乐在线 专辑小编。

常见大家说的 Web 动画,包涵了3大类。

个人感到 三种动画春兰秋菊,实际利用中依照掌握情况作出抉择,本文讨论的是小编以为 SVG
中在骨子里项目中非常有应用价值 SVG 线条动画。

行使 Snap.svg 制作动画

2017/02/22 · HTML5 ·
SVG

原版的书文出处: 坑坑洼洼实验室   

图片 1

好玩的CSS像素艺术,风趣CSS像素艺术

最初的文章地址:

友谊提示:由于国内网络的缘故,CodePen大概会打不开大概更慢,请耐心等待!

 

像素艺术看作壹种遗失的艺术样式,与超清晰,高分辨率图片相比较黯淡无光。我在CodePen上浏览时偶然开掘了部分像素艺术,它提示自身那种办法是何其令人敬畏!

See the Pen Pikachu pixel css by Devi Krisdiansyah (@agilBAKA) on
CodePen.

 

是或不是很酷?像素化图形中有某种轻巧温馨的事物,而这个事物是高清晰图形和插图中缺失的。

那也是教大家如何用HTML和CSS创建像素艺术的一个很好的案例。让我们解析下这么些定义,并创办贰个方可在其余情况下使用的格局。

 

TL,TR

SVG其互为表里天性远比想象中要强,本文首先介绍下SVG的有关定义、特点和德姆o,接下去会介绍它的连锁语法和动画片,最后告诉我们怎么利用和优化SVG。

保险大家一钟头内能够开车上路….. 来不比解释了,快上车…..

图片 2

举个栗子

SVG 线条动画,在局地一定的场子下可以消除选取 CSS
不能够到位的卡通片。特别是在进度条方面,看看近年来项目里的叁个小必要,3个那种形态的进程条:

图片 3

把其中的过程条单独拿出来,也正是内需贯彻如此二个意义:

图片 4

脑洞大开一下,使用 CSS三 如何兑现如此贰个进程条呢。

CSS3 是足以成功的,就是很麻烦。可是假若接纳 SVG 的话,一下子就解决了。

See the Pen 非正常进度条 by
Chokcoco (@Chokcoco) on
CodePen.

我们只要你在读书本文的时候有了自然的 SVG
基础,下面代码看看就懂了,好了,本文到此停止。

图片 5

好吧,依然一步一步解释,上边进程条的第3 SVG 代码如下:

<svg version=”1.1″ xmlns=””
xmlns:xlink=”” xml:space=”preserve”
class=”circle-load-rect-svg” width=”300″ height=”200″ viewbox=”0 0 600
400″> <polyline points=”5 5, 575 5, 575 200, 5 200″
class=”g-rect-path”/> <polyline points=”5 5, 575 5, 575 200, 5
200″ class=”g-rect-fill”/> </svg>

1
2
3
4
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
  <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
  <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>

一、Snap.svg是什么

从重大职能上说,Snap.svg.js 是1个垄断 SVG 节点/制作 SVG
动画的框架,不难题清楚能够看上面文字:

Snap.svg 是3个得以使您操纵 SVG 能源和 jQuery 操作 DOM 同样轻便的类库

——译自官方网站

拿 Snap.svg (下文简称 Snap ) 和 jQuery (下文简称 JQ )
来做相比较最合适但是,很可能作者也是参照了 JQ 的 API
设计,那么它们的相似程度有多高呢?请看下边的相比表:

/ context(上下文) 选择器 事件绑定 节点操作 属性操作 链式写法
Snap svg Snap.select(‘circle’) el.click(…)/el.touchend(…) after()/remove()/append() attr() svg.paper.circle(50,50,40).attr({fill:”#f00”});
JQ document jQuery(‘div’) el.click(…) after()/remove()/append() attr() elem.addClass(‘hide’).remove();

在 JQ 中,可操作的最外层 DOM 边界是 document 。而在 Snap
的定义里,可操作的最外层的节点是 svg ,svg
节点的取舍、事件绑定都亟待在那一个上下文里完结。

在地方的相比较图能够看出好多 JQ
的阴影,无论是选取器、事件绑定、节点操作等等,都以丰富的切近 JQ ,有 JQ
基础的同校基本能够半天左右 Snap 的1体 API。

成立网格

首先件事,我们须求一张绘制我们像素化小说的画布。我们有三种方法来创建网格。一种艺术是运用专门的学业的HTML
<table>要素,它的每1行都饱含固定宽度的单元格。比方大家画四个捌行八列的总总林林的圆锥形。要是我们设置每3个单元格拾px宽,那么大家会收获3个80X80的表格。

See the Pen CSS Pixels – Table Grid Example by Geoff Graham
(@geoffgraham) on CodePen.

 

倘诺想博得越来越大的画布就给单元格八个更加大的尺码。假诺想从八-bit分辨率改成1陆-bit的分辨率,只须求将表格的每一行的单元格数量翻倍。

别的1种建立网格的办法是用三个div代替表格。个中一个看成画布的器皿;另2个象征画布上的要素,可以依靠大家的内需再行数十次。

<div class="canvas">
  <div class="pixel"></div>
  <!-- Repeat as many times as needed -->
</div><!-- end .canvas -->

本人喜欢那壹方法的原故是它对于大家定义的画布尺寸越发实事求是。而且本人认为那种措施更是简约,无需编写来自 table 元素的额外的HTML标签。

借使我们想要更加多的像平昔创造更清晰的图画,那么大家得以在HTML标签中校像素数翻两倍,并且将各样像素的尺码减半。那就好似你在Photoshop中创建了一张你筹算在网页中运用的图像,为了拿走更加高分辨率,你把它的尺码增添了一倍。

.canvas {
  /* Perfectly square */
  width: 80px;
  height: 80px;
}

.pixel {
  /* We'll need 256 total pixels in our HTML */
  width: 5px;
  height: 5px;
  float: left;
}

一、简介

SVG 为何

可缩放矢量图形,即SVG,是W3C
XML的分枝语言之1,用于标志可缩放的矢量图形。(摘自MDN)

下边代码中,先谈谈 svg 标签:

有了 svg 标签,大家就足以热情洋溢的在里边增添 SVG 图形了,上面,我在 svg 中定义了四个 polyline 标签。

二、Snap 的代码结构

图片 6

笔者依照 Snap 的 API
制作了地点的图样,并且轻便标注了疏解方便大家领悟,能够入眼关心一下
Element 和 Paper 这三个类。

 

定义

SVG(Scalable Vector
Graphics)是可缩放矢量图形的缩写,基于可扩展标志语言XML来讲述二维矢量图片的壹种图形格式,由W3C制定,是2个盛开规范。

SVG 基本造型

polyline:是SVG的三个骨干造型,用来创建一雨后春笋直线连接八个点。

其实,polyline 是一个相比不常用的形制,相比常用的是pathrectcircle 等。那里笔者利用polyline 的原委是需求使用 stroke-linejoin 和 stroke-linecap 属性,在线段连接处创立油滑过渡角。

SVG
中定义了一些主导造型,在承接下文以前,提议点进去先了然一些基本图形的价签及写法:

图片 7

1. Element

本条片段是节点操作相关的方法集,也是该类库最基础的有个别。

JavaScript

// 采用节点 var svg = Snap(‘#svg’); svg.select(‘circle’); // 选择
svg.select(‘.rect_01’); // 选择

1
2
3
4
// 选择节点
var svg = Snap(‘#svg’);
svg.select(‘circle’); // 选择
svg.select(‘.rect_01’); // 选择

JavaScript

// 事件绑定 var svg = Snap(‘#svg’);
svg.select(‘circle’).click(function() { // do something });

1
2
3
4
5
// 事件绑定
var svg = Snap(‘#svg’);
svg.select(‘circle’).click(function() {
// do something
});

更多格局请参考文后 API 资料。

发端画画

笔者们给像素增加颜色在某种意义上说如同橡胶遭逢路面。大家得以选取 nth-child 属性采纳网格中的成分。

/* The third cell in our grid */
.pixel:nth-child(3) {
  background: orange;
}

正如您想像的那么,那个列表会非常长,它取决于网格中的单元格的数据和统一筹算的底细。小说开首的例子中使用了一九一六个像素并且超越300个子类选取器。天哪!

 

特点

近年来大家得以采用PNG、JPG来体现静态的图形,使用CSS3、JS可能挫一点的GIF来代表动画,厉害一点大家得以应用Canvas来绘图,那么为啥还要选用SVG呢?

SVG 线条动画

好,终于到本文的机要了。

图片 8

地方,大家给五个 polyline 都设置了 class,SVG
图形的1个利润就是有个别个性样式能够行使 CSS
的主意书写,更关键的是能够相称 CSS 动画一同使用。

上面,主要的 CSS 代码:

.g-rect-path{ fill: none; stroke-width:10; stroke:#d3dce6;
stroke-linejoin:round; stroke-linecap:round; } .g-rect-fill{ fill: none;
stroke-width:10; stroke:#ff7700; stroke-linejoin:round;
stroke-linecap:round; stroke-dasharray: 0, 1370; stroke-dashoffset: 0;
animation: lineMove 2s ease-out infinite; } @keyframes lineMove { 0%{
stroke-dasharray: 0, 1350; } 100%{ stroke-dasharray: 1350, 1350; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.g-rect-path{
    fill: none;
    stroke-width:10;
    stroke:#d3dce6;
    stroke-linejoin:round;
    stroke-linecap:round;
}
 
.g-rect-fill{
    fill: none;
    stroke-width:10;
    stroke:#ff7700;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;
    animation: lineMove 2s ease-out infinite;
}
 
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

那尼玛是如何CSS?怎么除了 animation 全都不认得? 图片 9

莫慌,其实过多和 CSS 相比一下分外好通晓,只是换了个名字:

根本讲讲能够落到实处线条动画的首要性属性 stroke-dasharray 。

属性 stroke-dasharray 可支配用来描边的点划线的图画范式。

它是三个和数列,数与数以内用逗号大概空白隔断,钦点短划线和缺口的尺寸。假如提供了奇数个值,则那么些值的数列重复1回,从而成为偶数个值。由此,5,3,2等同于5,3,2,5,3,2

解说很苍白,直接看例子:

See the Pen stroke-dasharray
by Chokcoco (@Chokcoco) on
CodePen.

上边,填充进程条,使用了上面那么些动画 :

@keyframes lineMove { 0%{ stroke-dasharray: 0, 1350; } 100%{
stroke-dasharray: 1350, 1350; } }

1
2
3
4
5
6
7
8
@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

stroke-dasharray: 0, 1350;,表示线框短划线和缺口的尺寸分别为 0 和
1350,所以壹伊始全方位图形都是被缺口占领,所以在视觉效果上长度为 0。

下一场对接到 stroke-dasharray: 1350, 1350,表示线框短划线和缺口的尺寸分别为
1350 和 1350,因为任何图形的长短正是1350,所以整个进程条会被稳步填充满。

精晓了那么些技巧后,就足以行使 stroke-dasharray 和 stroke-dashoffset 制作繁多准确的相互场景:

2. Paper

那有的是丹青相关的方法集,这是大约每一种动画框架都有些有个别,类似于createjs的Graphics。

SVG
有6种主导图形:矩形、圆形
、椭圆、线条、折线、多边形。还有此外一种:路线(path),path
是最复杂的壹种绘图情势,它能够绘制复杂的图纸——当然六种基本图形也不值得一提。而至于中央图像与
path 之间的转变,能够参见本站的其它一篇文章:闲谈 SVG
基本造型转变那1个事。

图片 10

Paper
方法集首要可以绘制各类基本图形(节点),以及文本(节点)、图片(节点)、渐变等。

JavaScript

// 画三个圆 var svg = Snap(‘#svg’); svg.paper.circle({ cx: 100, cy:
100, r: 50, fill: ‘#f00’ });   // 创立一张图片
svg.paper.image(‘url.jpg’, 0, 400, 300, 300);

1
2
3
4
5
6
7
8
9
10
11
// 画一个圆
var svg = Snap(‘#svg’);
svg.paper.circle({
cx: 100,
cy: 100,
r: 50,
fill: ‘#f00’
});
 
// 创建一张图片
svg.paper.image(‘url.jpg’, 0, 400, 300, 300);

1个轻巧的事例

自个儿主宰做一张像素化的自画像。那几个事例很简短,因为它的像素很少并且总共只有各种颜色。

See the Pen CSS Pixels – Self Portrait by Geoff Graham (@geoffgraham) on
CodePen.

 

Demo

动用SVG能够做出什么相比风趣的东西啊?

图片 11

前一周团队(臭不要脸插个非常硬的广告,Ali飞猪前端共青团和少先队在招人啦,详细:飞猪寻找前端同学)有1个小的hackthon,正是经过代码来画这一个Loading
GIF,然后就边学边用SVG写了三个壹致的loadng,体量从前边GIF的3三KB产生了864B的SVG,详细见上面:

See the Pen Fliggy Loading by Tw93
(@tw93) on CodePen.

其余一些风趣的SVG能够查阅30 Awesome SVG Animation For Your
Inspiration这里。

SVG 线条动画完成按键交互

图片 12

See the Pen
svg线条动画完毕开关交互 by
Chokcoco (@Chokcoco) on
CodePen.

叁. Snap 工具方法

Snap下有许多实用工具,比如Snap.ajax、Snap.format模板、颜色格式转变和插件方法等。

JavaScript

// 增加Snap,为其增加插件方法 Snap.plugin(function (Snap, Element,
Paper, global, Fragment) { Snap.newmethod = function () {};
Element.prototype.newmethod = function () {}; Paper.prototype.newmethod
= function () {}; });

1
2
3
4
5
6
// 扩展Snap,为其添加插件方法
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
Snap.newmethod = function () {};
Element.prototype.newmethod = function () {};
Paper.prototype.newmethod = function () {};
});

 

贰、坐标定位

学习SVG语法以前,我们能够来打听下SVG的坐标定位,那种坐标系列和大家小时候读书的绘图坐标是相反的,不过在HTML中都以用如下方式固定。即以页面包车型客车左上角为(0,0)坐标点,坐标以像素为单位,x轴正方向是向右,y轴正方向是向下

图片 13

SVG 线条动画实现圆形进度条

See the Pen
svg线条动画落成圆形进程条 by
Chokcoco (@Chokcoco) on
CodePen.

三、用 Snap 制作动画

作为Icon的CSS像素艺术

既然如此大家早就有了资料,大家能够 使用 transform
属性减弱图片把它当作icon使用。

See the Pen CSS Pixels – Self Portrait – Icon by Geoff Graham
(@geoffgraham) on CodePen.

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图