而我在亲自使 Anima 这款工具小半年后，开始意识到它是款真正优秀提效工具，并效立竿见影。尤其是 Stack（堆栈）这个功能，毫不夸张地讲，用“逆天”形容丝毫不为过。它能真正地将你页内容以动态布局工作，从而实现与 css Flexbox 类似布局效。
前醒，Anima 在国相的章多，很多名词未查证到专的中术语，大量名词我直接英来讲述，过我都会给清晰的解释~
大纲：
- 于 Anima
- Padding 内间距
- Pin 固
- Stack 堆栈
- Anima 局限性
- 最后
Anima（跟我念，ai ni me，不是阿尼玛）产品的主打功能有两个，一个是在的响应式原型，我们完成设计稿用浏览器以的预览，而且以手动添加各种逼的互动画；另一个正官网所说的样“让设计与开归统一”，帮助开者在设计稿上一键获取代码（emmmmm，大概类似蓝湖和 zeplin 样的高效协平台）。
但是！！
Anima 另个功能 auto-layout 我绝要下。虽然不知为什么官网没有半它介绍和宣传。。
auto-layout 要包含个功，padding、pin 和 stack，我简单翻译为间距、固定和堆栈。
前 2 个是不是熟悉？没错，sketch 里自带，过 Anima 创建的过程变得更简单和效。最后的堆栈放到了最后压轴讲，因为这是个惊艳全场的功。
padding 对标 sketch 中的智布，我在组件态自适应这一篇有讲到。智布要解决的是组件自适应问题，它可将我们制作好的组件尺寸基于一类规则，跟随容的变而态适应。
但是 Anima，它有什资格抢别人碗呢？
还真。
简单演示下它的 padding 功能。你以切换 padding 的位置选项来现不同位置的数值输。
而且 padding 只是图编组的程，它对图不产生破坏，我们依旧以对文字和容器进行任意编辑。
Anima 创文本后需组件化，键 padding 即可生成，而 padding 提供数值输入，需自己手动测量。如想要去除 padding 效接解组即可，常快捷便。
但是，无需组件的同时为它的复性埋了隐患。
后面尝将 padding 后的对象创建成 symbol 组件，适应上没有任何问题，但是在进行拉伸适配理是没有效果的，这也就味着它在响应式上和 symbol 无法兼容。
所以，我建议界面设中的自应依然使用 sketch 自的智能布局。Anima 的 padding 并非不能用，只不合用响应。
Anima 的 pins 除了本身 sktech 自的“pin to edge”“fix size”之外，还提供了其他额外新增的功能。具体见我面板中标的置。
1. 固定水或垂直居中
字面思好理解，在跟随父响应始终保持水或者垂直方向的居中。
2. 数值的边缘间距
sketch 自带的固定边缘功只择向哪个方向固定，具体数值需要自己手测量。
但是 Anima 提供了更加可控、便捷的数值功能，你只要输入数值即可迅速控制素的位置。
且它还提供分比的形式，即元素内间距占父级总尺寸的。
3. 数值化的固定尺寸
这直结上个例固定了左上边缘，勾选后默认取值对象本身尺寸。跟随响应始终保持尺寸的固定。
当然也可以输入固定数值，同支持百比。另外，尺寸后的 min 和 max 别代表了响应过程中素尺寸最值和最大值，更加可控了。
4. 距离中心的偏移量
至于距离中心的偏移量，就是将对象基于中心某个方向偏移一距离。
比如在勾选水+垂直居中后，水和垂直方向的偏移量就是 0。
如果基于 C 向某方向偏移，那就对应的方向输入数即可（右方数，左下方负数）
终于，了的 Stack！为什要把它放最后讲，就像开头说的那，这个功能极为逆。
官网文档明中 Stacks 标题后面括弧了一 Flexbox，这也就意这功能可以达到端 CSS 中的 Flexbox 效果。
文档里把 Stack 定义为：
A Stack is a special type of Group that defines the layout of its child Layers.
我简单翻译下，就是堆栈个东西是编组的一种特殊类型，它定义子级图的局。
看也是懵懂，我上个动画便于各位观 get 到它逆天处。
真是太、逆、天、了。请允许我多这么形容。
面我会先简单讲 stack 可控制的外属性，而 stack 自身的核心属性放在了最后。
1. Stack 的创建
创建 stack 相当简单，只需要中你想要控制的元素，一键点击右侧 icon（group to a stack）即成了创建。取消 stack 的操作和上面的 padding、pin 一样，直接 ungroup 解组即可。
创建后，它会动基于目前图层的排列动按某个方向堆栈并且对齐，同动保持 spacing 间距的一致。
2. Direction 堆栈方向
定义元素们列的方向是水平还是垂直，对应在面中是 direction 这个功。
3. Align 齐
Anima 提供了四元素齐，分是 Top（顶齐）、Center（居齐）、Bottom（底齐）和 Spread（等宽齐，即过伸强使元素尺寸保持致）。应在板是 Align 功能。
4. Spacing 间距
即定义元素的间距，对应在面板中是 spacing 个输框。
5. Stack
Stack 自身的内部属性 Flexbox 布局的核精髓所。什么内部属性，就因这属性属于本身固的属性，它不会面的那些外部属性那样可以手动控制。
简单来说，stack 能够基既定的 Spacing，现所有（注意是所有）元素局的自适应。是什么概念？
大家 Word 应该都用过，我们在稿子插入段文后，后文会自动折，删除这段文后，下文又会上回到刚刚空。这是文本编辑固有属性，所有笔记类应用也是这样。
如这两段文分属于独立图层，那会常麻烦。
假设我们需要保持一致的间距。那你得先将方字移一合适的距离，然后拷贝上方字，编辑、移，然后再手或者通过 Tidy（整）功保持间距的一致。
是是跟产突然要求你在页面中字的场景很像？低效而无奈，尤在我们 B 类产复杂的后台表单页，字的影响范围一旦很广会异麻烦，当时都恨得扒了产一层。
但 Stack 解决的就是这个！！
比如，我们给下面三色块加入 stack 后，删除中间的色卡，下方色块会基于给的 spacing 自动补。
另外，也可以随意调整、颠倒图层的顺序，它们的 spacing 始终也固的。
这些被赋予 stack 属性的图层仿佛了自己的命力，可以自己动，不需我们再去手动预。
我以毫不夸地讲，拥有 Stack，你就以告别因增减、序而导致间距整的低效重复工。（怎么感像打告。。）
6. Collapsing 塌陷
（原谅我想不到其他更合适的翻译。。）
Collapsing 听起来逼格高，实则很简单。没有激活它时，Stack 删除个图层才能起到距自适应效，是有了 Collapsing，我们要隐藏图层即可样实现效。
我通建议是开启的，避免“改了十几稿，还是初稿”，但你初稿早已再的的人间惨剧发生。
7. Stack 的嵌套
Stack 支持嵌套来应对那些较为复杂的版和页面。
拿一开始的那个例说。通过将行卡片 Stack 化，来保持每个卡片的间距保持 12px。这属于右内向外的第一层。
同希望这些卡片不论大、数量，整体的宽度始终保持固定，并且卡片的行间距保持 12px。那需要再次将刚刚的个 Stack 嵌套成一个更大的 Stack，通过 spacing 和等宽的 Align 来实现。
体参数见下。
简的步，就可以达上述的效果。
当然，可以结 pins 来实现更多的目的。比如希望内容的总宽度和人物图片能够固定、边距能够固定、人物图片始终保持居中等等，都可以使用 Pins 中的属性来控制。这就不做演示了。各位有空可以去尝一波~
源文件 Anima 插件我打包好了，文末/即可下载
可惜的，目 Anima symbol 的兼性依旧问题，我搭建组件库时曾试图将两者结合一起，但动态自应响应式总会出各种各样的问题。所以，各使用到 symbol 时需谨慎使用。
但是，在组件的基础上进行页面的快速搭建时，或者在不涉及到组件的页面，我毫不犹豫地跟你推荐它！！
果说原子设计决的是一次设计问题，么 Anima 就是非常简单粗暴地快。它不需要任何的组件、不需要手动整间距、学习成也比 sketch 的智能局、弹局低得，不得不说，它给你带来的提效效果立竿见影。
我是 AndrewChen，下期见。
注作者微信公众号：「转行人的设计笔记」
浙公网安备33011002017549号