青铜修炼手册:Axure实现水波纹效果

时间:2024-03-14 16:22:44

实现步骤:

1.首先画四个圆形,背景透明,边框调到最粗,颜色白色,名称随意起;由大到小尺寸分别是100*100、80*80、60*60、40*40

青铜修炼手册:Axure实现水波纹效果

2.然后将4个圆形的透明度由大到小依次调整为40%、60%、80%、100%

青铜修炼手册:Axure实现水波纹效果

3.将4个圆形水平垂直居中

青铜修炼手册:Axure实现水波纹效果

4.从默认组件库里,拖一个动态面板进来,尺寸调小一点,便于操作,给动态面板也起个名称随意 

青铜修炼手册:Axure实现水波纹效果

5.我们有4个圈要做动画,我计算了一下波形的由隐藏到显示再到隐藏的循环,来回正好需要8次,因此复制创建总共8个动态面板的状态

青铜修炼手册:Axure实现水波纹效果

6.接下来添加交互动作,每次切换状态的时候依次从小圈到大圈显示再隐藏,为了让涟漪看起来由快到慢,这里的显示动画也将时间逐步增长处理

青铜修炼手册:Axure实现水波纹效果

青铜修炼手册:Axure实现水波纹效果

 7.将刚刚创建的所有原件,全选编组,并且起个名称便于操作

青铜修炼手册:Axure实现水波纹效果

8.将其中4个圆形,设置为隐藏

青铜修炼手册:Axure实现水波纹效果

9.最后给刚刚编的组,添加一个加载命令

青铜修炼手册:Axure实现水波纹效果

10.完成,点击预览:

原型查看效果地址:https://qmllai.axshare.com

 原型RP文件下载地址:https://download.csdn.net/download/qq_27884377/11072429

 

                                  想了解更多Axure资讯,赶快下方扫码加入【Axure修炼手册】微信公众号吧!!!

青铜修炼手册:Axure实现水波纹效果