[原型设计]Axure制作高仿真今日头条分享微博倒计时效果
2017-11-13 18:33
1266 查看
1、新建Axure RP文件,取名“Axure制作高仿真今日头条分享微博倒计时效果”。
2、今日头条网站获取素材。读者需要可留言联系小编获取素材包及RP源文件。
3、将主页图片拖入Home页。如果选择Y,则系统自动优化图片,可以提高加载效率,但是会损失图片分辨率。如果选择N,则可保留高清图片。
4、拖入一个Rectangle矩形控件,覆盖微博图标,并把背景色设置为白色、边框设置为无,设置控件Rectangle隐藏。
5、拖入一个weibo图标覆盖掉图片上的微博图标,并把weibo图标不透明度设置为60%。
6、为weibo图片添加鼠标事件,鼠标移到图片上时,图片颜色变浅(即把Rectangle设置可见覆盖背景,最上层的weibo图标可见,不透明度为60%),设置OnMouseEnter事件如下:
鼠标移出图片上时,图片颜色变深(即把Rectangle设置隐藏显示背景),设置OnMouseOut事件如下:
7、设置鼠标单击事件,点击微博图标弹出分享窗口。添加weibo控件OnClick事件。Open Link——Open Page1——Open In Popup Window(在弹窗中打开),居中显示,大小大于等于弹窗内容大小。
8、制作Page1页面,拖入分享页。在登录按钮上添加一个Hot Spot取名login,设置login单击事件OnClick,在当前窗口弹出登录页面Page2。
9、设置Page2页面,拖入登录页面。二维码模拟登录(以鼠标单击事件代替),Onclick打开Page1。
10、设置Page1分享按钮设置,在分享图标添加Hot Spot取名share。为share添加Onclick事件,在当前窗口打开Page3。
11、设置Page3分享成功倒计时效果。添加一个Label标签取名time。Page3页面没有任何操作,从弹出此页面开始倒计时,则添加PageInteractions的交互事件,OnPageLoad事件。设置如下:
12、效果图如下:
2、今日头条网站获取素材。读者需要可留言联系小编获取素材包及RP源文件。
3、将主页图片拖入Home页。如果选择Y,则系统自动优化图片,可以提高加载效率,但是会损失图片分辨率。如果选择N,则可保留高清图片。
4、拖入一个Rectangle矩形控件,覆盖微博图标,并把背景色设置为白色、边框设置为无,设置控件Rectangle隐藏。
5、拖入一个weibo图标覆盖掉图片上的微博图标,并把weibo图标不透明度设置为60%。
6、为weibo图片添加鼠标事件,鼠标移到图片上时,图片颜色变浅(即把Rectangle设置可见覆盖背景,最上层的weibo图标可见,不透明度为60%),设置OnMouseEnter事件如下:
鼠标移出图片上时,图片颜色变深(即把Rectangle设置隐藏显示背景),设置OnMouseOut事件如下:
7、设置鼠标单击事件,点击微博图标弹出分享窗口。添加weibo控件OnClick事件。Open Link——Open Page1——Open In Popup Window(在弹窗中打开),居中显示,大小大于等于弹窗内容大小。
8、制作Page1页面,拖入分享页。在登录按钮上添加一个Hot Spot取名login,设置login单击事件OnClick,在当前窗口弹出登录页面Page2。
9、设置Page2页面,拖入登录页面。二维码模拟登录(以鼠标单击事件代替),Onclick打开Page1。
10、设置Page1分享按钮设置,在分享图标添加Hot Spot取名share。为share添加Onclick事件,在当前窗口打开Page3。
11、设置Page3分享成功倒计时效果。添加一个Label标签取名time。Page3页面没有任何操作,从弹出此页面开始倒计时,则添加PageInteractions的交互事件,OnPageLoad事件。设置如下:
12、效果图如下:
相关文章推荐
- tableView 头部添加状态 今日头条刷新数据效果
- YouTube、微博、今日头条齐齐发力,短视频平台如何打造头部内容、做好用户留存?
- 周四见|《微博话题高性能降级设计》公开课分享
- 今日头条频道管理(自带动画效果)
- 仿今日头条下拉出现SearchBar,再下拉刷新效果,SearchListView实现以及原理讲解
- Android 微博头条头部滑动的效果
- Android之仿今日头条顶部导航栏效果
- [原型设计]Axure制作页面加载进度条效果
- android仿今日头条视频显示效果
- 优秀原型设计欣赏:美食类App原型制作分享-Sooshi
- 使用TabLayout实现仿今日头条的导航页效果
- Js实现点击查看全文(类似今日头条、知乎日报效果)
- 正面开战:今日头条将封禁微信、微博等账户推广
- Android 仿今日头条评论时键盘自动弹出的效果(推荐)
- Axure RP Pro - 相关问题 - Text Panel部件在设计时的效果与原型不一致
- 干货分享-倒计时,今天离过年前的节日还有多少天进度图动态加载效果
- Android高仿今日头条/QQ空间手势下拉关闭图片效果
- 周四见|《微博话题高性能降级设计》公开课分享
- [原型设计]Axure制作图像的放大与缩小效果的四种方式