三零-CSDN博客

原创 webpack+electron+react，在react中访问node.js模块

react中使用node.js的模块，需要一些配置：在electron快速启动指南中提到所以，在创建BrowserWindow时，设置webPreferences参数，设置好后，编译时会报错，找不到对应的module。还需要在webpack.prod.js（生产环境）中配置一个选项。使用那个模块就在externals选项中配置对应模块。在dev环境中，不使用node模块，需要在webpack.dev.js中配置...

2021-04-08 11:04:10 482

原创 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 1066

原创 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 286

原创 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 1611 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 891

原创 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 2545

原创 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 824

三零