共计 2179 个字符，预计需要花费 6 分钟才能阅读完成。
原创公众号：bigsai
前言
上次说过在看一些对于 0 代码开发平台 ivx，前一段时间忙完考试最近跟着教程 0 代码实现一个九宫格抽奖，哈哈哈感觉还是蛮弱小的，懂点的人都晓得 可视化 这个货色咱们失常都是用一些包或者库来实现数据可视化。而可视化编程咱们可能还停留在 Dreamweaver 和安卓 xml 编程上。如果写过 GUI 或者之类就晓得任何一个可视化操作的任务量是十分微小的，所以心田还是很钦佩出这么一个货色。并且这个可视化不错的(上手须要一点工夫)。
对于九宫格抽奖问题，要分明并不是真正的前端界面去抽奖，而是后端生成一个数据前端九宫格依据这个数据去跑成一个这么后果的成果。上面就把集体实现的一个抽奖小程序实现过程记录一下，大家也能够尝试一下，因为不波及代码可能截图更多。当然，因为这部分如果残缺实现设计的内容太多可能使读者失去趣味，我将一些简略的步骤先截图形容大家能够跟着做，前面更欠缺的性能能够看这个教学视频。
试了一下可能刚开始理解略微简单一点各个按钮不相熟，跟着教程一步步来缓缓会相熟一点。后续也可能会应用 ivx 平台实现一些后盾治理或者一些简略的小程序。当然，这只是一次破冰试验，到底怎么样还要等当前在看！
九宫格背景制作
首先登录 ivx 平台，进入控制台，新建一个 WebApp、小程序。
创立结束之后在前台创立一个页面(点击一下页面图标即可)，而后在右侧能够双击改名为抽奖页。
因为九宫格抽奖成果在画布上的成果更好，能够点击抽奖页，而后在左侧拓展组件中 (下滑) 找到画布，点击而后在两头画一个差不多大小的矩形。
而后点击画布，设置一个背景色彩更醒目一点。当然，为了好看你也能够将画布的宽高 x,y 设置一下。
接着能够在画布中增加一个九宫格的背景图(须要提前制作)。点击画布而后在组件列表抉择图片，画一个框退出之前筹备好的图片，调整大小坐标使其大略笼罩画布。
这样背景就搞好啦，上面须要增加一些动作能让他跑起来！
九宫格跑马灯成果制作
如何实现一个 跑 的成果呢？
跑的成果其实是一个九宫格其中之一大小格子旋转挪动的成果，所以当时思路也是先增加对应矩形，而后对矩形增加挪动事件即可。
咱们首先在画布下增加一个矩形，后将矩形坐标大小能够调(这里为了演示就不搞那么精准啦)。
而后点击矩形，将背景色彩清空，而后适当批改矩形边框的大小。这样，初始地位的矩形就设置好了，上面就须要增加一些轨迹动作。
接下来在画布下增加一个时间轴，而后将咱们刚刚跳动的矩形放到时间轴内 (右侧对象树可间接拖动)。
而后点击右侧对象树的矩形，在左侧的事件中增加 轨迹 。而后点击右侧对象树的时间轴将事件设置成 8 的整数倍数(因为这里要跳动 8 下)，不便设置每个跳动工夫。点击右侧对象树的轨迹，将轨迹类别设为 逐帧 (因为九宫格抽奖都是跳的而不是间断的)，而后在时间轴上增加帧点。
关键帧设置结束之后，咱们须要在每个关键帧确定方块挪动达到的地位。依照顺时针的程序在每个关键帧将矩形挪动到应该展现的地位。可设置对应时刻具体的 x 和 y。
这样设置结束之后，点击启动，是能够启动的，然而跑起来的速度太慢了，咱们须要加大倍速，点击时间轴设置循环播放而后将播放倍数扩充到 20 倍，点击开始这个动画就能跑起来了！
确定进行工夫
在下面咱们具体解说了如何让马灯跑起来，当初就须要再优化一下界面，并且使它可能停下来。咱们首先优化一下抽奖页面，在画布上增加一些文本到各个方格中，点击画布，而后在左侧拓展组件抉择文本，赋值谢谢惠顾、各种奖项能够本人设置。当然字体色彩也可本人随便改变啊。
页面做好之后能够筹备思考启动事件，咱们能够通过 按钮 这个启动项让页面动起来，触发一系列抽奖逻辑，点击右侧对象树的抽奖页，在左侧拓展组件抉择按钮，大小差不多笼罩网格最两头的局部，而后在对象树点击这个按钮，再点击右侧最上的事件，将按钮触发一个点击事件，点击与事件轴关联播放、暂停。
这样预览的时候点击按钮就能够跑起来了，然而咱们怎么让它在某个时刻停下来呢？这里就须要时间轴的好帮手—工夫标记 。咱们能够在时间轴下增加一个工夫标记，能够在任意一个时刻停下来。在这里我就让它停在三等奖的工夫范畴内，并且将这个工夫标记改名为三等奖。同时将左侧默认的暂停点勾销。
而后咱们须要在按钮上持续增加关联，点击按钮的关联事件，而后新添时间轴关联，事件抉择播放某段时间段，完结工夫就选择对象树种咱们刚刚抉择的记录点 (三等奖)，播放方向为正向。
这样实现之后编译点击抽奖会发现跑马灯能跑起来了！然而这个跑马灯只能跑一圈到三等奖就停下来了，咱们怎样才能让它多跑几圈，实现一个真正跑马灯抽奖的成果呢？答案也很简略，咱们仍旧借助工夫标记，咱们在时间轴下再增加一个工夫标记，并且将其暂停点也关掉、登程方向也改为正向，同时将它命名为 记录点 (将它工夫挪到 1 -2s 之间)。前面的事件就让这个记录点来帮咱们实现。
而后咱们筹备给这个记录点增加一个事件之前，在画布下增加一个数值变量 圈数 。而后点击记录点再点击事件，能够抉择事件 播放到标记 。关联的对象就是圈数让每通过这个点圈数 +1。
同时还要将播放按钮的事件播放到某时间段先正文掉，让它能够跑下去。咱们将正文的这个局部复制下来，增加到记录点的条件中，这个条件就是进行的条件，咱们让 圈数为 6 的时候执行后面停下来的动作 。
这样编译运行就能在咱们想要的三等奖下停下来啦! 明天先分享到这里，大家也能够一起钻研一下！