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

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

深入浅出 GreenSock 动画:SVG Logo 动画

2017-02-27
阅读 2 分钟
6.2k
在我网站svgtrick开一个新系列,主要是使用GreenSock来编写和实现动画效果,通过实际的效果来熟悉GreenSock的各个方法和技巧。 关于GreenSock的基础知识,可以看看我整理的GreenSock简明教程。 这个效果也是在codepen上看到的,拿来分析下实现思路,顺便熟悉下GreenSock的一些API的使用方法。 先来看看要实现的效果: 这...

使用 SVG 中 vector-effect 属性来解决边框(stroke)缩放问题

2016-12-27
阅读 2 分钟
6.7k
这篇文章来看看在SVG中SVGTiny12中vector-effect这个属性以及使用它来解决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的动画效果,下面就来聊聊我是怎么实现这个动画效果的。

GreenSock (TweenMax) 极简入门指南

2016-11-16
阅读 5 分钟
23.4k
最近把GreenSock的一些知识以及一些开发技巧使用gitbook整理了一本在线的电子书,GreenSock电子书可以去看看,下面是一个基本入门的简化版本,更详细的可以去看在线的版本,里面有详细的介绍以及一些高级应用技巧,GreenSock电子书

SVG 应用:Gradient (线性渐变) 在文字中的应用

2016-11-09
阅读 2 分钟
7k
在SVG中,文字的颜色使用fill属性来定义,它不仅可以填充一般的颜色,也可以使用渐变颜色来填充文字等等。相比CSS,使用SVG可以更加灵活的实现CSS无法实现的文字效果。这篇文章就来讲讲SVG中的渐变主要是指线性渐变在文字中的应用。

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

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

SVG 基本知识:SVG 放大缩小之 viewbox 初探 (1)

2016-10-12
阅读 3 分钟
30.6k
接触过SVG都知道,SVG有自己的一套坐标视窗系统,理解它对于在SVG的使用,特别是要对SVG进行放大缩小,viewbox是必须要了解的一个知识点,而viewbox则是SVG中一个相对复杂的概念,打算分两篇来聊聊它,这篇文章就来聊聊SVG中的viewbox的一个基本知识和基本的应用。

使用 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,以此循环往复。