亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!
课程主题:pc轨迹回放制作
主要内容:制作车辆轨迹操作页,包括查询条件、动态轨迹回放、车辆轨迹详情表单等
应用场景:车辆轨迹应用设计、其他移动类轨迹设计
案例展示:
pc轨迹回放制作
正文内容:
步骤一:建立一个基本页面背景矩形1920*1080,表头1920*70;
步骤二:分别创建页面组成,条件查询、回放速度、查询记录、车辆轨迹详情、地图区;
步骤三:录入车辆和车辆轨迹表单页面,交互时使用;轨迹详情表单我们在实际场景中是从表中取值,那么我们就参照表单的形式建立多个表单详情页面,交互调用使用;轨迹详情表单采用内联框架调用,以新页面的形式出现;
录入车辆(三辆车:京X12345、京X23456、京X34567)
分别添加另外两个内联框架对应新增的两个页面
步骤四:添加根据查询条件,车辆轨迹同步显示交互;
同理设置另外两种情形
因为篇幅关系,时间的筛选没有制作,以及另外一种表单的做法(中继器),如有需要可私信我,在做一篇中继器篇;
步骤五:添加车辆轨迹,设定坐标点根据详情地点,设置好坐标点;划出行程轨迹;
步骤六:设置车辆移动交互,由回放速度按钮触发。
继续添加,三个按钮的选中值
本课小结:轨迹回放页面的设计难点:移动轨迹和轨迹详情表单;详情表单采用内联框架快速添加对应车辆的表单,符合代码设计逻辑;车辆移动轨迹设计分段坐标点,画出路线,利用回放按钮调起移动效果;在实际场景中车辆移动轨迹的取数来自于车辆GPS数据,到时候加一下数据获取页面微调即可。
相关课程直通车:
中继器实现时间读取和修改-CSDN博客
Axure横向菜单高级交互-CSDN博客
Axure垂直菜单展开与折叠-CSDN博客
Axure树形菜单展开与折叠-CSDN博客
app评价弹窗制作-CSDN博客
如有其他相关问题,欢迎私信沟通,关注 结构化知识课堂-CSDN博客
明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!