sketch自动布局插件套装Anima Toolkit

Anima Toolkit是一套sketch的插件工具包，这套插件包含了Auto-Layout、Launchpad和Timeline，这里主要介绍Auto-Layout插件。这款插件提供了自动布局的功能，虽然sketch新版本已经提供了Resizing功能，不过这款插件还是有其优势的，大家可以试试。

功能介绍：

功能1：Pin 定位销

就是固定间距的功能，让边锁定在一个位置。也是Sketch Resizing的主要功能，AL或许更方便，但效果其实差别不大，区别在于AL更偏主动响应，Resizing更适合被动自适应。有些时候还是要用Resizing的，互补，如果可以优先用Resizing。

百分比感觉很牛逼是不是，其实自带的resizing也支持百分比，默认状态下也就是不设置Pin的时候。内部元素拉伸是按照比例来的，只不过不止间距，宽高也按比例拉伸了。

定位功能基于父级容器的，简单的说就是上一级的组或Symbol，边界和百分比的基数也是。当指定了数值后，布局会自动发生变化。之后也可以移动，数值也会自动实时发生变化（这和Resizing一样）。需要时可以设置为百分比，记得切换。

注：Sketch的默认情况下子层的宽高是固定比例的，所以会随着父级拉伸而被拉伸。要定位元素需要先锁定宽高。

功能2：宽高设置

没错，这个功能Resizing也有，就是固定宽高。AL可以额外设置最大、最小值。和Resizing的不一样的是，这个的宽高锁定是绝对的。

刚才提到过，自带的resizing默认状态下宽高就是固定比例的，只不过没有数值而已

百分比也是以父级为参照的。最大值和最小值，在不打开启用开关时也生效，只能是像素值。

在symbol中，AL的宽高固定是绝对的，这有好有坏。不过这导致有时候必须用Resizing的宽高设置，需要灵活选择。

功能3：居中

这个功能就只是对单个层的在组内的居中操作，不是对齐功能。还可以设置偏移值。

是的，居中也是以父级为参照空间的。偏移值正值向右偏移，负值向左，只能是像素值。

一键清空

上面提到的三个功能可以通过这个按键，对图层所有设置一键删除。

功能4：对齐工具Stack

这个怎么翻译呢，直译叫堆栈，还是用英文名吧。是一种特殊的图层组，主要是子层元素布局操控，也就是对齐方式。除了对齐，对子层还有特殊效果。

基础的排列对齐功能不用多讲，两种操作方式，多选图层（包括组层），新建stack组。或者选择一个组，转化成stack组。

讲下塌陷Collapsing功能，这个功能一般时候开不开都一样。它是针对嵌套的symbol用的，当symbol里的中间条目选择隐藏时，启用塌陷可以让子层重新排列。

还有一个配套resize symbol的功能，很实用。只有一种情况，这个开关会出现，就是symbol画板中只有一个stack 组时。这个功能是让symbol自动匹配stack 组尺寸的。

resize symbol可能是个新的功能，有个很大的缺陷，就是一旦勾选了Resize Symbol，这个Symbol的子层就不具备被动响应能力了，也就是宽高被固定了。用之前要清楚这个问题，某些时候不得不放弃使用，很多时候是默认勾上的。只能说等待官方修复这个问题，anima的更新频率还是很高的。

stack组的子层会有个附带效果，比例锁定会在子层生效（包括组合symbol）。

功能5：自动填充padding

这个功能更新也就近几个月的事，为了解决无法和Paddy兼容，AL自己做了这个功能。当然，支持嵌套symbol。

没有这个功能时，做填充也是可以的，但是比较麻烦，效果也有局限。

说白了，这个功能就是操控组内最底子层形状的宽高，从而组的宽高也发生变化。

padding的嵌套目前也是有局限性的，相比而言完成度是最高的，具体在后面实例中说。

使用教程：

功能1：Pin 定位销

就是固定间距的功能，让边锁定在一个位置。也是Sketch Resizing的主要功能，AL或许更方便，但效果其实差别不大，区别在于AL更偏主动响应，Resizing更适合被动自适应。有些时候还是要用Resizing的，互补，如果可以优先用Resizing。

百分比感觉很牛逼是不是，其实自带的resizing也支持百分比，默认状态下也就是不设置Pin的时候。内部元素拉伸是按照比例来的，只不过不止间距，宽高也按比例拉伸了。

定位功能基于父级容器的，简单的说就是上一级的组或Symbol，边界和百分比的基数也是。当指定了数值后，布局会自动发生变化。之后也可以移动，数值也会自动实时发生变化（这和Resizing一样）。需要时可以设置为百分比，记得切换。

注：Sketch的默认情况下子层的宽高是固定比例的，所以会随着父级拉伸而被拉伸。要定位元素需要先锁定宽高。

功能2：宽高设置

没错，这个功能Resizing也有，就是固定宽高。AL可以额外设置最大、最小值。和Resizing的不一样的是，这个的宽高锁定是绝对的。

刚才提到过，自带的resizing默认状态下宽高就是固定比例的，只不过没有数值而已

百分比也是以父级为参照的。最大值和最小值，在不打开启用开关时也生效，只能是像素值。

在symbol中，AL的宽高固定是绝对的，这有好有坏。不过这导致有时候必须用Resizing的宽高设置，需要灵活选择。

功能3：居中

这个功能就只是对单个层的在组内的居中操作，不是对齐功能。还可以设置偏移值。

是的，居中也是以父级为参照空间的。偏移值正值向右偏移，负值向左，只能是像素值。

一键清空

上面提到的三个功能可以通过这个按键，对图层所有设置一键删除。

功能4：对齐工具Stack

这个怎么翻译呢，直译叫堆栈，还是用英文名吧。是一种特殊的图层组，主要是子层元素布局操控，也就是对齐方式。除了对齐，对子层还有特殊效果。

基础的排列对齐功能不用多讲，两种操作方式，多选图层（包括组层），新建stack组。或者选择一个组，转化成stack组。

讲下塌陷Collapsing功能，这个功能一般时候开不开都一样。它是针对嵌套的symbol用的，当symbol里的中间条目选择隐藏时，启用塌陷可以让子层重新排列。

还有一个配套resize symbol的功能，很实用。只有一种情况，这个开关会出现，就是symbol画板中只有一个stack 组时。这个功能是让symbol自动匹配stack 组尺寸的。

resize symbol可能是个新的功能，有个很大的缺陷，就是一旦勾选了Resize Symbol，这个Symbol的子层就不具备被动响应能力了，也就是宽高被固定了。用之前要清楚这个问题，某些时候不得不放弃使用，很多时候是默认勾上的。只能说等待官方修复这个问题，anima的更新频率还是很高的。

stack组的子层会有个附带效果，比例锁定会在子层生效（包括组合symbol）。

功能5：自动填充padding

这个功能更新也就近几个月的事，为了解决无法和Paddy兼容，AL自己做了这个功能。当然，支持嵌套symbol。

没有这个功能时，做填充也是可以的，但是比较麻烦，效果也有局限。

说白了，这个功能就是操控组内最底子层形状的宽高，从而组的宽高也发生变化。

padding的嵌套目前也是有局限性的，相比而言完成度是最高的，具体在后面实例中说。