容器组件简介（Beta版本，谨慎商用）

一、容器组件可以做什么

1、在编辑器操作层面，可以将多个元素打组进行整体拖动，方便做模块化的功能；

2、在功能层面，容器内的元素，可以作为一个整体添加动画、整体旋转、设置透明度、添加整体触发、设置可拖动、设置支持双指缩放；容器外的其他元素可以对容器本身或容器内元素做触发设置。

除了以上两点，也欢迎大家尝试新的玩法。

二、如何使用

1.点击高级组件，找到最下的容器组件，点击添加到页面中。       

2.添加后的容器组件内没有任何元素，在左侧图层面板，会显示一个文件夹标志，表示容器。

3.容器被激活，容器边框变成橙色。可以添加元素到容器中，激活方式为鼠标左键连续双击或者点击编辑标志。

激活后的容器

4.把页面中的其他元素添加到容器中，有2种方式。

（1）方式一：容器激活后，可以直接点击组件到容器中。

（2）方式二：无论容器激活与否，我们都可在左侧的图层面板，拖动元素至容器组件中，具体操作见下方GIF图，垂直拖动即可，当图层面板出现橙色线条，即表示可拖动至或拖出容器。

5.如果需要调整容器内的元素，2种方法：

（1）容器组件激活后。

• 直接点击容器内的单个元素进行拖动；

• 按住键盘上的shift键，可以点击选择容器内多个元素，进行拖动、对齐等操作，跟平时在画布中操作一致。

（2）也可以在左侧图层面板，找到想要操作的元素，点击小手标志        ，选中元素，进行拖动、对齐等操作。

6.给容器添加一个旋转动画，容器内的元素跟随容器一起执行该动画。

7.容器内的元素可触发容器外元素动画，这个功能跟layer容器的子元素触发器类似。

但容器组件比layer容器高级的一点是，容器外的元素可以触发容器内的元素。

如下图：容器外的按钮点击时触发容器内的段落逐字出现动画。

8.选择触发对象的时候，我们可以自由的选择容器内外的元素。

 9.动画时序管理面板会显示容器内、外的所有动画。容器内的元素、容器外的元素、容器本身的动画都会显示在动画时序管理面板。可以内外自由控制。

 10.容器的尺寸范围小于容器内的元素分布范围时，可以选择裁切容器，方便拖动调整，暂时不支持可滑动，可以在留言区列举下你所需要的场景哦。

11.容器其他触发用法。给容器设置点击时的触发，可以触发容器中的元素做触发行为

12.或者给容器中的元素设置触发，可以触发容器中的另外一个元素

三、如何设置可拖拽移动和双指缩放

在右侧面板可单独勾选“拖拽移动”和“双指缩放”，双指缩放还支持缩放的倍数，可设置 10% - 500% 的缩放范围限制，更方便大家实现手绘地图的移动、缩放和坐标点位的触发。

关于容器组件的更多神操作，等你来开启～