1、雷达效果 —— 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 用例动作为当前元件的原因

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

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

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

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