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、效果图如下: