版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012259618/article/details/82592623
自定义一个顶部搜索栏。如下图所示，当鼠标往上缓慢拖动时，搜索框宽度缓慢变窄，并且缓慢垂直上移；同时，“发现”两个字，慢慢地往顶部中心收缩直至消失。当鼠标往下缓慢拖动时，搜索框和“发现”都相反变化。
当鼠标快速往上拉或者往下拉时，对应变化如下：
此处的难点在于如何让“搜索”元件和“发现”图片随着鼠标移动而变化，这里需要进行计算：
设置鼠标向上拖动和向下拖动的距离为0~-30，搜索栏初始的尺寸：（304，33），坐标（36，63）；最终的尺寸：（200，33），坐标（100，15）。也就是拖动距离30这段过程，尺寸的宽度变化为104，高度变化为0。坐标的x轴变化64，y轴变化48。为了更好地设计，我们还增加了一个隐藏矩形作为触发事件。
交互：
（1）动态面板的事件交互
（2）隐藏矩形的事件交互
