《Axure制作雷达效果操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,交互产品,图形,元件,动画场景等多维度案例或实操来进行更多的学习;此教程是由HarryTao在2021-07-05发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
雷达效果只是较为基础的交互动画教程,目的是呈现出更为直接的视觉感官。那如何用Axure制作雷达效果,下面就为大家详细的介绍一下雷达效果如何制作,具体操作如下所示:
个人感觉,工作之余研究使用Axure的逻辑关系,也是种不错的放松渠道。
首先,来看一下动画演示
首先需要在画板上创建一个100*100的矩形元件,并点击图形右上角的改变形状,选择心的图形。
填充已创建完成元件的背景颜色,并按住Ctrl+图形、拖动创建出四个相同的心,并分别命名为heart、heart 1、heart 2、heart 3。接着在第一个图形(heart)中设置你想要展示的文字,最后把其余三个图形设为隐藏。
载入时
首先,点击 heart 1 图形 查看右侧属性一栏,并在交互事件中选择“载入时”的用例事件动作为等待500ms然后显示当前元件(先后顺序不能变)
显示时
其次,在交互事件中选择“显示时”的用例事件为设置尺寸于当前元件为300*300、中心锚点、线性4500ms,然后隐藏当前元件,逐渐效果,时间4500ms
隐藏时
最后,在交互事件中选择“隐藏时”的用例事件为设置尺寸于当前元件为100*100、中心锚点、无动画然后显示当前元件。
选择heart 1中交互用例,按住Ctrl+3个状态,复制下来(Ctrl+C)。
接着分别点击heart 2、heart 3 图形,不用选择添加用例,直接Ctrl+V复制,系统就会默认自动粘贴到相对应的属性用例状态下。
然后更改heart 2、heart 3 中 “载入时” 的等待时间分别为2000ms、3500ms(后面会讲)
最后把四个图形都叠在一起,按F5或者点击预览查看原型展示。
1、设置开始时间、循环时间间隔、以及设置尺寸时间的关系
分别设置heart 1、heart 2、heart 3 的 “载入时” 等待时间为500ms、2000ms、3500ms;
载入时的等待时间要和显示时设置尺寸的动画时间对应上。
比如上述我设置的时间间隔为3500ms-2000ms=2000ms-500ms=1500ms,循环间隔就为1500ms;
那么设置尺寸时间-heart 3等待时间=循环间隔-heart 1 等待时间,由此完成循环动画的效果。
2、上述创建heart 1 用例动作为当前元件的原因
因为后面的步骤需要重复使用复制粘贴到不同的元件,而所有用力动作其实都是作用于当前目标元件。
要是不设置上述动作的元件为当前元件,那么粘贴用例动作之后还需要手动挨个修改。
灵活使用设置当前元件、复制粘贴操作可以节省好多冗余的工作量
以上就是Axure制作雷达效果操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 Axure模拟注册登录操作实例
2022-08-31 08:13
2022-06-14 10:00
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论