【玩机帖】KLWP使用技巧——09侧栏（上）

网瘾少年鲨某人

侧栏本质就是整合实用的功能和信息提示，很多大佬的作品也常见此类设计，本人认为这也是美观和实用兼具的一个典型，如图：





本帖就教大家做一个动画控制的侧栏底版，然后再追加一个实操帖，以实际例子带大家更好地了解。


首先在主页设置一个形状：





为了考虑到不同手机的尺寸，此处将设为侧栏底板的矩形长宽就不能设置简单的数字。高度度设为一整个屏幕高度，宽度设为1/5个屏幕宽度。


进入矩形的形状设置界面，先来设置高度，进入高度的公式编辑





进入编辑，找到si系统信息





在里面选取“根容器的高度”





宽度个人觉得屏幕的1/5到1/6比较合适，（现在手机的根容器高度基本都是720，设置宽度就直接填数字即可，没必要再套公式）


然后在矩形的“位置”选项里找到“锚”，设为“中心右”





图层里带一个背景虚化





带点模糊度和暗淡（两个数值设置为20左右差不多了）


添加一个动画，条件设为背景淡出，条件设为屏幕1（意为只有在第一页屏幕会出现）





这样底板就设置好了，看下效果





效果还行，之后会以此为模板实战演示一波

网瘾少年鲨某人

侧栏本质就是整合实用的功能和信息提示，很多大佬的作品也常见此类设计，本人认为这也是美观和实用兼具的一个典型，如图：





本帖就教大家做一个动画控制的侧栏底版，然后再追加一个实操帖，以实际例子带大家更好地了解。


首先在主页设置一个形状：





为了考虑到不同手机的尺寸，此处将设为侧栏底板的矩形长宽就不能设置简单的数字。高度度设为一整个屏幕高度，宽度设为1/5个屏幕宽度。


进入矩形的形状设置界面，先来设置高度，进入高度的公式编辑





进入编辑，找到si系统信息





在里面选取“根容器的高度”





宽度个人觉得屏幕的1/5到1/6比较合适，（现在手机的根容器高度基本都是720，设置宽度就直接填数字即可，没必要再套公式）


然后在矩形的“位置”选项里找到“锚”，设为“中心右”





图层里带一个背景虚化





带点模糊度和暗淡（两个数值设置为20左右差不多了）


添加一个动画，条件设为背景淡出，条件设为屏幕1（意为只有在第一页屏幕会出现）





这样底板就设置好了，看下效果





效果还行，之后会以此为模板实战演示一波