最近推特添加了一個功能，你可以添加你的生日到你的推特封面。所有人到封面都會看到飄飛的慶祝氣泡飛過的動畫。我們在framer（Sketch）中實現(xiàn)這種簡單的動畫原形，這里的動畫效果是參照Twitter（IOS）
首先用Sketch創(chuàng)建一個氣球。如果您沒有Sketch，你也可以選擇使用Photoshop，Affinity Designer等你自己喜歡的設計工具。
在Sketch中用快捷鍵“o”，選擇原形工具，按住shift鍵畫出140 x140px的正圓，然后雙擊圓形進入節(jié)點編輯狀態(tài)，選擇底部節(jié)點，按住 shift＋ ↓鍵平移40px，選擇 Straight轉化節(jié)點為尖角。
用快捷鍵“r”選擇矩形工具,在上面創(chuàng)建圖形的底部創(chuàng)建一個10 x6px的矩形覆蓋其一部分，我喜歡放大然后用箭頭鍵一個像素一個像素移動矩形來調整對齊，這樣做是比較精確的。選擇兩個圖層居中對齊后，選擇“ Union”按鈕編組在一起。
現(xiàn)在來畫氣泡線，創(chuàng)建2個矩形設背景顏色為黃色(# F3C861)。一條線的尺寸為 2 x 106px 底部和氣泡底部居中對齊，另一條短線尺寸為 12 x 2px外加 1px的圓角，放置位置如下圖：
再來畫氣球的底部，創(chuàng)建一個尺寸為 14 x 2圓角為 1px的矩形，另一種簡單的方式是把上面的一條線復制下來改變尺寸后，放到氣球的底部。
下面來畫氣球的反光部分，創(chuàng)建 44 x 26的橢圓，然后旋轉 33度。您可以通過屬性面板自己鍵入它或通過按住命令在橢圓層的角落和拖動旋轉。將它放在頂部，氣球的一部分，使背景白色，有 25%的不透明度。
所有剩下的要做的是設置氣球的顏色。選擇氣球，包括底部，設置背景顏色為紫色 ?- ?# a332e6。給氣球一個不透明度為75%，但保持不透明度的底部的氣球的一部分的透明度為100%。效果如下圖：
選擇所有的圖層，使用command+ G并把它們放在一個組。然后使用command+ D重復組4次。
然后給其他4個氣球應用背景顏色。這是我使用的參考值。
• 黃色—?#F9D000
• 紅色?—?#F0325E
• 藍色—?#34A1F9
• 綠色—?#38DA9C
用他們各自的顏色重命名你的生日氣球的組名。
對于Twitter的封面，用你的手機截圖就可以。我們需要做的唯一的事情是使底部標簽一個單獨的層，因為氣球的出現(xiàn)從后面。要做到這一點，只要雙擊“圖像”，選擇“底部”選項卡，然后按“command+ D”創(chuàng)建所選圖像的圖層。通過隱藏圖層，我們可以驗證標簽是一個單獨的層。
重命名封面圖層為“profile”，標簽圖層重命名為“tab”
現(xiàn)在導出5個氣泡，封面和tab為圖片，我們將要在framer中使用到。
打開framer，把準備好的素材拖入framer Studio中。修改layer的名字使表意更易懂。例如
profile = new Layer
width: 750, height: 1334
image: "images/profile.png"
我將創(chuàng)建一個數(shù)組（命名為 color）來存儲各種顏色的氣球方便后面氣球的隨機展示。將每個顏色添加到數(shù)組中，確保它與我們的氣球圖像文件相同的名稱。我們可以用逗號分隔一行中的數(shù)組中的每一項。（這里＃是Cofferscript中的注釋符號）
# Array of balloon colors matching file name
colors= [ "blue", "green", "purple", "red", "yellow"]
或者單行展示，不用逗號分隔。例如：
# Array of balloon colors matching file name
colors= [
"blue"
"green"
"purple"
"red"
"yellow"
]
拖放所有5個氣球到framer。這些氣球應該在頂部的左上角。
拖入圖片只是一個快捷操作，最終我們會刪除這些代碼，但是圖片素材會被復制到 framer目錄的 image中，不用自己去做這些。
我們將參考一些屬性信息，如寬度和高度，當我們生成我們的氣球之前，我們先刪除這些。
imageLayer2 = new Layer
width: 140, height: 286
image: "images/blue.png"= new Layer
width: 140, height: 286
image: "images/green.png"= new Layer
width: 140, height: 286
image: "images/purple.png"= new Layer
width: 140, height: 286
image: "images/red.png"= new Layer
width: 140, height: 286
image: "images/yellow.png"
我們將創(chuàng)建一個for循環(huán)，將生成每一個氣球添加到屏幕的頂部。我們希望它創(chuàng)建 30個氣球，所以我們將表示數(shù)字范圍從 1到 30，這個周期包括從我們的數(shù)字范圍的上限（ 30）。
for [1..30]
可以選擇另一種方式，從 0開始排出最后一位 30的方式 [0...30]
在這個循環(huán)中，我想選擇氣球的顏色，我要用到 Utiliy中的函數(shù) randomChoice，它的作用是從數(shù)組中隨機選取一項。要使用它，我們將調用函數(shù)，在我們剛剛創(chuàng)建的數(shù)組中函數(shù)返回隨機項，我們將其分配給 color變量。
for [1..30]
color = Utils.randomChoice colors
然后，我們將創(chuàng)建我們的氣球層設置它的寬度和高度是前面倒入氣球圖像的值（ 140×286）。
for [1..30]
color = Utils.randomChoice colors
balloon = new Layer
width: 140
height: 286
我們將X的位置是在一個隨機的地方沿著屏幕底部擺放。隨機函數(shù)有兩個參數(shù)，一個返回的值。我們將允許氣球初步設置在屏幕邊緣上顯示氣球的一半。因為我們的氣球的寬度是 140，我們將最小范圍設置為－70，最大范圍設置為 screen.width + 70。
balloon = new Layer
width: 140
height: 286
x: Utils.randomNumber -70, Screen.width + 70
對于Y位置，我們將要設置它在下方的標簽欄。因為我們還不知道標簽欄的高度，我們只會把它設置在屏幕的底部，減去氣球高度，現(xiàn)在我們可以看到發(fā)生了什么。
balloon = new Layer
width: 140
height: 286
x: Utils.randomNumber -70, Screen.width + 70
y: Screen.height - 286
你應該看到一堆藍色的層現(xiàn)在在你的屏幕底部。
最后，我們需要指定圖像路徑。我們將設置的路徑中的氣球圖像，并使用字符串插值，它取代了變量與他們的相應的值，我們所產(chǎn)生的隨機顏色。我們使用的哈希符號，并放置在花括號之間的顏色變量用字符串插值。
balloon = new Layer
width: 140
height: 286
x: Utils.randomNumber -70, Screen.width + 70
y: Screen.height - 97
image: "images/#{color}.png"
現(xiàn)在你應該看到由隨機顏色的氣球所取代的藍色層。
回到我們的代碼中，我們拖入的五個氣球圖像，并刪除它們。
現(xiàn)在，有了氣球，來給氣球動畫。我們?yōu)槊總€氣球圖層添加動畫讓它們動起來。
for [1..30]
color = Utils.randomChoice colors
balloon = new Layer
width: 140
height: 286
x: Utils.randomNumber -70, Screen.width + 70
y: Screen.height - 286
image: "images/#{color}.png"
balloon.animate
然后，我們可以指定屬性，動畫讓氣球越過屏幕的頂部。由于氣球的高度是 286px，需要設置氣球的重點的 y值為－ 286px。用 balloon.height代替硬編碼的數(shù)量，如果我們要作用在氣球圖片上。
balloon.animate
properties:
y: -balloon.height
我們也不希望氣球一起向上，所以讓我們也給它一個隨機 x的位置動畫，讓x值在當前位置的［－100px，100px］之間隨機，增加真實層次感。
balloon.animate
properties:
x: balloon.x + Utils.randomNumber -100, 100
y: -balloon.height
效果如下
你可能會注意到，氣球走得很快，我們指定一個動畫時間。再次，我們將每個氣球在 2.5秒和 3.5秒之間隨機的動畫時間。
balloon.animate
properties:
x: balloon.x + Utils.randomNumber -100, 100
y: -balloon.height
time: Utils.randomNumber 2.5, 3.5
看起來已經(jīng)好多了：
像太空中的氣球，所以不希望它們從底部的同時上升。我們會給每個氣球一個延時。讓我們給它設置一個從 0到 5秒之間隨機數(shù)的延遲。
balloon.animate
properties:
x: balloon.x + Utils.randomNumber -100, 100
y: -balloon.height
time: Utils.randomNumber 2.5, 3.5
delay: Utils.randomNumber 0, 5
效果如下：
最后，我們的動畫是指定動畫曲線。默認的動畫曲線是 “出 ”緩解，開始快，慢下來，然后結束快。我們希望它開始緩慢和結束快，設置曲線參數(shù)為 “ease-in”。
balloon.animate
properties:
x: balloon.x + Utils.randomNumber -100, 100
y: -balloon.height
time: Utils.randomNumber 2.5, 3.5
delay: Utils.randomNumber 0, 5
curve: "ease-in"
我們拖放標簽欄圖像進framer，給它一個更好的名字，并將y坐標值設置為高度減去標簽高度。
tab = new Layer
width: 750, height: 97
y: Screen.height - 97
image: "images/tab.png"
這時候氣球出現(xiàn)在了 tab欄的下面。
我們將氣球的初始位置設置在標簽欄相同的位置。
balloon = new Layer
width: 140
height: 286
x: Utils.randomNumber -70, Screen.width + 70
y: Screen.height - 97
image: "images/#{color}.png"
你可能已經(jīng)注意到，在層檢查器中我們創(chuàng)建了所有的 “氣球 ”層。由于它是一個小的原型，這通常是好的，但如果這個原型是產(chǎn)生無限的氣球，可能面臨內存不足問題。我們可以通過監(jiān)聽氣球動畫結束解決，然后刪除層就可以了。
balloon.on Events.AnimationEnd, ->
this.destroy()
如果你現(xiàn)在查看了原型，你會注意到層檢查器一邊生成氣球層一邊在刪除動畫完成的氣泡圖層。
最終效果如下：
需要framer安裝包（建議購買正版）可以留言，附件是教程源文件，供參考：
雖然翻譯水平不好，但是很幸苦，大家給個贊吧?。?/p>
