anime.js 实战:实现一个 SVG 形变(morphing)动画

2017-08-17
阅读 4 分钟
9.5k
简而言之,就是不同形状之间能平滑的转换。这个用SVG来做羹适合不过了,因为SVG本身的形状就是有各种不同坐标之间的线段绘制而成的。从形状到另外一个形状的转化就是移动坐标点而已。

帅气的SVG路径描边动画 (path animation) 实战应用

2016-12-15
阅读 4 分钟
17.7k
这是我的一个关于SVG的应用的技术分享网站svgtrick.com,会同步一些文章到这里来,更多关于SVG技术应用可以去网站看看。 要是觉得文章还不错的话,可以多多推荐哦。 今天这篇文章来聊聊SVG路径描边动画。 关于路径描边动画大家可以去看看这两个网站,Playstation 4和Xbox One,这两个网站中就使用了SVG中的路径(path)...

使用 GreenSock 来制作 SVG 动画

2016-12-12
阅读 5 分钟
12.7k
最近从Dribbble shot 看到@thorstenbeeck发布的一个设计效果图得到灵感。根据这个设计,使用GreenSock这个动画平台实现了一个SVG的动画效果,下面就来聊聊我是怎么实现这个动画效果的。

SVG 边框 (stroke) 基本知识以及 SVG 边框动画

2016-10-28
阅读 3 分钟
18.1k
最近做了一个关于SVG的应用的技术分享网站svgtrick.com,会同步一些文章到这里来,更多的关于SVG方面的技术知识可以去网站看看。 在SVG中边框这一属性虽然看似简单,但实则是大有天地,今天就来深扒下SVG中的边框的一些基础知识。 基本知识 在SVG中,边框最常见的应用就是用来指定路径或者是其它形状的边框的颜色以及宽...

使用 Snap.svg 来实现一个具有 morphing 动画效果的按钮动效

2016-09-22
阅读 4 分钟
6.9k
今天这篇文章来讲一个morphing动画在UI界面上一个具体的运用即具有morphing动画效果的播放按钮。开始之前可以去YouTube网站上看看,它的播放和暂停按钮不是简单的切换,而是有一个过渡的动画效果,即morphing动画效果。如下图所示:

Snap.svg 基本知识入门

2016-09-21
阅读 4 分钟
25.4k
工欲善其事,必先利其器。要用svg制作复杂或者是高级的动画效果,javascript就必不可少来。今天我们就来学习下svg中的jQuery库Snap.svg这一js库,它的功能跟jQuery在dom的作用差不多,只不过它是专门用来操作svg的。有了它,我们就可以轻松的使用javascript和svg打交道了。

使用 SVG 来制作 Morphing 动画效果

2016-09-19
阅读 3 分钟
8.3k
开始之前,先来了解下什么是Morphing动画。所谓Morphing动画是表示,同一个模型,从一个形状变到另一个形状。如下图所示,从形状1渐变到形状2,再从形状2渐变到形状3,最后从形状3渐变到形状1,以此循环往复。