图文
文档
H5
设计
APP
朋友们，大家好啊
昨天的“三折叠”做到了大家心尖尖上
接着你们就催起了加更模式！！！
↓↓早知如此，我不应该觉得↓↓
子组件透视效果更新有点小
就不单独推送了
所以，我们还是来正式介绍下
子组件透视效果功能
以及大家想要的三折叠svg
子组件透视效果在哪里？
选中带有布局结构的组件，点击组件定位→3D设置，最底部有一行子组件透视效果开启的按钮：
子组件透视效果，需要组件本身先套一层布局结构。这是重点！纯文字、图片是没有这个设置的！请注意！
那如何做出透视效果、三折叠效果呢，就需要结合3D设置剩下的参数来完成。
如何把组件做出透视效果
以这个组件为示例，来简要说明下常用做法。
选中组件，点击工具条上组件定位→3D设置→Y轴旋转设置25：
然后，把这个组件再套一层布局结构，给这个布局开启【子组件透视效果】参数，这样，就从圆角矩形零件变成了带有透视效果的零件了：
同样的，这个SPORTS也是如此做法：
SPORTS
SPORTS所在布局设置X轴旋转、Z轴偏移，然后再给它套一层布局，布局开启子组件透视效果，就好了：
三折叠，怎么拼出来？
三折叠，是用了三列布局。然后需要放进去图片。
然后通过3D设置，调整出合适的X轴、Y轴旋转数值；再套进布局设置子组件透视效果，就完成了。
#1 添加三列布局
设置布局宽度自伸缩均100
从左边布局→基础布局，添加一个三等列布局，到编辑区；设置布局宽度为自伸缩，100：
#2 将图片效果
做出来
添加一个布局，背景色为rgb(255,255,255)，四周边距9，添加图片#49078，放进布局里。
组件定位中组前距、组后距设为0，图片裁剪比例为187*249，图片增强中亮度0，对比度85：
再添加一个布局，设置背景色为linear-gradient(0deg,rgb(255, 242, 142) 0%, rgb(111, 207, 255) 99%)，四周边距2，将刚刚单图布局拖进去：
把这个图片布局复制一个，添加到剩下的两个空布局里，可以点击裁剪，调整下图片区域；换图也行。
#3 做出三折叠效果
选中左右两边的渐变布局，设置组件定位→3D设置→Y轴旋转，数值3，中间渐变布局，Y轴旋转输入357：
然后，选中最外面的三等列布局，点击组件定位→3D设置，开启子组件透视效果，做出三折叠图片的雏形：
然后，可以打开编辑辅助，选中三等列中间布局，去调整下边距，数值可以自己调整，让三折叠看起来更丝滑一点：
#4 延伸知识~
单纯的三折叠拼图效果
添加一个三等布局到编辑区，设置布局宽度为固定像素，110px：
往布局中拖入三张图片，设置图片的组前距、组后距为0，大致这样：
然后给两边的图片，在组件定位→3D设置→Y轴旋转设置数值3，中间图片Y轴旋转数值设置357：
然后，再选择三列布局，开启子组件透视效果：
最后，再选择中间布局，调整下它的外边距，让三列布局中间的间距一致或贴合在一起：
最后效果：
三折叠svg，怎么玩
三折叠svg，我试了试跟图集轮播集合起来，比如下面几个：
做法呢，其实也很简单，主要是SVG图集的图片摆放顺序，三折叠做法是跟第三块内容一模一样的。
SVG图集中图片摆放顺序如下：第一个SVG图集序列图片以1234为顺序，第二个SVG图集序列以4123为顺序，第三个SVG图集序列以3412为顺序：
这样，把图片放进SVG图集里，再设置滚动、自动触发、时长0.1s、延迟0.1s、循环、方向左右两边的SVG图集设为向上，中间SVG图集向下：
就可以得出这样的三折叠：
应该挺好理解的小结~
子组件透视效果，需要组件本身先套一层布局结构。纯文字、图片是没有这个设置的！请注意！
子组件透视效果，可以结合3D设置中的其他参数做出带有立体视觉效果的模板。
好啦~
以上就是今天的全部内容
如果还想要新效果、新模板
直接在推文下面留言说
有缘就做
就这样~下次新功能再见
更多阅读
☚☚☚ 向左滑动
秀米有那么多骚技能
不来学几招？
长按扫码关注我们
