使用ivx实现时间倒退效果的经验总结
今天要实现一个时间倒退的动画效果,案例初始时会显示当前日期,用户可以从日期选择器上选择过去的某一天,开始播放后显示日期会逐渐倒退至选中日期。主要用到的组件是触发器,设计思路是将当前日期和选中日期都转化成时间戳格式,然后通过触发器不断改变当前日期的值,直到等于选中日期。
(Unix时间戳是一种时间表示方式,定义为从格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数)
1.参数
下图是案例中使用的几个变量,“当前日期”是存储2020-04-26格式的当前日期,数值变量“选中日期”和“当前日期转换时间戳”是对应日期时间戳的值,另外在案例中我们可以设置动画的时长,所以需要添加一个数值变量“速度”,即触发器每次触发的变化量。
2.前台初始化事件
在案例初始化时,我们获取系统当前时间的时间戳,从中提取年、月、日展示出来,并将时间戳值保存在“当前日期转换时间戳”中。
3.选择日期
这里使用了拓展组件中的日期选择器,我们可以选择过去的任意一天,选取后会将该日期的时间戳赋值给“选中日期”。
4.速度
当输入框失焦后我们就计算“速度”的值,不过输入框输入的速度是以秒为单位的,而触发器的时间间隔是0.01秒,所以每次触发的变量值就是(当前日期-选中日期)/(输入速度*100)。
5.播放
点击播放按钮“Go back”,会先判断一下输入框的内容是否为空,如果为空进行一个提示,若非空则触发器开始播放。
6.触发器
在触发器的触发事件里,我们先判断当前日期的时间戳减去速度后是否小于选中日期,如果小于则暂停触发器然后将选中日期的年、月、日提取出来显示,动画也就运行结束;如果不是则用当前日期时间戳减去速度,再获取年、月、日展示出来,这样循环播放就有了一个时间倒退的效果。
- 使用ivx实现通过角标调整图片的经验总结
- 使用ivx的for组件进行循环创建实现排行榜的经验总结
- 使用ivx实现批量上传图片的经验总结
- 使用ivx连接组件实现私聊模型的经验总结
- 使用ivx实现预定会议室模型的经验总结
- 使用ivx实现投票的经验总结
- 使用.Net实现多线程经验总结
- 基于Metronic的Bootstrap开发框架经验总结(17)-- 使用 summernote插件实现HTML文档的编辑和图片插入操作
- JavaScript 实现使用时间差来转换倒计时效果。
- 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- 使用ivx的瀑布流容器显示图片经验总结
- 使用ExpandableListView实现时间轴效果
- 使用RecyclerView实现时间轴效果
- 使用.Net实现多线程经验总结
- 使用ivx图表组件的经验总结
- Android使用自定义View实现横行时间轴效果
- 使用ExpandableListView实现时间轴效果
- 【笔记】C++ (仅使用一维数组,不用blas)实现 logistic regression代码错误经验总结, 数据集为mnist手写体数字
- 使用ExpandableListView实现时间轴效果
- jQuery视差滚动效果网页实现方法经验总结