IVX开发—0代码实现一个九宫格抽奖

原创公众号：bigsai

前言

上次说过在看一些关于0代码开发平台ivx，前一段时间忙完考试最近跟着教程0代码实现一个九宫格抽奖，哈哈哈感觉还是蛮强大的，懂点的人都知道可视化这个东西我们正常都是用一些包或者库来实现数据可视化。而可视化编程我们可能还停留在Dreamweaver和安卓xml编程上。如果写过GUI或者之类就知道任何一个可视化操作的任务量是非常巨大的，所以内心还是很钦佩出这么一个东西。并且这个可视化不错的(上手需要一点时间)。

对于九宫格抽奖问题，要清楚并不是真正的前端界面去抽奖，而是后端生成一个数据前端九宫格根据这个数据去跑成一个这么结果的效果。下面就把个人实现的一个抽奖小程序实现过程记录一下，大家也可以尝试一下，因为不涉及代码可能截图更多。当然，由于这部分如果完整实现设计的内容太多可能使读者失去兴趣，我将一些简单的步骤先截图描述大家可以跟着做，后面更完善的功能可以看这个教学视频。

试了一下可能刚开始了解稍微复杂一点各个按钮不熟悉，跟着教程一步步来慢慢会熟悉一点。后续也可能会使用ivx平台实现一些后台管理或者一些简单的小程序。当然，这只是一次破冰试验，到底怎么样还要等以后在看！

九宫格背景制作

首先登录ivx平台，进入控制台，新建一个WebApp、小程序。

创建完毕之后在前台创建一个页面(点击一下页面图标即可)，然后在右侧可以双击改名为抽奖页。

由于九宫格抽奖效果在画布上的效果更好，可以点击抽奖页，然后在左侧拓展组件中(下滑)找到画布，点击然后在中间画一个差不多大小的矩形。

然后点击画布，设置一个背景颜色更醒目一点。当然，为了美观你也可以将画布的宽高x,y设置一下。

接着可以在画布中添加一个九宫格的背景图(需要提前制作)。点击画布然后在组件列表选择图片，画一个框加入之前准备好的图片，调整大小坐标使其大概覆盖画布。

这样背景就搞好啦，下面需要添加一些动作能让他跑起来！

九宫格跑马灯效果制作

如何实现一个跑 的效果呢？

跑的效果其实是一个九宫格其中之一大小格子旋转移动的效果，所以事先思路也是先添加对应矩形，然后对矩形添加移动事件即可。

我们首先在画布下添加一个矩形，后将矩形坐标大小可以调(这里为了演示就不搞那么精准啦)。

然后点击矩形，将背景颜色清空，然后适当修改矩形边框的大小。这样，初始位置的矩形就设置好了，下面就需要添加一些轨迹动作。

接下来在画布下添加一个时间轴，然后将我们刚刚跳动的矩形放到时间轴内(右侧对象树可直接拖动)。

确定停止时间

在上面我们详细讲解了如何让马灯跑起来，现在就需要再优化一下界面，并且使它能够停下来。我们首先优化一下抽奖页面，在画布上添加一些文本到各个方格中，点击画布，然后在左侧拓展组件选择文本，赋值谢谢惠顾、各种奖项可以自己设置。当然字体颜色也可自己随意改动啊。

这样编译运行就能在我们想要的三等奖下停下来啦! 今天先分享到这里，大家也可以一起研究一下！