1、雷达效果 —— Axure实用交互

axure商城

写在开头:

  • 只是较为基础的交互动画教程,目的是呈现出更为直接的视觉感官。
  • 个人感觉,工作之余研究使用Axure的逻辑关系,也是种不错的放松渠道。

首先,来看一下动画演示

在线演示地址:案例演示

  元件图形样式、颜色、展示的文字都可以根据自身喜好进行修改。

 

开始原型设计

一、创建所需元件图形

1、首先需要在画板上创建一个100*100的矩形元件,并点击图形右上角的改变形状,选择心的图形。

2、填充已创建完成元件的背景颜色,并按住Ctrl+图形、拖动创建出四个相同的心,并分别命名为heart、heart 1、heart 2、heart 3。接着在第一个图形(heart)中设置你想要展示的文字,最后把其余三个图形设为隐藏。

 

二、设置交互效果

1、载入时

首先,点击 heart 1 图形 查看右侧属性一栏,并在交互事件中选择“载入时”的用例事件动作为等待500ms然后显示当前元件(先后顺序不能变)

2、显示时

其次,在交互事件中选择“显示时”的用例事件为设置尺寸于当前元件为300*300、中心锚点、线性4500ms,然后隐藏当前元件,逐渐效果,时间4500ms

3、隐藏时

最后,在交互事件中选择“隐藏时”的用例事件为设置尺寸于当前元件为100*100、中心锚点、无动画然后显示当前元件。

 

三、创建连续不断的动画效果

1、选择heart 1中交互用例,按住Ctrl+3个状态,复制下来(Ctrl+C)。

2、接着分别点击heart 2、heart 3 图形,不用选择添加用例,直接Ctrl+V复制,系统就会默认自动粘贴到相对应的属性用例状态下。

3、然后更改heart 2、heart 3 中 “载入时” 的等待时间分别为2000ms、3500ms(后面会讲)

4、最后把四个图形都叠在一起,按F5或者点击预览查看原型展示。

四、重点解释

1、设置开始时间、循环时间间隔、以及设置尺寸时间的关系

分别设置heart 1、heart 2、heart 3 的 “载入时” 等待时间为500ms、2000ms、3500ms;

载入时的等待时间要和显示时设置尺寸的动画时间对应上。

比如上述我设置的时间间隔为3500ms-2000ms=2000ms-500ms=1500ms,循环间隔就为1500ms;

那么设置尺寸时间-heart 3等待时间=循环间隔-heart 1 等待时间,由此完成循环动画的效果。

 

2、上述创建heart 1 用例动作为当前元件的原因

因为后面的步骤需要重复使用复制粘贴到不同的元件,而所有用力动作其实都是作用于当前目标元件。

要是不设置上述动作的元件为当前元件,那么粘贴用例动作之后还需要手动挨个修改。

灵活使用设置当前元件、复制粘贴操作可以节省好多冗余的工作量

 


至此,雷达效果讲演结束,期待与您的交流沟通!

 

 

15

发表评论