《Axure中继器制作九宫格拼图操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,界面组成等多维度案例或实操来进行更多的学习;此教程是由zilin在2021-06-03发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
今天带来的教程是Axure中继器制作九宫格拼图,九宫格拼图用的是三分法则表现方式,因为三分法是拍摄习惯,就是主体以三分法的方式体现最漂亮,画面更舒服。主体放到最佳的位置,快来学学吧,详情步骤如下:
制作思路
整个发布动态的九宫格图片由两个页面组成,在每个页面中各自存在一个中继器,进行数据的存储。通过中继器的函数进行数据的传递,达到选中展示的效果。
注:由于中继器函数需要在同一页面中继器中使用,所以需要将两个页面放置于同一画布。通过显示隐藏的交互达到切换的效果。
在整个交互逻辑中,最重要的一步就是中继器之间的交互传值。下面详细介绍之间的交互逻辑。
第一步:创建两个中继器。(展示中继器:用于后期九宫格的展示。选项中继器:模拟手机图片库)。
第二步:修改中继器内部内容为图片元件对应命名为展示图片、选项图片。
第三步:给选项中继器进行图片配置。
①配置交互事件,每项加载时设置选项图片为中继器中导入的对应图片。
②进行中继器图片的导入(在中继器对应数据栏右键选择导入图片选项)。导入完成后,可以看到对应的中继器中已经加载对应的图片。
注:为了界面展示美观,图片使用应该是相同等比的图片。
第四步:设置选项中继器的交互。通过点击选项中继器,进行对应图片传递给展示中继器。
①:配置图片单击交互事件,添加展示中继器行。
②:点击添加行,配置对应数据。(注意:只需要添加一行)
③:配置参数,选择当前中继器的参数。
④:点击预览,查看对应效果。
注:
1、只能通过预览查看对应效果。
2、如果展示图片有三张没有加载出来,就是因为没有在预览前清空预览中继器。
⑤:此时已经完成了整个的核心逻辑。下面部分简单讲述下后续细节优化的思路,有不太清楚的小伙伴可以在文章下留言,或关注公众号获取源文件。
如何设置展示中继器的加号
思路:设置一张加号的图片,通过判断其中继器数据来控制其隐藏。
如何设置图片超过9张的数字
思路:首先设置文本,当展示中继器的数据大于9条时,通过展示中继器条数-9的差值
如何设置一张图片、两张图片展示效果
思路:同样获取中继器的数据,根据数据,改变原有的内部图片的尺寸。
以上就是axure九宫格做法教程全部内容介绍了,关于更多axure9教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 axure中继器使用教程之制作直播视频的卡片列表操作实例
> 下一篇 Axure中继器制作手机端日历表
2022-06-29 09:46
2022-06-16 09:55
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论