guiplan低代码开发工具

guiplan是一款可视化低代码开发工具，支持自适应定制,支持传统主流框架如bootstrap,uniapp,element-ui,uView

qq学习群：

搜索微信号guiplan添加好友，即可拉入学习群哟

{"total":2,"list":[{"_id":"Hh1gRCsKq","userId":"V0wZDCcBC","createTime":"2022-11-21T22:43:17.308Z","updateTime":"2022-11-22T00:09:43.101Z","updateBy":"","title":"css3动画可视化配置并生成代码","orderIndex":0,"content":"        做过前端开发的朋友相信大家都知道，配置一个css3动画有多复杂，多么的繁琐。网页需要华丽一点的效果往往是少不了动画，而第三方动画库也只能满足基本的动画需求，并不能定制。如用js做动画又要写很多的脚本代码，再加上js动画本身性能就不是很好。而手写css3动画也是一件非常繁琐的事情，特别是动画非常复杂的情况下动画的轨迹都需要一个个配置，从而导致一个简单的动画平常都是半小时左右。 <h2>手写css3动画工作量有那些？</h2><div>        简单动画配置代码如下，from表示开始位置，to表示结束位置。 </div><pre><code class=\"Bash\"><xmp>@keyframes myfirst\n{\n from {background: red;}\n to {background: yellow;}\n}</xmp></code></pre>    复杂一点则可按百分比来配置动画如下，以下还只是一个简单的背景变化，如果要做其他的效果，则每个自定义的百分比都需要手写样式，而且还需要不断调试。<pre><code class=\"Bash\"><xmp>@keyframes myfirst\n{\n 0% {background: red;}\n 25% {background: yellow;}\n 50% {background: blue;}\n 100% {background: green;}\n}\n </xmp></code></pre>        可以看出动画的结构与传统写class类是不一样的，其次是keyframes，from,to不是很常用单词，如果不熟悉还得去查阅文档，最后是样式动画执行过程中的每一片段都需手写样式，手写样式就得记住各种样式名称，比如旋转transform:rotate(1deg)，平行位移translate(7px,-13px)。就算你记住了还得手写代码一个个去输入。就算输入正确，实际效果还得不断的改代码才能慢慢调整好。        而这还只是定义动画，使用动画更为复杂。可以看看以下文档，我想应该是没有人会去记这些单词的。这些参数我们也只能一个个去查文档进行对照。随便一个功能都要找很长时间，比如我想让动画循环播放，让动画均匀播放等。 <img src=\"https://www.guiplan.com/upload/website/article/bKrgb1MHOkJlZ7I3JvpBUDE12KtopSdw.png\" style=\"max-width:100%;\" contenteditable=\"false\"/>        所以说为什么配置一个动画需要半小时左右。 <h2>可视化配置css3动画又能省去多少时间？</h2>         那我们用guiplan可视化配置css3需要多久呢？以上定义动画我们不需要记这些动画属性单词，也不需要复制粘贴代码。动画的执行过程中每个片段效果，更不需要手写css代码。随便拖拽，点击选择就能搞定动画的配置。 <img src=\"https://www.guiplan.com/upload/website/article/kDpo8eSCvJnsSm6C3uAdnvEI5agdw9Do.png\" style=\"max-width:100%;\" contenteditable=\"false\"/>       创建动画之后我们再来看看使用动画多么简单，之前就了解过了使用动画我们要查阅文档或记住这些动画属性，不仅浪费时间而且文档深入理解也不是一键容易的事。而在guiplan中可视化配置这块已经给你翻译成了中文说明，使用过程也很简单点击加减按钮，或输入尺寸，或拖拽加减按钮都可以快速设置动画参数。一个代码都不需要写，也不需要研究参数，也不需要记单词。手写代码需要耗费十几分钟到二十分钟研究并测试，而guiplan中只需几秒搞定配置。再补充一点，动画配置好之后，动画名称里的内容也会自动填写。<img src=\"https://www.guiplan.com/upload/website/article/QC2xN2SImXJD2dPvoeIGpREchqrNJH9k.png\" style=\"max-width:100%;\" contenteditable=\"false\"/>         所有的加减按钮是可以进行拖拽的，而且拖拽的过程也有痕迹，动画的执行的轨迹拖拽就能看得一清二楚。所以并不需要手写代码一个个微调整。其实微调整是最耗费时间。用代码一点点改，效率也是非常的低。 <h2>如何可视化配置css3动画呢？</h2><div> 1.选中要添加的动画元素，比如要给游戏中标题添加动画 </div><img src=\"https://www.guiplan.com/upload/website/article/wruBA6qU1pWkgHjWvosGaIpFxiCDLbKO.png\" style=\"max-width:100%;\" contenteditable=\"false\"/>2.在样式配置中选择动画定制<img src=\"https://www.guiplan.com/upload/website/article/SHVMb8ugvZtxaXIm9sJFJX8u8QFosbIX.png\" style=\"max-width:100%;\" contenteditable=\"false\"/>3.点击添加关键帧，有两种模式可供选择。如果是简单的动画只需选择开始位置与结束位置。如果是复杂一点的动画可以按百分比进行选择。其次文本框里的内容是可以手动输入的，比如输入15.5%表示时间过了15.5%之后做什么动作。<img src=\"https://www.guiplan.com/upload/website/article/vo6CbXDzZmo77FmLoSPhBXfQT4nmS1VC.png\" style=\"max-width:100%;\" contenteditable=\"false\"/>4.重复以上操作即可创建多个关键帧。这里以from与to为例。下拉框中我们就可以选择关键帧进行可视化配置了。其次动画名称系统会自动生成，也就是keyframes的名称。如果对命名有要求可直接修改掉名称。<img src=\"https://www.guiplan.com/upload/website/article/NVctbuilRcfGsPV5jdkC4nhvjQvLCvvb.png\" style=\"max-width:100%;\" contenteditable=\"false\"/>5.可视化配置动画样式，比如配置标题进行旋转，选择关键帧to然后通过可视化配置旋转角度即可。<img src=\"https://www.guiplan.com/upload/website/article/OfE4O2sLWxdEpIFnFkgE3djD2RTCahX8.png\" style=\"max-width:100%;\" contenteditable=\"false\"/>6.调用动画：配置完动画之后我们再选择调用默认样式，底部我们就可以看到该样式自动调用了动画名，并且默认动画一周期执行时间为1秒。<img src=\"https://www.guiplan.com/upload/website/article/EAMF1j1QjlrhGahpl9BJsmC8PMwb5X15.png\" style=\"max-width:100%;\" contenteditable=\"false\"/><img src=\"https://www.guiplan.com/upload/website/article/D6mNeFgVrNfcPEViqsOlZ4rArsduthsG.png\" style=\"max-width:100%;\" contenteditable=\"false\"/>7.动画播放配置：动画多久开始播放，播放时长，播放次数，播放过程都可以进行可视化配置即可。8.动画的复用：动画配置好之后，该默认样式的样式名称即可作为公共样式了，其他模块如想添加该动画只需将样式名称复制到公共样式类名中即可。<img src=\"https://www.guiplan.com/upload/website/article/lKplxeGR4TTldIDQWDjrVSw3S2O949ns.png\" style=\"max-width:100%;\" contenteditable=\"false\"/> ","img":"https://www.guiplan.com/upload/website/article/UVi7MnX2wGMwripm8imEVIMJiSPCswVR.jpg","imgList":[],"typeId":"sVfhOn1K1","repertoryNum":0,"liks":0,"hits":4826,"intro":"","isTop":false,"auth":"","isAdvantage":false,"typeIds":[],"__v":0},{"_id":"JhpwTscz4","userId":"V0wZDCcBC","createTime":"2022-11-21T02:19:09.520Z","updateTime":"2022-11-21T22:44:50.637Z","updateBy":"","title":"vue可视化开发工具到底有多强？","orderIndex":0,"content":"        用过vue的朋友都知道vue相对其他框架来说，要简单很多。而且使用过程也非常简单，我们只需处理数据即可，动态的网页渲染布局都会自动同步更新，从而大大减少了开发难度。所以guiplan交互也是采用vue框架。当然大部分的低代码开发工具还只是停留在布局这块。而guiplan已经支持vue可视化了。<h2 id=\"56zv5\">1.可视化布局排版web页面</h2>       在guiplan布局如html + css这块几乎是不需要手写代码了。guiplan对此耗费了很多的时间与精力去研发。针对布局的每一块细节、每一个功能都做到了不写代码即可定制。传统的低代码平台还停留在简单的布局排版中，有的甚至还只支持绝对定位排版，伪类也最多只支持悬浮停靠。而guiplan几乎只css所有常用的效果定制，如css当中的伪类、css当中的屏幕自适应、css3当中的动画，guiplan都实现了不写代码即可随意定制。        <img src=\"https://www.guiplan.com/upload/website/article/SSLqKmDWb4JHdEZxsNSQVedcGvHZA8bv.png\" contenteditable=\"false\" style=\"color: var(--el-text-color-regular); max-width: 100%;\"/><h2 id=\"uo8j8\">2.vue可视化开发</h2>        前端开发中不止有布局，少不了vue的交互。而vue交互根据业务的不同，复杂程度也不同。所以大部分低代码工具都很难做到vue的可视化开发。而手写交互代码要写各种的指令，如v-bind,v-model,v-for除此之外，你还得记住这些指令，否则得去查文档，效率也特别的低。而guiplan中只需一键绑定。 <img src=\"https://www.guiplan.com/upload/website/article/WluW8wsSLA3MvRK4baiAPHWe6RbvQKVe.png\" style=\"max-width:100%;\" contenteditable=\"false\" width=\"100%\"/>        其次在我们手写代码中最麻烦的是这些变量与函数，要来回去找代码。比如v-bind绑定了变量，你的拖动滚轮去找变量在哪，函数在哪里。而guiplan中选中节点就可以直接看到变量，函数，样式，属性等。如下图音乐播放器，选中之后即可直接看到播放方法与暂停方法，即可直接去修改。 <img src=\"https://www.guiplan.com/upload/website/article/cFGFAeKffrmvHtBGkVLfLgjLsvFZmrDH.png\" contenteditable=\"false\" style=\"color: var(--el-text-color-regular); max-width: 100%;\" width=\"100%\"/>        在我们手写函数代码时，自己创建的变量与函数如果要调用，函数与变量少还好记得住，一旦多起来也是要来回去找，特别是框架自带的api函数，还得去查阅文档。而在guiplan中都是一键插入变量，函数，以及api函数。如果你找不到还可以通过关键字搜索。 <img src=\"https://www.guiplan.com/upload/website/article/aR6D68nziRM5sDIVVUP336MM6rQPnH2t.png\" style=\"max-width:100%;\" contenteditable=\"false\" width=\"100%\"/>        框架自带函数如uniapp的get请求与post请求，以及对话框，提示框，页面跳转都只需一键插入即可。 <img src=\"https://www.guiplan.com/upload/website/article/2cjlV4AqLVDlJZTcUmODqKQXiaIsLFel.png\" style=\"max-width:100%;\" contenteditable=\"false\" width=\"100%\"/> <h2 id=\"32uis\">3.多框架组件库组件一键插入</h2>        光支持vue的各种指令肯定是远远不够的，因为页面布局含有布局与交互，还有很多的组件，比如按钮，文本框，下拉框，弹框提示等等，所以想要快速开发也是少不了一个好看的框架。所以guipla已经支持传统主流框架，bootstrap,element-plus,uniapp,uView等。平常手写代码使用框架不仅安装繁琐，使用起来也需要反复查看文档，反复去复制代码。复杂一点的可能需要复制四次代码才能将组件的案例弄过来。组件布局代码，组件样式代码，组件的变量代码，组件的函数代码等等。而guiplan中只需一键插入。插入进来选中组件即可可视化随意修改。<img src=\"https://www.guiplan.com/upload/website/article/vjqKIbvOhA6Ae8N7lIFlfxnsDvKDtMG7.png\" style=\"max-width:100%;\" contenteditable=\"false\" width=\"100%\"/>        当然如果你觉得这里的框架不够的话，比如你这边用的iview框架，ant-design框架或者其他vue框架，guiplan后续也会开放用户自定义输入组件库功能。让组件的复用变得更为简单。<h2 style=\"line-height:2;\" id=\"251dk\">4.羊了个羊类似项目案例</h2><div>         支持vue可视化开发工具有多爽，可以看看以下案例，羊了个羊类似的游戏，我们直接用vue进行开发。为什么不用传统的游戏引擎开发呢？首先第一个传统的游戏引擎布局是支持可视化布局，这是他们的优势。其次是性能优势，大部分游戏都会打包成canves进行，减少dom操作提高性能。但这个游戏简单，而且有guiplan可视化开发工具，再加上作为前端开发工程师对vue又很熟悉，游戏引擎的可视化优势与性能优势都没有了，那何不用vue研发呢？这就是vue可视化工具的优势，可定制任何项目，就能发挥自己的想象力研发各种项目，而不受平台与工具限制。</div><div>    最后可以看出80%代码都不需要手写，需要手写的只是部分的业务层代码。大幅度的提高开发效率，降低研发成本。</div><div>扫码查看线上效果</div><div><img src=\"https://www.guiplan.com/upload/website/article/dgc6hpbHrzuxp1kmqRuCH7629jcZjPpd.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/></div>","img":"https://www.guiplan.com/upload/website/article/q68LhhGSIAl899JbfIlR3vRPVJmJ8frE.jpg","imgList":[],"typeId":"sVfhOn1K1","repertoryNum":0,"liks":0,"hits":1236,"intro":"","isTop":false,"auth":"","isAdvantage":false,"typeIds":[],"__v":0}]}0000000000LCshWORHR