sketch自動(dòng)布局插件套裝Anima Toolkit

Anima Toolkit是一套sketch的插件工具包，這套插件包含了Auto-Layout、Launchpad和Timeline，這里主要介紹Auto-Layout插件。這款插件提供了自動(dòng)布局的功能，雖然sketch新版本已經(jīng)提供了Resizing功能，不過這款插件還是有其優(yōu)勢的，大家可以試試。

功能介紹：

功能1：Pin 定位銷

就是固定間距的功能，讓邊鎖定在一個(gè)位置。也是Sketch Resizing的主要功能，AL或許更方便，但效果其實(shí)差別不大，區(qū)別在于AL更偏主動(dòng)響應(yīng)，Resizing更適合被動(dòng)自適應(yīng)。有些時(shí)候還是要用Resizing的，互補(bǔ)，如果可以優(yōu)先用Resizing。

百分比感覺很牛逼是不是，其實(shí)自帶的resizing也支持百分比，默認(rèn)狀態(tài)下也就是不設(shè)置Pin的時(shí)候。內(nèi)部元素拉伸是按照比例來的，只不過不止間距，寬高也按比例拉伸了。

定位功能基于父級(jí)容器的，簡單的說就是上一級(jí)的組或Symbol，邊界和百分比的基數(shù)也是。當(dāng)指定了數(shù)值后，布局會(huì)自動(dòng)發(fā)生變化。之后也可以移動(dòng)，數(shù)值也會(huì)自動(dòng)實(shí)時(shí)發(fā)生變化（這和Resizing一樣）。需要時(shí)可以設(shè)置為百分比，記得切換。

注：Sketch的默認(rèn)情況下子層的寬高是固定比例的，所以會(huì)隨著父級(jí)拉伸而被拉伸。要定位元素需要先鎖定寬高。

功能2：寬高設(shè)置

沒錯(cuò)，這個(gè)功能Resizing也有，就是固定寬高。AL可以額外設(shè)置最大、最小值。和Resizing的不一樣的是，這個(gè)的寬高鎖定是絕對(duì)的。

剛才提到過，自帶的resizing默認(rèn)狀態(tài)下寬高就是固定比例的，只不過沒有數(shù)值而已

百分比也是以父級(jí)為參照的。最大值和最小值，在不打開啟用開關(guān)時(shí)也生效，只能是像素值。

在symbol中，AL的寬高固定是絕對(duì)的，這有好有壞。不過這導(dǎo)致有時(shí)候必須用Resizing的寬高設(shè)置，需要靈活選擇。

功能3：居中

這個(gè)功能就只是對(duì)單個(gè)層的在組內(nèi)的居中操作，不是對(duì)齊功能。還可以設(shè)置偏移值。

是的，居中也是以父級(jí)為參照空間的。偏移值正值向右偏移，負(fù)值向左，只能是像素值。

一鍵清空

上面提到的三個(gè)功能可以通過這個(gè)按鍵，對(duì)圖層所有設(shè)置一鍵刪除。

功能4：對(duì)齊工具Stack

這個(gè)怎么翻譯呢，直譯叫堆棧，還是用英文名吧。是一種特殊的圖層組，主要是子層元素布局操控，也就是對(duì)齊方式。除了對(duì)齊，對(duì)子層還有特殊效果。

基礎(chǔ)的排列對(duì)齊功能不用多講，兩種操作方式，多選圖層（包括組層），新建stack組。或者選擇一個(gè)組，轉(zhuǎn)化成stack組。

講下塌陷Collapsing功能，這個(gè)功能一般時(shí)候開不開都一樣。它是針對(duì)嵌套的symbol用的，當(dāng)symbol里的中間條目選擇隱藏時(shí)，啟用塌陷可以讓子層重新排列。

還有一個(gè)配套resize symbol的功能，很實(shí)用。只有一種情況，這個(gè)開關(guān)會(huì)出現(xiàn)，就是symbol畫板中只有一個(gè)stack 組時(shí)。這個(gè)功能是讓symbol自動(dòng)匹配stack 組尺寸的。

resize symbol可能是個(gè)新的功能，有個(gè)很大的缺陷，就是一旦勾選了Resize Symbol，這個(gè)Symbol的子層就不具備被動(dòng)響應(yīng)能力了，也就是寬高被固定了。用之前要清楚這個(gè)問題，某些時(shí)候不得不放棄使用，很多時(shí)候是默認(rèn)勾上的。只能說等待官方修復(fù)這個(gè)問題，anima的更新頻率還是很高的。

stack組的子層會(huì)有個(gè)附帶效果，比例鎖定會(huì)在子層生效（包括組合symbol）。

功能5：自動(dòng)填充padding

這個(gè)功能更新也就近幾個(gè)月的事，為了解決無法和Paddy兼容，AL自己做了這個(gè)功能。當(dāng)然，支持嵌套symbol。

沒有這個(gè)功能時(shí)，做填充也是可以的，但是比較麻煩，效果也有局限。

說白了，這個(gè)功能就是操控組內(nèi)最底子層形狀的寬高，從而組的寬高也發(fā)生變化。

padding的嵌套目前也是有局限性的，相比而言完成度是最高的，具體在后面實(shí)例中說。

使用教程：

功能1：Pin 定位銷

就是固定間距的功能，讓邊鎖定在一個(gè)位置。也是Sketch Resizing的主要功能，AL或許更方便，但效果其實(shí)差別不大，區(qū)別在于AL更偏主動(dòng)響應(yīng)，Resizing更適合被動(dòng)自適應(yīng)。有些時(shí)候還是要用Resizing的，互補(bǔ)，如果可以優(yōu)先用Resizing。

百分比感覺很牛逼是不是，其實(shí)自帶的resizing也支持百分比，默認(rèn)狀態(tài)下也就是不設(shè)置Pin的時(shí)候。內(nèi)部元素拉伸是按照比例來的，只不過不止間距，寬高也按比例拉伸了。

定位功能基于父級(jí)容器的，簡單的說就是上一級(jí)的組或Symbol，邊界和百分比的基數(shù)也是。當(dāng)指定了數(shù)值后，布局會(huì)自動(dòng)發(fā)生變化。之后也可以移動(dòng)，數(shù)值也會(huì)自動(dòng)實(shí)時(shí)發(fā)生變化（這和Resizing一樣）。需要時(shí)可以設(shè)置為百分比，記得切換。

注：Sketch的默認(rèn)情況下子層的寬高是固定比例的，所以會(huì)隨著父級(jí)拉伸而被拉伸。要定位元素需要先鎖定寬高。

功能2：寬高設(shè)置

沒錯(cuò)，這個(gè)功能Resizing也有，就是固定寬高。AL可以額外設(shè)置最大、最小值。和Resizing的不一樣的是，這個(gè)的寬高鎖定是絕對(duì)的。

剛才提到過，自帶的resizing默認(rèn)狀態(tài)下寬高就是固定比例的，只不過沒有數(shù)值而已

百分比也是以父級(jí)為參照的。最大值和最小值，在不打開啟用開關(guān)時(shí)也生效，只能是像素值。

在symbol中，AL的寬高固定是絕對(duì)的，這有好有壞。不過這導(dǎo)致有時(shí)候必須用Resizing的寬高設(shè)置，需要靈活選擇。

功能3：居中

這個(gè)功能就只是對(duì)單個(gè)層的在組內(nèi)的居中操作，不是對(duì)齊功能。還可以設(shè)置偏移值。

是的，居中也是以父級(jí)為參照空間的。偏移值正值向右偏移，負(fù)值向左，只能是像素值。

一鍵清空

上面提到的三個(gè)功能可以通過這個(gè)按鍵，對(duì)圖層所有設(shè)置一鍵刪除。

功能4：對(duì)齊工具Stack

這個(gè)怎么翻譯呢，直譯叫堆棧，還是用英文名吧。是一種特殊的圖層組，主要是子層元素布局操控，也就是對(duì)齊方式。除了對(duì)齊，對(duì)子層還有特殊效果。

基礎(chǔ)的排列對(duì)齊功能不用多講，兩種操作方式，多選圖層（包括組層），新建stack組�；蛘哌x擇一個(gè)組，轉(zhuǎn)化成stack組。

講下塌陷Collapsing功能，這個(gè)功能一般時(shí)候開不開都一樣。它是針對(duì)嵌套的symbol用的，當(dāng)symbol里的中間條目選擇隱藏時(shí)，啟用塌陷可以讓子層重新排列。

還有一個(gè)配套resize symbol的功能，很實(shí)用。只有一種情況，這個(gè)開關(guān)會(huì)出現(xiàn)，就是symbol畫板中只有一個(gè)stack 組時(shí)。這個(gè)功能是讓symbol自動(dòng)匹配stack 組尺寸的。

resize symbol可能是個(gè)新的功能，有個(gè)很大的缺陷，就是一旦勾選了Resize Symbol，這個(gè)Symbol的子層就不具備被動(dòng)響應(yīng)能力了，也就是寬高被固定了。用之前要清楚這個(gè)問題，某些時(shí)候不得不放棄使用，很多時(shí)候是默認(rèn)勾上的。只能說等待官方修復(fù)這個(gè)問題，anima的更新頻率還是很高的。

stack組的子層會(huì)有個(gè)附帶效果，比例鎖定會(huì)在子層生效（包括組合symbol）。

功能5：自動(dòng)填充padding

這個(gè)功能更新也就近幾個(gè)月的事，為了解決無法和Paddy兼容，AL自己做了這個(gè)功能。當(dāng)然，支持嵌套symbol。

沒有這個(gè)功能時(shí)，做填充也是可以的，但是比較麻煩，效果也有局限。

說白了，這個(gè)功能就是操控組內(nèi)最底子層形狀的寬高，從而組的寬高也發(fā)生變化。

padding的嵌套目前也是有局限性的，相比而言完成度是最高的，具體在后面實(shí)例中說。