本教程使用素材可直接在此下载：
链接: https://pan.baidu.com/s/18EdaMM4IJZI4CbhvXSSEbw 提取码: 8mic
一、导入sketch/Adobe XDCC
目前Protopie仅支持导入sketch和Adobe XDCC（不会Adobe XDCC，所以下面只介绍sketch的了），也只支持一次导入单个页面，注意导入时候artboard的分辨率和场景选择的分辨率要相同。比如sketch的artboard面板是375*667，那么以下都选择@2x模式，但是sketch的artboard面板是750*1334，则右侧sketch导入时尺寸需要切成@1x。
场景及文件导入
当然，也可以直接将素材拖入画板，支持jpg格式复制粘贴，png格式不可直接复制粘贴。
二、容器滑页/滚页功能
导入所需素材后，整理图层顺序如下，banner图层覆盖在状态栏和页码之下：
图层顺序
将banner图横向排开，如图：
banner图横向排开
选中所有banner图，Command+G打组，命名为【banner】，将组的宽度定为375，高度不变。选中组后右侧属性出现，选择滑页，横向，弹跳。勾选剪切子层，即在屏幕显示区域只能看到容器内的内容。
容器属性
banner切换就是这么简单得完成了！点开预览窗口，可直接横向滑动图片了～
我是分割线
是不是总感觉只有可滑动功能怪怪的，对了！就是因为没有对应的当前图片所在位置的显示。
以下是扩展模块，教大家使用函数关联banner滑页
在页码区上方添加文本【1】和【/6】，因为有6张图片，调整好位置，图示如下：
在滑动过程中，有变化的只有当前页码项。打开变量区，新建一个仅适用于当前场景的变量，命名为bannerN（什么都可以啦）。
bannerN
将该数字与banner容器产生关联，选中banner容器，点击添加触发，选择联动，联动对象是banner容器，下面选择滚页；
联动
在此基础上，点击联动下面的加号，添加行为，选择赋值。右侧选择刚才创建的变量名称。
右侧对应的数值官方解释如下：
对应范围-触发图层 1
输入联动图层的动作范围。
对应范围-反应图层 2
输入被联动图层的动作范围。
联动解释
针对banner来说，将页面范围设置为0～1875（375*5），数值范围设置为1～6。
点开变量旁边的监听图标，可以在预览窗口上滑动查看到当前图片滑动已经与变量产生关联，但是，咦怎么回事，会有小数？因为滑动的范围与数字对应的也是一个范围，因此滑动过程的图片位移都有对应的数字。
变量
选中变量，添加触发->监听，监听的对象是该变量，对应做出变化的是文本，因此添加我们需要变化的文本1，将文本1 内容改为表达式，填入取整函数floor(bannerN)，这样我们显示出来的数就都会是整数了。
取整
到这就大功告成啦～赶快实际操作以下吧～
网友评论