ivx平台开辟之不用代码实现一个九宫格抽奖功能

目录

• 前言
• 九宫格配景制作
• 九宫格赛马灯效果制作
• 确定制止时间

前言

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

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

试了一下可能刚开始相识轻微复杂一点各个按钮不认识，跟着教程一步步来慢慢会认识一点。后续也可能会使用ivx平台实现一些背景管理或者一些简单的小程序。

九宫格配景制作

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

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

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

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

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

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

九宫格赛马灯效果制作

怎样实现一个跑 的效果呢？

跑的效果实在是一个九宫格此中之一巨细格子旋转移动的效果，所以事先思绪也是先添加对应矩形，然后对矩形添加移动变乱即可。

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

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

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

然后点击右侧对象树的矩形，在左侧的变乱中添加轨迹 。然后点击右侧对象树的时间轴将变乱设置成8的整数倍数(由于这里要跳动8下)，方便设置每个跳动时间。点击右侧对象树的轨迹，将轨迹种别设为逐帧 (由于九宫格抽奖都是跳的而不是连续的)，然后在时间轴上添加帧点。

关键帧设置完毕之后，我们必要在每个关键帧确定方块移动到达的位置。按照顺时针的顺序在每个关键帧将矩形移动到应该展示的位置。可设置对应时刻具体的x和y。

这样设置完毕之后，点击启动，是可以启动的，但是跑起来的速度太慢了，我们必要加大倍速，点击时间轴设置循环播放然后将播放倍数扩大到20倍，点击开始这个动画就能跑起来了！

确定制止时间

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

页面做好之后可以准备考虑启动变乱，我们可以通过按钮这个启动项让页面动起来，触发一系列抽奖逻辑，点击右侧对象树的抽奖页，在左侧拓展组件选择按钮，巨细差不多覆盖网格最中间的部分，然后在对象树点击这个按钮，再点击右侧最上的变乱，将按钮触发一个点击变乱，点击与变乱轴关联播放、停息。

这样预览的时候点击按钮就可以跑起来了，但是我们怎么让它在某个时刻停下来呢？这里就必要时间轴的好帮助—时间标志。我们可以在时间轴下添加一个时间标志，可以在恣意一个时刻停下来。在这里我就让它停在三等奖的时间范围内，而且将这个时间标志改名为三等奖。同时将左侧默认的停息点取消。

然后我们必要在按钮上继承添加关联，点击按钮的关联变乱，然后新添时间轴关联，变乱选择播放某段时间段，结束时间就选择对象树种咱们刚刚选择的记载点(三等奖)，播放方向为正向。

这样完成之后编译点击抽奖会发现赛马灯能跑起来了！但是这个赛马灯只能跑一圈到三等奖就停下来了，我们怎样才华让它多跑几圈，实现一个真正赛马灯抽奖的效果呢？答案也很简单，我们仍旧借助时间标志，我们在时间轴下再添加一个时间标志，而且将其停息点也关掉、出发方向也改为正向，同时将它命名为记载点 (将它时间挪到1-2s之间)。后面的事变就让这个记载点来帮我们完成。

然后我们准备给这个记载点添加一个变乱之前，在画布下添加一个数值变量圈数。然后点击记载点再点击变乱，可以选择变乱播放到标志 。关联的对象就是圈数让每经过这个点圈数+1。

同时还要将播放按钮的变乱播放到某时间段先注释掉，让它可以跑下去。我们将注释的这个部分复制下来，添加到记载点的条件中，这个条件就是制止的条件，我们让圈数为6的时候实行前面停下来的动作。

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

到此这篇关于ivx平台开辟之不用代码实现一个九宫格抽奖功能的文章就介绍到这了,更多相关ivx开辟九宫格抽奖内容请搜刮脚本之家从前的文章或继承欣赏下面的相关文章，渴望各人以后多多支持脚本之家！

到此这篇关于ivx平台开辟之不用代码实现一个九宫格抽奖功能的文章就介绍到这了,更多相关ivx开辟九宫格抽奖内容请搜刮脚本之家从前的文章或继承欣赏下面的相关文章，渴望各人以后多多支持脚本之家！