提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
自动生成代码的百分比数据组件的工具,可以非常方便设计师和前端开发小哥。大家再也不用担心程序员说不好实现了。
老规矩,不墨迹先说结论:
我做了个自动生成代码的百分比数据组件的工具,可以非常方便设计师和前端开发小哥。大家再也不用担心程序员说不好实现了。
▲ 工具可以生成这种东西
软件体验地址:
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
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册