Axure 教学案例总结分析（2）

一：列表选中项备选项 实现的效果：当点击输入框时弹出列表框，向下图标变为向上的图标。选择列表框中任意一项，输入框显 示的内容则为被选择的文本内容，列表框隐藏。
原型：

预览效果图：

实现步骤：

1. 在原型中隐藏列表框，当点击输入框时显示列表框，设置一个向 上滑动的动画效果。
2. 设置向下图标旋转，以中心为锚点，180度旋转向下图标，使用 线性的动画效果，这样就可以将向下的图标转变成一个向上的图标了。
3. 当列表框显示时，任意选择点击其中一项时，设置文本框被选项 的文字为列表框文字。
4. 大概设置一个等待500毫秒，然后设置向下图标旋转，以中心为 锚点，0度旋转向下图标，使用线性的动画效果，让向下的图标旋转 回来。
5. 最后设置隐藏列表框，向下滑动500毫秒。

二：设置图片与文字
实现的效果：选中三张小图片中的任意一张，上面的大图区域则会显示小图片选择的内容，大图下方的文字也会随之改变。
原型：

预览效果图：

实现步骤：

1. 给每一个小图片一个鼠标单击事件，设置图片选择到大图片，设置 Default导入，在文件夹中找的对应的那一张图片，选择即可。
2. 设置文字，设置文本选择富文本，就可以在里面编辑文字字体，颜色， 大 小 … ( 还 可 以 插 入 变 量 ) 例 ：
   这样你只需要给每一张图片设置名称，然后插入变量选择元件与对 应的名称就好了。
3. 单击时，被选项选中状态为 true，然后组合，给它们一个人交 互选中边框样式就可以了。

三：旋转案例
实现的效果：地球图形自转，火箭图形围绕着地球图形转动。
原型：

预览效果图：

实现步骤：

1. 先给地球图形一个载入事件，当页面载入时相对位置以中心为锚点 顺时针旋转 360°，给它一个线性的动画效果，大概设置五秒钟左右。 但它其实只是旋转了一周，我们还需要给它设置一个旋转时的事件， 内容和这个图形载入事件是相同，这样一来就可以实现不停旋转的效 果。
2. 火箭图形的转动和地球图形差不多，只是多了一个锚点偏移（它的锚 点偏移大概是X轴150，Y轴150），锚点偏移就是当任意元件以中心 或其他点为锚点时，将矩形的锚点相对于元件进行了移动。