收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1599|回复: 0

[教程] 三步教你做酷炫的“倒计时”原型效果

[复制链接]
发表于 2017-7-24 13:38:49 | 显示全部楼层 |阅读模式
日常生活中,我们会看到各种各样的倒计时设计: 或是在一段视频的开头;或是隐蔽在屏幕右上角,用于显示广告的时长;或是在软件启动页面,用于增强用户对后面出现内容的期待。不可否认,倒计时是非常有用的。那么,如何用简单的方法做出酷炫的倒计时效果呢?我们一起来学习一下。

工具:Mockplus

所需时间:3分钟

用Mockplus来做交互,最大的特点就是简单快速。下图中这个倒计时效果,只需三步就可以实现。
倒计时.gif plus

步骤一:自定义倒计时样式

启动Mockplus,从左边的组件库中拖出一个圆形组件,双击组件输入数字。

在右侧的属性面板中,将圆形的边框调整为不可见。此处我们将组件内颜色设置为灰色,数字颜色设置为白色。

选中这个组件,同时按下Alt键,将组件复制4份,并输入对应的数字(最后一个设置为空白圆形)。

1.jpg
ALT: make countdown with Mockplus 1

2.jpg
ALT: make countdown with Mockplus 2
步骤二:设置交互

想实现倒计时的效果,只需让这几个圆形陆续出现即可。在Mockplus中,我们很容易实现这一点。

将原型4的连接点拖到圆形内部,选择“载入时”,“显示/隐藏”。

3.jpg
ALT: make countdown with Mockplus 3
在右侧的属性面板,将组件设置为不可见。

4.jpg
ALT: make countdown with Mockplus 4
在右侧的交互面板,设置可见性为显示,延迟为300ms, 执行时长为200ms。

同理,为圆形2设置同样的交互,延迟设置为800ms (300ms+300ms+200ms )。
5.jpg

ALT: make countdown with Mockplus 5
6.jpg
ALT: make countdown with Mockplus 6
步骤三:合并这5个圆形

将5个圆形按照出现的先后顺序从下层到上层重叠起来。点击预览,即可看到文章开头的倒计时效果。

7.jpg
ALT: make countdown with Mockplus 7
是不是很简单呢?其实,不仅仅是倒计时,利用Mockplus还可以实现各种各样的交互效果,比如常用的手风琴菜单鼠标悬停菜单下拉等等。除此之外,Mockplus的官方教程中还提供了许多独特的设计方法,并体现了令人惊叹的设计思维。不信你可以去看看“利用滚动区设置悬浮效果”这一章,看完一定很有收获。
封面.jpg
1.jpg
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-11-20 01:35 , Processed in 0.121763 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表