![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
animation
三零
这个作者很懒,什么都没留下…
展开
-
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 评论