3.Layer容器/Layer

老赵发表于:2015年01月03日 20:44:28更新于:2018年01月31日 12:10:11

Layer容器 / Layer


无广告视频教程

layer容器&layer幻灯

Layer内的元素可以互相触发控制,本身和页面的逻辑割裂不能相互控制。但是可以控制Masterpage和Background 的元素,也可以跳转页面。

因此Layer可以拿来做部分区域的长页面滑动浏览,也可以用来模拟目录、模拟聊天界面、模拟镜头移动等。

blob.png  blob.png

1、Page

blob.png

2、Layer(需要结合Layer容器)


blob.pngblob.png

传送门

3.MasterPage

Masterpage,有人称之为母版。里面的元素可以在所有页面中显示。(当然也可以选择不显示)因此可以放置背景音乐、全局参数之类的东西在里面。


注意事项:

GIF较大,建议对图片右键单击,在新标签页中打开图片查看(这是竖长图的Layer)

00156790283e05d51fb0bb69609e518

有几个需要注意的点再提一下:

Layer的画布尺寸需要调整,一般不能用默认的;起码要比Layer容器的长才可以滑动浏览

Layer的画布和Layer容器都是可以调整大小的!

如果希望通过手势滑动到底能触发翻页,则Layer容器的宽度必须要与Layer画布相等!

若需要制作滑动横长图,则将上述的文字中的“长”替换成“宽”。

添加Layer到Layer容器后可以双击进行拖动,决定初始显示区域。


Layer容器支持重力感应。

Layer页面内的元素只能由layer页内的元素进行触发控制。

如果有多个Layer页面的联动,前面的Layer要比后面的Layer长(或宽)才可以触发滑动到底的翻页。

Q&A:

Q:为什么layer放在页面中不能滑动
A:Layer添加在画布后,一般需要调整其尺寸,layer在页面中的尺寸起码要比Layer容器本身短才可以滑动浏

Q:为什么我已经设置了Layer大于Layer容器的尺寸还是无法滑动?

A:请确认是否在添加了页面触发器,如若添加建议删掉试试。

Q:我想让layer在页面中最开始显示的是最下面的画面(即由下往上滑动),该如何调整?
A:在页面中双击layer,然后拖动到合适的位置(图片的最下面)

静态图文教程戳这儿

--------- 不了解设计的程序员不是好客服 ---------------

回复(5)

  • 老赵

    配合锚点组件  

    引用 中国牛人设计 的回复:

    layer容器里怎么实现页面滑动到元素的位置元素才触发动效,并且出现动效?

    --------- 不了解设计的程序员不是好客服 ---------------
  • 中国牛人设计

    layer容器里怎么实现页面滑动到元素的位置元素才触发动效,并且出现动效?

  • 老赵

    关键点有两个:


    1)layer页面制作时,宽度按实际宽度、要求容纳所有图片,比如可能到2000px

    2)画布中的layer容器组件,宽度不超过画布尺寸,比如 320px

    引用 威思创 的回复:

    横向如何滑动

    --------- 不了解设计的程序员不是好客服 ---------------
  • 威思创

    横向如何滑动

  • AWEI

    细致!