Axure制作视觉差顶部搜索栏

自定义一个顶部搜索栏。如下图所示，当鼠标往上缓慢拖动时，搜索框宽度缓慢变窄，并且缓慢垂直上移；同时，“发现”两个字，慢慢地往顶部中心收缩直至消失。当鼠标往下缓慢拖动时，搜索框和“发现”都相反变化。

当鼠标快速往上拉或者往下拉时，对应变化如下：

此处的难点在于如何让“搜索”元件和“发现”图片随着鼠标移动而变化，这里需要进行计算：

设置鼠标向上拖动和向下拖动的距离为0~-30，搜索栏初始的尺寸：（304，33），坐标（36，63）；最终的尺寸：（200，33），坐标（100，15）。也就是拖动距离30这段过程，尺寸的宽度变化为104，高度变化为0。坐标的x轴变化64，y轴变化48。为了更好地设计，我们还增加了一个隐藏矩形作为触发事件。

交互：

（1）动态面板的事件交互

（2）隐藏矩形的事件交互