1、新建Axure RP文件,取名“Axure制作高仿真今日头条分享微博倒计时效果”。
2、今日头条网站获取素材。读者需要可留言联系小编获取素材包及RP源文件。
3、将主页图片拖入Home页。如果选择Y,则系统自动优化图片,可以提高加载效率,但是会损失图片分辨率。如果选择N,则可保留高清图片。
![](https://i-blog.csdnimg.cn/blog_migrate/b9db71d7d5664edc31cbef12b580103f.webp?x-image-process=image/format,png)
4、拖入一个Rectangle矩形控件,覆盖微博图标,并把背景色设置为白色、边框设置为无,设置控件Rectangle隐藏。
![](https://i-blog.csdnimg.cn/blog_migrate/66c82349979a606d19c4fa814cf76a69.webp?x-image-process=image/format,png)
![](https://i-blog.csdnimg.cn/blog_migrate/bb4d3bf5d2096ec22f834ac3e63298b9.webp?x-image-process=image/format,png)
5、拖入一个weibo图标覆盖掉图片上的微博图标,并把weibo图标不透明度设置为60%。
![](https://i-blog.csdnimg.cn/blog_migrate/3e771c78f3112b5c7bc584c22fb58592.webp?x-image-process=image/format,png)
6、为weibo图片添加鼠标事件,鼠标移到图片上时,图片颜色变浅(即把Rectangle设置可见覆盖背景,最上层的weibo图标可见,不透明度为60%),设置OnMouseEnter事件如下:
![](https://i-blog.csdnimg.cn/blog_migrate/48086a6c4c23324bf639745189813bb8.webp?x-image-process=image/format,png)
鼠标移出图片上时,图片颜色变深(即把Rectangle设置隐藏显示背景),设置OnMouseOut事件如下:
![](https://i-blog.csdnimg.cn/blog_migrate/54baa8e5cbd3b7745641272039456392.webp?x-image-process=image/format,png)
7、设置鼠标单击事件,点击微博图标弹出分享窗口。添加weibo控件OnClick事件。Open Link——Open Page1——Open In Popup Window(在弹窗中打开),居中显示,大小大于等于弹窗内容大小。
![](https://i-blog.csdnimg.cn/blog_migrate/46b7c437f07e96f06b126ff610555378.webp?x-image-process=image/format,png)
8、制作Page1页面,拖入分享页。在登录按钮上添加一个Hot Spot取名login,设置login单击事件OnClick,在当前窗口弹出登录页面Page2。
![](https://i-blog.csdnimg.cn/blog_migrate/55633eb1fcea9129c0686c21e89143fa.webp?x-image-process=image/format,png)
9、设置Page2页面,拖入登录页面。二维码模拟登录(以鼠标单击事件代替),Onclick打开Page1。
![](https://i-blog.csdnimg.cn/blog_migrate/8515b4e29c4de0e7d0b89d4e31f010a1.webp?x-image-process=image/format,png)
10、设置Page1分享按钮设置,在分享图标添加Hot Spot取名share。为share添加Onclick事件,在当前窗口打开Page3。
11、设置Page3分享成功倒计时效果。添加一个Label标签取名time。Page3页面没有任何操作,从弹出此页面开始倒计时,则添加PageInteractions的交互事件,OnPageLoad事件。设置如下:
![](https://i-blog.csdnimg.cn/blog_migrate/e2947dcbd0f01031a56d92c72efe933d.webp?x-image-process=image/format,png)
12、效果图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/bfc62ea6223219cd8e1904e5c4048e0d.webp?x-image-process=image/format,png)