Axure RP 7.0 基础教程 （4）复合构件和动效

在这一期课程中，我们再来讲一些特殊的构件...



特别通知：Jemmy(隔壁老王)的QQ已经开通，QQ号码：26739785，大家对于课上的知识点有什么疑问，可以加老王的QQ号进行询问（仅限于达内学员，包括训练营期间学员），好友名额有限，先到先得！！！

上期课程中，我们讲了关于联动和更多的其他动效，在这一期课程中，我们再来讲一些特殊的构件：

1.热区（Hot Spot）

热区，简单理解为一种图块，但这种图块像玻璃一样，看不见，但摸得着。同样，热区也存在显隐特性，热区的“显示”指的是存在，“隐藏”则指的是消失，这也与大多数构件相同。

我们可以用热区做一个我们做了很久的案例：



首先，还是先做一个球和一个按钮。同时，再做一个大小和按钮差不多的热区。如图：



接下来，在按钮的鼠标单击动作上这么设置：



然后，在热区的鼠标单击动作上这么设置（设置完毕后，将热区设为隐藏并覆盖在按钮上）：



这里不难看出，由于是不同对象，所以不用考虑动作的先后执行问题。如果插入了补帧动画（如：线性,300ms），效果就跟刚刚我们演示的一样了。但是，这里要说的是，热区如果处于“显示”，它会跟普通的块一样，我们直接会碰触到，但处于隐藏，也和隐藏的普通块一样，我们碰不到。

2.动态面板（Dynamic Panel）

动态面板这种部件其实是比较难理解的，因为它的存在非常特殊，它属于画布里的一个构件，但它本身也是一个画布。这怎么理解呢？



首先，我们在画布中放入一个动态面板（我们以后可能很少用到直接放入动态面板的方式），在这里我们发现，动态面板的特性和刚刚说的热区有点像，也是看不见、摸得着的。而且我们发现，在动态面板上的鼠标动作特别多，还有很多动作完全是手机APP中使用的动作：





这也意味着，我们在做APP产品DEMO的时候，将会相当频繁地用到动态面板。在下期课程的综合案例里面，我们会频繁的用到动态面板

接下来，我们双击这个动态面板，就打开动态面板状态管理器的面板，如图：



这个状态管理器中，有一个State1，也就是状态1的意思，一个动态面板里面可以添加多个状态，但这里并不是我们基础课程的内容，因此先不多做赘述。

我们双击State1，进入状态1中，这时我们发现似乎回到了画布，但仔细看一下，其实并没有，因为这里的动态面板外观变得有些诡异了（蓝色虚线框）。其实，从文件选项卡中不难看出，我们现在其实是进入到了动态面板内部了。



这时候，我们随便拖拽一个块到画布里，可以把块放在动态面板的边线上，如图：



接下来，我们切换回Home画布，这时我们发现，这个被放到动态面板画布里的图块只剩下之前在蓝色框线里面的部分了。



但当我们想要选中那半个块的时候，我们只能选中动态面板，也就是说，我们在Home画布下看到的那个块，实际上是放在动态面板里的。而且，拓展一下思路，我们不难理解，这个置于动态面板里的块，它的绝对坐标也是在动态面板State1里的画布里的坐标。

那么，我们就直接将动态面板理解为一个很特殊的“盒子”，盒子里面能放很多东西，但我们能看到的只有出现在盒子“口”里的东西。



那么，借用这个原理，我们可以做一下这个效果：



做法很简单，首先先做一个蓝色的长条（起个名字，如block），然后右击→转换为动态面板（所以我刚才说了，很少直接将动态面板直接放在画布里，多数是把原有的块转成动态面板）。



其实，与其说是把块转换成动态面板，不如说是给这个块外面套一层动态面板来的贴切。转换完以后，再次右击，把“调整大小以适合形状”前面的对勾关掉（每次都这么做，养成习惯）。



然后，将State1里的那个蓝色块水平向右移动到只漏出一小部分的位置。
接下来我们就可以在这个动态面板上设置动效了：

鼠标移入：

1.移动block到绝对坐标(0,0)，线性200ms；

2.移动block到绝对坐标(340,0)，线性200ms（这个坐标是进入动态面板State1里查的）。

这时候，就出现了这个动效：



最后，再把这个动态面板复制多个，就可以了。

这一期课程就先到这里，下一期我们将使用这四期课程所讲的内容做一个综合案例。

扫描或长按下面的二维码，关注隔壁老王的公众号：↓↓↓

    关注 Jemmy的设计课堂