日常生活中,我们会看到各种各样的倒计时设计: 或是在一段视频的开头;或是隐蔽在屏幕右上角,用于显示广告的时长;或是在软件启动页面,用于增强用户对后面出现内容的期待。不可否认,倒计时是非常有用的。那么,如何用简单的方法做出酷炫的倒计时效果呢?
工具/原料
mockplus
方法/步骤
1
启动Mockplus,从左边的组件库中拖出一个圆形组件,双击组件输入数字。在右侧的属性面板中,将圆形的边框调整为不可见。此处我们将组件内颜色设置为灰色,数字颜色设置为白色。选中这个组件,同时按下Alt键,将组件复制4份,并输入对应的数字(最后一个设置为空白圆形)。
2
将原型4的连接点拖到圆形内部,选择“载入时”,“显示/隐藏”。在右侧的属性面板,将组件设置为不可见。在右侧的交互面板,设置可见性为显示,延迟为300ms, 执行时长为200ms。同理,为圆形2设置同样的交互,延迟设置为800ms (300ms+300ms+200ms )。
3
将5个圆形按照出现的先后顺序从下层到上层重叠起来。点击预览,即可看到文章开头的倒计时效果。
上一篇:excel制作倒计时的操作方法
下一篇:如何用excel制作倒计时显示牌