【原创Axure教程10】用Axure做复杂动效——实例10：切换中，背景图片圆环分割旋转动效

关键技术点：

1、主要是学习Rotate/旋转action(动作)的使用技巧；

2、复习一下全局变量和condition条件的使用；

其实这个案例比较简单，也没有应用到很复杂的技巧，但是做出来的效果比较有趣~

好久不学习Axure了，那么让我们开始吧！

先来看一下完成以后的效果：

B站视频播放地址：

完成后的工程文件、用来学习的初始工程文件以及素材，可以从下面的网盘链接自行下载：

链接: https://pan.baidu.com/s/1AUoc_KrCabFW90pi-_-uwg 提取码: 0rbf 

--来自百度网盘超级会员v7的分享

——————————————————分割线———————————————

【Step1】打开初始工程文件，搭建场景

打开上面网盘链接下载的文件夹中的“【Axure原创动效教程10】初始.rp”文件，可以看到已经搭建了一个基本的页面出来了，如下图1：

【图1】

【1.1】添加分层环形图素材

在outline面板中，双击动态面板“切换背景图组(Dynamic Panel)”，进入其中，可以看到已经有了一张完成的底图(下图2)。此时我们需要再添加四张被圆环蒙版分割的图片，也就是素材文件夹中的“Lyr1”文件夹中的四张图片。

添加图片素材的方式前面的教程已经讲过很多，这里就不在赘述啦！也可以直接从文件浏览器拖动图片进入到Axure工程文件中。

如下图2：

【图2】

【1.2】将四张分层环形图素材摆放到合适的位置

从上到下四张图片，分别重命名为“State1—环4-图”、“State1—环3-图”、“State1—环2-图”、“State1—环1-图”（分别是从外到内），然后分别修改位置参数如下：

将“State1—环1-图”的位置参数修改为80、80；

将“State1—环2-图”的位置参数修改为-70、-70；

将“State1—环3-图”的位置参数修改为-220、-220；

将“State1—环4-图”的位置参数修改为-370、-370；

如下图3：

【图3】

【1.3】为动态面板“切换背景图组”再添加两个State/状态，再以同样的方式和位置参数添加其他两组图片素材

首先在Outline面板双击动态面板“切换背景图组”，在弹出的动态面板状态设置弹窗里，添加两个状态。如下图4：

【图4】

然后再从“素材文件”文件夹里，将Lyr2和Lyr3文件夹里的图片以及作为完整底图的Lyr2 full.jpg和Lyr3 full.jpg分别拖动到对应的State2和State3中。其中四张环形图的位置参数均和上一步骤中的完全相同，其中State2和State3里的底图（也分别就是素材文件夹中的“Lyr2 full.jpg”和“Lyr3 full.jpg”）的位置参数均为（-210，-180）。注意做好各自的重命名管理。如下图5：

【图5】

至此，准备工作差不多了。可以开始着手制作交互动效了。

——————————————————分割线———————————————

【Step2】添加向上滑动事件（Swipe Up），制作第一组切换的交互动效

【2.1】

首先需要将界面中的01、02、03三组标题文字的selected状态设置一下。在outline面板中同时选中“切换内容组3”、“切换内容组2”、“切换内容组1”，然后点击Interaction Styles/交互样式下的Selected，在弹出的交互样式面板中，点击打开Opacity项，将参数值设为100，如图下6所示：

【图6】

【2.2】添加滑动操作热区

双击左侧的Pages面板中的Home，回到最外层，然后从Libraries面板中将动态面板拖动到界面中，大致放在如下图6所示的位置，大小参考参数设为（300，400），位置参数参考设为（515，245）。重命名该动态面板为“滑动热区”。如下图7：

【图7】

【2.3】添加Swipe Up向上滑动动作

保持选中新拖入的“滑动热区”动态面板，点击“More Events”，弹出更多事件选择下拉面板，点击添加OnSwipeUp。如图8所示。

【图8】

【2.4】添加actions/动作

此时会自动打开Case编辑面板，在左侧actions栏里选择Set Opacity动作，然后再右侧选中“切换内容组2”和“切换内容组1”，修改“切换内容组2”的Opacity值为100，Animate设为ease out cubic方式，时长t设为300ms；修改“切换内容组1”的Opacity值为100，Animate和时长均相同。

然后，再添加一组Set Selected/Checked动作，在右侧同样选中“切换内容组2”和“切换内容组1”，将“切换内容组2”设为true，“切换内容组1”设为false。

如图9所示：

 

【图9】

【2.5】添加旋转动作

点击添加左侧的Rotate动作，然后在右侧：

（1）选中“State1—环4-图”,设置degrees旋转角度为10，Direction方向设为Clockwise顺时针方向，Animate设为ease in cubic,时长设为360ms；

（2）选中“State1—环3-图”,设置degrees旋转角度为10，Direction方向设为CounterClockwise逆时针方向，Animate设为ease in cubic,时长设为360ms；

（3）选中“State1—环2-图”,设置degrees旋转角度为10，Direction方向设为Clockwise顺时针方向，Animate设为ease in cubic,时长设为360ms；

（4）选中“State1—环1-图”,设置degrees旋转角度为10，Direction方向设为CounterClockwise逆时针方向，Animate设为ease in cubic,时长设为360ms；

如图10

【图10】

然后类似的步骤设置切换到第二个State2的图片的旋转。在右侧再选中：

（5）选中“State2—环4-图”,设置degrees旋转角度为15，Direction方向设为CounterClockwise逆时针方向，Animate设为ease out cubic,时长设为600ms；

（2）选中“State2—环3-图”,设置degrees旋转角度为15，Direction方向设为Clockwise顺时针方向，Animate设为ease out cubic,时长设为600ms；

（3）选中“State2—环2-图”,设置degrees旋转角度为12，Direction方向设为CounterClockwise逆时针方向，Animate设为ease out cubic,时长设为600ms；

（4）选中“State2—环1-图”,设置degrees旋转角度为10，Direction方向设为Clockwise顺时针方向，Animate设为ease out cubic,时长设为600ms；

如图11所示：

【图11】

【2.6】添加切换动态面板状态的动作

再添加一个Set Panel State动作，在右侧选中“切换背景图组”动态面板，选择切换为State2，动画方式设为fade（渐隐渐现）时长设为600ms。如图12所示。

【图12】

【2.6】调整State2下的图片初始旋转角度，以抵消旋转动作改变的角度

点击Preview尝试运行一下原型，会发现切换到State2以后，环形图片错位了。这是因为经过了旋转。为了在旋转后使得图片不错位，就需要在State2的图片旋转之前，先设定一个合适的旋转角度，在旋转之后正好抵消。

双击动态面板“切换背景图组”下的State2进入，选中“State2—环1-图”，将旋转值设为350°（即-10°）；

选中“State2—环2-图”，将旋转值设为12°；

选中“State2—环3-图”，将旋转值设为345°（即-15°）；

选中“State2—环4-图”，将旋转值设为15°；

如图13所示：

【图13】

此时运行一下效果，可以看到这个切换转场动效已经基本完成了。

接下来添加一个全局变量，用以判断在执行OnSwipeUp/向上滑动事件时，当前是State1还是State2，从而确定是滑动到State2还是滑动到State3（如果当前是State1，则向上滑动切换到State2；如果当前是State2，则向上滑动是切换到State3）。这个方法我们在前面的其他Axure教程已经应用过很多次，这里再复习一下哈~

——————————————————分割线———————————————

【Step3】再添加一个向上滑动事件（Swipe Up），制作切换State3的交互动效

【3.1】添加全局变量

双击“滑动热区”动态面板的OnSwipeUp事件下的Case1，打开Case编辑弹窗，然后点击Add Condition按钮，弹出条件编辑弹窗，点击第一个下拉弹窗选择value of variable，如图14所示：

【图14】

然后点击第二个下拉弹窗中，选择Add new···,即添加变量；

在弹出的变量设置窗口中，点击绿色的“+”号图标，添加一个新的全局变量，命名为StateNo；

点击OK回到条件编辑窗口，在最后一个输入框设置默认值为1。

如图15所示：

【图15】

【3.2】在完成第一次的切换动效后，添加一个设定修改全局变量值的动作

在左侧再添加一个Set Variable Value动作，在右侧选中刚新建的全局变量StateNo，设定值为2。也就是在第一次切换动效后，全局变量值由1改为2，表示当前状态已经切换到了State2。如图16：

【图16】

【3.3】添加第二个OnSwipeUp事件

双击热区动态面板“滑动热区”的OnSwipeUP事件，新增一个Case2并自动打开Case编辑窗口。并依次添加Set Opacity动作、Set Selected/Checked动作和Rotate动作，如图16所示：

【图17】

【3.3】编辑条件

点击Add Condition按钮，打开条件编辑窗口。设置条件如下：全局变量StateNo的Value为2。如图18所示：

【图18】

【3.4】编辑动作参数

（3.4.1）先编辑设置Opacity透明度。

选中Set Opacity动作，在右侧选中“切换内容组3”，设置Opacity值为100，Animate设为ease out cubic，时长为300ms；再选中“切换内容组2”，设置Opacity值为50，Animate设为ease out cubic，时长为300ms；

如图19：

【图19】

（3.4.2）再设置Set Selected/Checked动作。

选中Set Selected/Checked动作，在右侧选中“切换内容组3”和“切换内容组2”，将“切换内容组3”设为ture，“切换内容组2”设为false，如图20所示：

【图20】

（3.4.3）接下来设置Rotate动作。

选中Rotate动作，在右侧先设置State2的图片的旋转：

（1）选中“State2—环1-图”,设置degrees旋转角度为10，Direction方向设为CounterClockwise逆时针方向，Animate设为ease in cubic,时长设为360ms；

（2）选中“State2—环2-图”,设置degrees旋转角度为10，Direction方向设为Clockwise顺时针方向，Animate设为ease in cubic,时长设为360ms；

（3）选中“State2—环3-图”,设置degrees旋转角度为10，Direction方向设为CounterClockwise逆时针方向，Animate设为ease in cubic,时长设为360ms；

（4）选中“State2—环4-图”,设置degrees旋转角度为10，Direction方向设为Clockwise顺时针方向，Animate设为ease in cubic,时长设为360ms；

如图21：

【图21】

再在右侧设置State3下的图片的旋转：

（1）选中“State3—环1-图”,设置degrees旋转角度为10，Direction方向设为Clockwise顺时针方向，Animate设为ease out cubic,时长设为600ms；

（2）选中“State3—环2-图”,设置degrees旋转角度为12，Direction方向设为CounterClockwise逆时针方向，Animate设为ease out cubic,时长设为600ms；

（3）选中“State3—环3-图”,设置degrees旋转角度为15，Direction方向设为Clockwise顺时针方向，Animate设为ease out cubic,时长设为600ms；

（4）选中“State3—环4-图”,设置degrees旋转角度为15，Direction方向设为CounterClockwise逆时针方向，Animate设为ease out cubic,时长设为600ms；

如图22：

【图22】

【3.5】为第二组OnSwipeUp事件添加“Set State设置动态面板状态”和“改变全局变量值两个动作”

（3.5.1）在左侧选择并点击添加Set Panel State动作，在右侧选择“切换背景图组”动态面板，然后设置Select state为State3，动画方式设为fade，时长设为600ms。

【图23】

（3.5.2）在左侧再添加一个Set Variable Value动作，在右侧选中全局变量StateNo，设定值为3。也就是在第一次切换动效后，全局变量值由2改为3，表示当前状态已经切换到了State3。如图24：

【图24】

再运行一下原型看看效果。State3的图片又错位了。参考前面的方法，改变State3里的图片初始角度，来抵消后来的旋转动作带来的角度变化。

【3.6】

双击动态面板“切换背景图组”下的State2进入，选中“State3—环1-图”，将旋转值设为350°（即-10°）；

选中“State3—环2-图”，将旋转值设为12°；

选中“State3—环3-图”，将旋转值设为345°（即-15°）；

选中“State3—环4-图”，将旋转值设为15°；

如图25所示：

【图25】

此时向上滑动切换到State2、State3的转场动效已经制作完成。那么如果要制作向下滑动往回切换回State2、State1的转场动效又如何制作呢？其实原理步骤方法基本是相似的。只不过要把动作添加在OnSwipeDown事件之上。这一块可以留给大家练习哈~。