sketch自動布局插件套裝Anima Toolkit

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

功能介紹：

功能1：Pin 定位銷

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

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

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

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

功能2：寬高設置

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

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

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

在symbol中，AL的寬高固定是絕對的，這有好有壞。不過這導致有時候必須用Resizing的寬高設置，需要靈活選擇。

功能3：居中

這個功能就只是對單個層的在組內的居中操作，不是對齊功能。還可以設置偏移值。

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

一鍵清空

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

功能4：對齊工具Stack

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

基礎的排列對齊功能不用多講，兩種操作方式，多選圖層（包括組層），新建stack組�；蛘哌x擇一個組，轉化成stack組。

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

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

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

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

功能5：自動填充padding

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

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

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

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

使用教程：

功能1：Pin 定位銷

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

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

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

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

功能2：寬高設置

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

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

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

在symbol中，AL的寬高固定是絕對的，這有好有壞。不過這導致有時候必須用Resizing的寬高設置，需要靈活選擇。

功能3：居中

這個功能就只是對單個層的在組內的居中操作，不是對齊功能。還可以設置偏移值。

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

一鍵清空

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

功能4：對齊工具Stack

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

基礎的排列對齊功能不用多講，兩種操作方式，多選圖層（包括組層），新建stack組�；蛘哌x擇一個組，轉化成stack組。

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

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

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

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

功能5：自動填充padding

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

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

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

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