【中二少年工具箱】——svga预览工具

580 阅读2分钟

同学们可以私信我加入学习群!

点击链接,获取资源:

lizetoolbox.top:8080/qrCode_cont…

或者

lizetoolbox.top/qrCode_cont…


前言

前面有篇文章讲过基于echarts的大屏可视化一些基础概念,其中提到和动画相关的插件有:lottie、gsap、svga等,本篇文章的主题是svga,但不是技术硬文,只是向大家介绍我最近写的一款工具——svga预览工具。

基本效果如下: 在这里插入图片描述


一、背景

开发这个工具的初衷很简单,就是UI每次会给我几个设计好的svga文件,但是设计人员的命名规范和我个人不相符,所以总是记不清每个svga对应的效果。

UI风格会迭代升级,对应的svga动效也会跟着变动,不同项目的不同版本,几年下来,其实会有很多svga文件,这些都是我们的前端资产啊,我把它们放到一个文件夹,时间久了,难免会忘了之前的svga是什么效果。

因为我想后续还要对这些文件做管理,就是以后可能会做一个列表页,里面按照文件夹、标签等元素来管理本地文件,并可以便捷预览文件(包括svga),要做这套管理工具,简单的浏览器预览svga已经满足不了需求,索性就开个头,先做个svga预览功能模块。

二、软件使用

软件的使用很简单:

1.通行证

为了避免有人伪造软件,从而达到侵入各位电脑的目的,我在登录页做了个随机的通行证验证,通行证每小时更新一次,和我个人的微信小程序互通,所以登录需要先前往微信小程序【中二少年工具箱】复制通行码。

可以先下载工具,网盘地址:pan.baidu.com/s/1yrl0jYpt… 然后在工具的登录页点击“获取通行码”,扫码直达小程序,如图: 在这里插入图片描述 在这里插入图片描述

2.登录

在微信小程序的首页,复制通行码: 在这里插入图片描述

输入通行证,登录进入工具首页: 在这里插入图片描述

3.进入svga预览

点击svga预览模块,进入页面,显示默认的svga动画: 在这里插入图片描述 选择本地的svga文件,就可以在工具内预览自己的svga动画了。


总结

正版软件会一直免费,所以请大家放心使用博主开发的正版软件。如果软件被破解,绕过通行码直接登录,后续对宿主机造成一切后果,请使用者自行承担。

大家多多支持博主的公众号,新开小号,需要多多关注,拜谢大家