【炫技帖】模拟用户中心下拉时背景放大效果

这是一个赤裸裸炫技的帖子，*_^，结合常见社交应用的用户中心里的下拉效果，晒一下如何通过axure来实现，炫的最终目的也就是提高使用axure的技能。

如果你不知道这个功能，你可以打开新浪微博手机客户端，或者手机淘宝客户端，进入用户中心，下拉一下试试。

要炫的技能点如下：

1、如何将整体视图居中设置

2、如何通过设置动态面板的背景来缩放图片

3、如何使用自定义全局变量和局部变量

开始。

一、如何将整体视图居中设置

如果你设计的原型图是固定大小，比如400像素宽的，但你想在不同分辨率的电脑上演示时，原型在浏览器里是居中显示的，而且随着窗口的大小改变要始终保持在界面中间，要如何实现呢？例如下图你肯定希望它能像右边那边居中显示

1、将原型所有元素转成动态面板，起名main，便于后面移动它

2、给页面加载和窗口大小改变事件添加代码，如下：

3、代码分析

其实就是在页面加载时，以及窗口改变大小时，移动动态面板main到屏幕中央位置即可。

这里注意局部变量的使用，局部变量设置为部件main，这样可以在上面的

位置计算：就是当前屏幕的宽带送去动态面板的宽度，再除以2，就是居中的x位置。

二、如何通过设置动态面板的背景来缩放图片

动态面板有个背景设置的功能，背景可以以完全填充，或者平铺等方式设置，当动态面板大小发生变化时，背景图片会自动处理。这可以让我们用它来缩放图片处理，正常的手法来缩放图片还不好处理呢。

注意在这里设置“重复”为“拉伸以覆盖”，设置完后，你可以试着改变动态面板的大小。

三、如何使用自定义全局变量和局部变量

好了，现在开始实现下拉缩放效果

1、准备环境：添加个手机界面样式，转成动态面板main，然后按第一点，给页面添加加载和改变大小事件

2、在main里添加个动态面板，取名header，双击后进入，设置它的背景，按上面第二点说的

3、关键的地方来了，给动态面板添加拖动事件

事件说明：

1）用例3：在动态面板宽度小于450时，设置动态面板为原大小，即不要改变了

2）用例1：当前光标大于历史的光标的y位置，则改变动态面板大小的宽带和高度，分别增加3个像素，然后把动态面板header移动到居中位置，最后保存当前光标的y坐标，便于比较

3）用例2：其实就是用例1的反向操作，用例1和用例2是用来模拟鼠标按下后向下或向上拖动时的缩放操作。

4）这里的oldY是全局变量，LVAR1在每个用例里是局部变量

另注意点：为了防止入缩的图片自动调整动态面板大小，设置一下动态面板main的“调整大小以适合内容”为非勾选状态。

查看在线演示

下载源文件