- 博客(7)
- 收藏
- 关注
原创 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
488
原创 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
1078
原创 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
294
原创 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
1633
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
902
原创 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
2560
原创 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
837
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人