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 相关文章推荐
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
js实现常用排序算法
2016/08/09 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python实现字典的key和values的交换
2015/08/04 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
学生自我鉴定模板
2013/12/30 职场文书
搬家公司的创业计划书
2014/01/01 职场文书
应届生自荐信
2014/06/30 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技