SVG

用SVG和Vanilla JS框架创建一个“星形变心形”的动画效果

我写的这篇文章中, 讲述了如何用Vanilla JavaScript使动画顺滑的从一种状态过渡到另一种。最好先看下那篇文章,因为在这篇文章中我们要用到一些那篇文章中讲过的内容。例如例子的演示、各种时间函数的公式、当从结束状态过渡到初始状态时不使时间函数倒转过来。都在那篇文章中做了详细讲解。

使用SVG制作进度条

进度条是我们在Web中经常看到的一种效果,常见的进度条有水平横条和径向圆形的进度条。今天我们来看看怎么使用SVG来实现进度条的效果。使用SVG可以很容易的实现,也易于理解,最主要是使用SVG实现的进度条具有良好的跨浏览器,并且能根据浏览器屏幕尺寸很好的显示。

SVG之旅:线条之美,玩转SVG线条动画

在上一节的《SVG线条动画实现原理》一文中,了解了SVG中线动画是怎么做的。在这篇文章中,了解了怎么借助Sketch这样的制作软件绘制SVG的路径,然后借助于SVG的stroke-dasharraystroke-dashoffset值设置为路径的长度(最好是大于其长度,可以通过.getTotalLength()获取到路径的长度),在@keframes中的100%处设置stroke-dashoffset的值为0就可以实现线条自画的一个动画效果。原理很简单,但在上一篇文章中,看到的仅是一条路径(也就是一条线的自画效果),如果我们想对一图形进行依次自动动效呢?其实也是可以实现的。今天我们在这篇文章中就来学习一下,怎么实现。

利用 SVG 和 CSS3 实现有趣的边框动画

今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时,会有一个微妙的动画发生 —— 网格元素变得透明,每条边有个顺时针的动画,创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS的transition来完成。注意,这个技术还是实验性的。

SVG之旅:SVG线条动画实现原理

对于SVG路径动画,我相信大家都看到过这样的动效:一条线就像它自己画自己。非常的酷。@Jake Archibald是这项技巧的先驱,他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的。@Brian Suda也在24 Ways网站上讨论过这种技术。Polygon使用它在一篇设计方面的文章里创建出了非常神奇的效果。Codrops也有很多非常酷的案例。在这篇文章中,我并没有什么要补充的,只是想把这种技术阐述的更简易些。所以,在这里我用我的方式把这种技术再次向大家阐述一遍。

SVG 路径动画简易指南

任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追求的人这种体验差异尤其显著!SVG(可缩放的矢量图形)完美地解决了上文中提到的部分问题。尽管 SVG 有它的局限性,但是在某些场景下是非常有用的,如果你有一个好的设计团队,你也可以基于SVG创建一些震撼的视觉体验,而不必担心给浏览器带来过重的渲染负担或阻碍页面的加载时间。

SVG之旅:描边特性

上一节介绍SVG填充特性中,提到了SVG中另一个特性描边特性(stroke。SVG的描边特性主要包括strokestroke-widthstroke-opacitystroke-dasharraystroke-linecapstroke-linejoinstroke-miterlimit等属性。在这一节中,主要围绕这几个SVG属性进行展开。在SVG中咱们通过stroke来对绘制的图形边框进行设置,我们可以对图形边框的颜色、粗细、透明度,连接端,线帽和虚线等进行设置。为了更好的理解SVG中的描边特性,我们采用一个葡萄的轮廓图来展开介绍。

SVG之旅:填充特性

通过前面的学习,你可以用你掌握的知识来绘制任何图形,接下来的目标是给绘制的图形着色。可以使用几种方法来着色,包括指定对象的属性,使用内联CSS样式或者内嵌的CSS样式,或者使用外部的CSS样式文件。大多数的Web网站的SVG使用的是内联样式CSS。但这些方法都有各自的优缺点。在SVG中要给已绘制好的图形着色,我们主要通过SVG的填充和描边特性来完成。比如在前面的示例中,我们常能看到的fill属性,就是用来给图形设置填充颜色;stroke属性设置绘制对象的线条的颜色。但SVG的填充和描边特性不仅仅就这两个属性,那么今天的目标就是来学习这方面的特性。

SVG 快速入门

SVG 全称是 Scalable Vector Graphics,即,矢量图。在 Web 中使用 SVG 可以解决位图放大失真的问题。首先,不要把 SVG 和 CSS,Canvas,HTML 搞混。他们之间并没有你中有我,我中有你的关系。SVG 是通过 XML 的形式写在 HTML 文档中的。

Metaballs

Metaballs是有机的黏糊糊的黏糊糊的东西。从数学的角度来看,它们是一个等值面。可以用一个数学公式来表示:f(x,y,z) = r / ((x - x0)2 + (y - y0)2 + (z - z0)2)。@Jamie Wong写了一篇非常优秀的教程,介绍了怎么使用Canvas来渲染Metaballs。

页面

返回顶部