详细解析用动态面板和全局变量实现升降动画

1 背景

最近接到公司一个客户提的B端产品的需求——实现园区大门升降柱的智能控制。
由于是公司的业务,出于隐私问题,暂不进行详细说明,此次产品需求分析,仅仅分析产品结构和一些概要分析,详细设计部分将省略后台的设置和统计部分,只是简单说明一下APP上对升降柱的升降操作的动画实现过程。

2 用户需求

  • 要求能实现设备分组,自由控制设备组内的升降设备;
  • 要求能对大门的升降柱实现全升、全降、半升、半降;
  • 需要严格控制升降柱权限问题,并在操作时进行安全须知的阅读和密码的确认。

3 产品需求

3.1 实体关系

下面对系统中实体关系进行简单介绍:

  • 一个场所下可以关联多个设备组,一个设备组仅能在一个场所下;
  • 一个设备组管理一组升降设备,一个升降柱只能在一个设备组里面;
  • 设备组的属性,可以设置安全须知、密码验证、以设备组为单位进行升降操作,形成升降记录。


    实体关系图.png

3.2 系统运行流程

用户在升降系统中的主要操作如下:

  • 先设置基础数据、包括新建场所、录入升降设备、建立设备组;
  • 对设备组进行升降操作,选择操作方式,阅读安全须知,输入操作密码;
  • 形成升降记录,可查询、导出记录。


    业务流程图.png

3.3 功能结构图

升降柱系统的主要功能模块按照下图的功能结构进行划分


功能结构图.png

3.4 APP升降控制

3.4.1 操作介绍

全升——对设备组进行操作时,点击【全升】按钮,阅读安全须知后,点击密码确认,对设备组中所有的设备进行一个升起的操作。
全降——对设备组进行操作时,点击【全降】按钮,阅读安全须知后,点击密码确认,对设备组中所有的设备进行一个降下的操作。
半升——对设备组进行操作时,点击【半升】按钮,阅读安全须知后,点击密码确认,对设备组左边或右边的一半的柱子进行升起操作。
半降——对设备组进行操作时,点击【半降】按钮,阅读安全须知后,点击密码确认,对设备组左边或右边的一半的柱子进行降下操作。

3.4.2 升降动画

3.4.2.1 第一步:分为左右两个面板

为了实现柱子的升降动画,我们先降柱子分为两种状态:升起状态、降下状态。
我们以一个设备组有六根柱子为例,进行动画说明。一个动态面板放一半的柱子数量——3根柱子,分为左右两个面板。在进行半升,半降操作时会分别对左右面板的柱子进行操作。动态面板中有两个状态,如下:
升起:


升起.png

降下:


降下.png

当降下柱子时,柱子的动画为向下移动,相关交互语句如下:

当升起柱子时,柱子的动画为向上移动,相关交互语句如下:

设置好了一个动态面板后预览效果:


升降操作-单.gif

3.4.2.2 第二步:四个操作按钮点击后的动画设置

实现四个操作的不同动画。
首先分析,全升和全降很简单,就是对左边的动态面板和右边的动态面板实现一起升起、一起降下的操作。
全升时:



全降时:



半升时:
半升时需要判断当前应该升起左边的柱子还是右边的柱子,我们默认从左到右升起,所以需要加入条件语句来判断当前需要执行的操作
情形一:翻译过来就是,如果左边的动态面板是降下状态,则升起左边的柱子


情形二:翻译过来就是,如果左边的动态面板已经是升起的状态,则升起右边的柱子。




半降时:
半降时和半升一样需要判断当前应该降下左边的柱子还是右边的柱子,我们默认从右到左降下,所以需要加入条件语句来判断当前需要执行的操作。
情形一:翻译过来为,当右边的柱子为升起状态时,则降下右边的柱子


情形二:翻译过来为,当右边的柱子已经为降下状态了,则降下左边的柱子。


设置完后的效果如下:
升降操作-无密码.gif

第三步:加入阅读安全须知和密码确认弹窗

在执行每一次操作时,需要阅读安全须知并输入密码验证,验证成功后才调用接口进行升降操作,现在我们加入弹窗确认。
新建动态面板,面板一放安全须知,面板二放输入密码框,执行升降操作时,需要弹窗并按步骤进行,验证通过后才进行下一步操作


面板一.png

面板二.png

因为在输入密码成功后,需要知晓用户点击的是哪个操作(全升、全降、半升、半降),所以加入全局变量select,在点击操作按钮时,记录用户点击的按钮,然后在输入密码后可以判断用户之间点击的具体操作,再执行对应的升降操作。

全升时——将select赋值1;
全降时——将select赋值2;
半升时——将select赋值3;
半降时——将select赋值4;
则输入密码确认通过后,需要判断变量并结合操作按钮需要的操作方式,设置为如下情形和交互:


3.4.2.4 最终效果

整体实现效果如下图:


升降效果-总.gif

4 写在最后

本文对升降柱需求进行了简单的概要设计,和对升降柱动画的实现进行了详细介绍。目前只是从产品功能和交互设计层面写了这篇文章,未对升降柱的需求进行更深入的分析,希望读者有做过这方面的需求的可以不吝赐教,跟笔者进行交流一下,谢谢阅读。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,366评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,521评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,689评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,925评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,942评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,727评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,447评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,349评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,820评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,990评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,127评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,812评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,471评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,017评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,142评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,388评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,066评论 2 355