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 用例动作为当前元件的原因

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

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

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。