[原型设计]Axure制作高仿真今日头条分享微博倒计时效果

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