![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
SVG.js
学习如果使用SVG.js创建SVG图形与动画
三零
这个作者很懒,什么都没留下…
展开
-
SVG.js动画系列5-显示/隐藏动画
今天来实现图元显示和隐藏的动画。效果图如下:我们要让矩形、三角形、圆形做一个串行显示的动画;看看用SVG.js是怎么实现的吧。 var draw = SVG().addTo('body').size(800, 600) var circle, rect, triangle; function make() { rect = draw.rect(100,100).move(200, 200).attr({fill: SVG.Color.random(), stroke:'#3c352原创 2020-11-11 23:08:02 · 1071 阅读 · 0 评论 -
SVG.js动画系列4-滤镜动画
给滤镜加上动画,是一个什么样的效果呢。效果图如下:本示例是anime.js的滤镜动画的翻版,用SVG.js实现。代码:var draw = SVG().addTo('body').size(800, 600) const points1 = "64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"; const points2 = "64 128 8.574 96 8.574 32 64 0 119.426 32 119.原创 2020-11-10 14:56:36 · 290 阅读 · 0 评论 -
SVG.js动画系列3-沿路径动画
一个小圆球沿路径动画的例子。效果图:第一步创建一个path和circle path = draw.path("M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z").attr({fill:'none', stroke:"lightgrey"}).move(200, 200); circle = draw.circle(18, 18).attr({fill:SVG.Color.random()}).center(220, 250);第原创 2020-11-05 19:01:38 · 1619 阅读 · 1 评论 -
SVG.js动画系列2-延时动画
本实例参考anime.js实现延时动画。动画效果如下:所有的方块都是一个动画,只不过靠近两端的方块加了一个delay的延时效果。代码如下:var draw = SVG().addTo('body').size(800, 600) const fcolor = "#00D672"; const bcolor = "#242d28"; var rects = [], poss = []; const startX= 100, startY = 100, space = 4; cons原创 2020-10-31 23:38:39 · 897 阅读 · 0 评论 -
SVG.js 实现动画系列1
上面的例子是用SVG.js实现小圆球在圆环上位移变化的一个动画;参考bonsai例子动画实现。SVG.js实现动画还是比较方便的。废话不多说,上代码。var draw = SVG().addTo('body').size(800, 600) const centerX = 400, centerY = 300, circles = 140, distance = 180, radiusMin = 10, radiusVar = 10; const ..原创 2020-10-29 23:35:04 · 2554 阅读 · 0 评论 -
SVG.js
SVG.JS简介SVG.js为什么选择SVG.js支持动画其他SVG.jsSVG.js是能创建、控制SVG和SVG动画的一个轻量级JS库;并且是MIT协议的开源库。为什么选择SVG.jsSVG.js不依赖任何其他的库,编译出的库非常小(大概137kb)。同时提供接近完整的SVG规范。SVG.js很快。虽然不如直接使用js快,但比其他的一些svg库要快。易于阅读,语法整洁.// SVG.jsvar draw = SVG().addTo('#drawing') , rect = draw.rec原创 2020-10-27 20:07:27 · 828 阅读 · 0 评论