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


Posted in HTML / CSS onJanuary 27, 2021

前言

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

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

试了一下可能刚开始了解稍微复杂一点各个按钮不熟悉,跟着教程一步步来慢慢会熟悉一点。后续也可能会使用ivx平台实现一些后台管理或者一些简单的小程序。

九宫格背景制作

首先登录ivx平台,进入控制台,新建一个WebApp、小程序。
ivx平台开发之不用代码实现一个九宫格抽奖功能

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

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

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

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

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

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

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

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

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

九宫格跑马灯效果制作

如何实现一个 的效果呢?

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

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

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

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

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

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

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

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

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

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

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

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

确定停止时间

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

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

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

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

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

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

然后我们需要在按钮上继续添加关联,点击按钮的关联事件,然后新添时间轴关联,事件选择播放某段时间段,结束时间就选择对象树种咱们刚刚选择的记录点(三等奖),播放方向为正向。

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

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

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

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

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

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

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

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

到此这篇关于ivx平台开发之不用代码实现一个九宫格抽奖功能的文章就介绍到这了,更多相关ivx开发九宫格抽奖内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

到此这篇关于ivx平台开发之不用代码实现一个九宫格抽奖功能的文章就介绍到这了,更多相关ivx开发九宫格抽奖内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 #HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 #HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 #HTML / CSS
浅析HTML5页面元素及属性
Jan 20 #HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 #HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 #HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 #HTML / CSS
You might like
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
python逆向入门教程
2018/01/15 Python
python实现年会抽奖程序
2019/01/22 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
python基于socket函数实现端口扫描
2020/05/28 Python
简单了解Django项目应用创建过程
2020/07/06 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
大学军训感言300字
2014/03/09 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
2015年学校德育工作总结
2015/04/22 职场文书