Protopie教程(三)滚动视差效果

上节我们做了banner的滑页功能及页码函数关联，小伙伴们有木有好好练习呀

本节主要说一说跟手滑动的图片滚动视差效果是怎么一步步简单实现哒～

素材可直接在此下载：

链接: https://pan.baidu.com/s/18EdaMM4IJZI4CbhvXSSEbw 提取码: 8mic 

---

接着上次的文件，要做一个点击banner右下角页码处展开一个活动浏览窗口，滑动页面有视差效果。

添加bgglass图片作为背景，画一个320*530的矩形，命名为bg，居中，右上角放上关闭按钮图片close；导入banner图片，每张图片按照宽度320等比缩放，选中图片后command+G编组为容器，容器大小为320*150，图片居容器中间。依次将其余图片也编组变为容器，第一个容器距大矩形上边距为40px（375宽屏幕），竖向排列，并将这几个图片容器再打组，命名为banner，如下：

banner

准备工作做好了，开始设计交互动作！

首先添加页码点击效果，将bgglass的透明度设置为0，选中bannernumber整个大容器，添加触发手势【点击】，设置bgglass和banner浮层的透明度为0，【移动】暂时先不管：

选中banner容器后，选择【联动】，banner-滚页；

现在我们目标是想做一个视差滚动效果，意思就是，手滑动屏幕时，图片滚动的距离与手滑过的距离不同，有相对的偏差，进而让元素之间有了距离和深度。那么我们已经将滑动与容器滚页做了关联，剩下就是关联的距离和速度设置。

选中b1图，在联动下添加【移动】动作，选中移动，调整右侧数据，将banner的范围控制在0-100（因为单个图片容器高度为150，范围不可超过150，根据想要的滑动速度选择一个中间偏上的数值），b1的移动范围，x轴不懂，y轴由原先图片所在的位置-10移动到-38，-38是图片在容器中能可见的最大值。其余图片以此类推，均为各自容器内的相对位置-10移动到-38。

图片移动数值

最后我们需要点击按钮来关闭这个banner浮层，设置关闭按钮的【单击】手势，添加【移动】动作，希望的效果是整个banner活动集合页下落出界面（简单可只做渐隐效果），将banner浮层滑落的终点纵坐标设置为667，正好是屏幕外。动画效果可不做改动，采用默认效果，持续时间0.2s。

关闭浮层

背景的消失时间可稍晚些开始，将bgglass的透明度设置为0，延迟开始时间设置为0.1s，其余相同。

bgglass透明度

注意上面有一个点击bannernumber容器的移动操作，跟这里的关闭退出是对应的，要实现操作的循环，所以需要在初始加上移动到预定位置的操作。即在bannernumber的单击动作上加入【移动】动作，如下：

bannernumber移动

到这，效果基本就都做好啦，大家是不是都成功了呢～可以在网盘中下载教程protopie文件查看效果