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