自动生成代码的百分比数据组件的工具，可以非常方便设计师和前端开发小哥。大家再也不用担心程序员说不好实现了。

老规矩，不墨迹先说结论：

我做了个自动生成代码的百分比数据组件的工具，可以非常方便设计师和前端开发小哥。大家再也不用担心程序员说不好实现了。

▲ 工具可以生成这种东西

软件体验地址：

https://www.nbchart.com/lab/circle.php

视频教程地址：

https://www.bilibili.com/video/BV1Rv4y1X7bW

大家好，我是灰色执照~

最近有同学在微信群问我，这种展示数据的转圈圈小组件怎么画？

▲ 原图地址：https://www.nbchart.com/sucai/sucaiInner.php?id=69

我说很简单啊：
用PS画几个圆圈，Ctrl+T 然后选透视，调整成透视角度就可以了。
如果是AE做的话更简单，先做几个旋转的圈。加个摄像机或者三维功能侧躺下去就可以了。

同学们又问我说：我用的是Figma，该怎么办？我说这可能就要用插件了。但是又有同学问我，说他的主力工具是Sketch，有办法做么？
我说 算了，再问下去我要累死，不如我直接给大家弄个现成的。于是我就开发了一个自动生成转圈动效的工具。大家只要制作几个平面的圆圈png图片就可以了。软件除了能让圆圈动起来，还能生成现成的代码。

▲ 简单的说，软件分成4个区域。

1、左侧上传你制作好的圆圈图片。

2、弄好后左下角可以导出给程序员的代码。

3、中间是实时预览效果区域。

4、右侧调整各种透视参数、转动速度等。

为了方便你理解，我特意给你做个示例：

01.在Figma中新建一个500*500大小的画布，在里面弄3个带有角度渐变的圆圈。

▲ 当然，你用Ps / Xd / Sketch也都行

02.分别导出3个png图片。注意：他们大小都是500*500

03.将这3个图片分别导入软件中。

▲ 就这么简单，它就自己转动了起来。

▲ 你可以调整参数，让它有不同的透视，旋转速度……

04.点击导出代码按钮，程序员需要的就是这里的东西了。复制这里的代码，到网页里面去，对应位置就会自动有这个组件了。

怎么会有这么方便的东西，真的是太棒了。原来技术是如此迷人~

大家好，我是灰色执照，我在没有任何参考的情况下无意中创造了这个十分便利的小工具，我暂时给它取名为：“灰大实验室”。未来，我会往实验室里面添加无数个类似的小工具，希望它们能够方便你的工作~

Powered by Froala Editor