在Framer(Sketch)中實(shí)現(xiàn)簡(jiǎn)單的動(dòng)畫(huà)原形

2018-07-30 2488 0

最近推特添加了一個(gè)功能,你可以添加你的生日到你的推特封面。所有人到封面都會(huì)看到飄飛的慶祝氣泡飛過(guò)的動(dòng)畫(huà)。我們?cè)趂ramer(Sketch)中實(shí)現(xiàn)這種簡(jiǎn)單的動(dòng)畫(huà)原形,這里的動(dòng)畫(huà)效果是參照Twitter(IOS)

5a0c5763933e0000012e7e0742a6.jpg

首先用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)為尖角。

5b7d5763935b0000012e7e2ceddb.jpg

用快捷鍵“r”選擇矩形工具,在上面創(chuàng)建圖形的底部創(chuàng)建一個(gè)10 x6px的矩形覆蓋其一部分,我喜歡放大然后用箭頭鍵一個(gè)像素一個(gè)像素移動(dòng)矩形來(lái)調(diào)整對(duì)齊,這樣做是比較精確的。選擇兩個(gè)圖層居中對(duì)齊后,選擇“ Union”按鈕編組在一起。

7bd45763937d0000012e7e45ce7c.jpg

現(xiàn)在來(lái)畫(huà)氣泡線,創(chuàng)建2個(gè)矩形設(shè)背景顏色為黃色(# F3C861)。一條線的尺寸為 2 x 106px 底部和氣泡底部居中對(duì)齊,另一條短線尺寸為 12 x 2px外加 1px的圓角,放置位置如下圖:

cb17576393990000018c1bc072cb.jpg

再來(lái)畫(huà)氣球的底部,創(chuàng)建一個(gè)尺寸為 14 x 2圓角為 1px的矩形,另一種簡(jiǎn)單的方式是把上面的一條線復(fù)制下來(lái)改變尺寸后,放到氣球的底部。

f254576393b20000018c1b50e79c.jpg

下面來(lái)畫(huà)氣球的反光部分,創(chuàng)建 44 x 26的橢圓,然后旋轉(zhuǎn) 33度。您可以通過(guò)屬性面板自己鍵入它或通過(guò)按住命令在橢圓層的角落和拖動(dòng)旋轉(zhuǎn)。將它放在頂部,氣球的一部分,使背景白色,有 25%的不透明度。

7ffd576393cc0000012e7e0a5b5e.jpg

所有剩下的要做的是設(shè)置氣球的顏色。選擇氣球,包括底部,設(shè)置背景顏色為紫色 ?- ?# a332e6。給氣球一個(gè)不透明度為75%,但保持不透明度的底部的氣球的一部分的透明度為100%。效果如下圖:

330b576393ea0000018c1b758bd4.jpg

選擇所有的圖層,使用command+ G并把它們放在一個(gè)組。然后使用command+ D重復(fù)組4次。

453e576394000000018c1b06dfa0.jpg

然后給其他4個(gè)氣球應(yīng)用背景顏色。這是我使用的參考值。

         • 黃色—?#F9D000

         • 紅色?—?#F0325E

         • 藍(lán)色—?#34A1F9

         • 綠色—?#38DA9C

用他們各自的顏色重命名你的生日氣球的組名。

a181576394190000012e7ef01015.jpg

對(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ú)的層。

f14d576394360000012e7ebb2966.jpg

重命名封面圖層為“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)該在頂部的左上角。

cf7f576394a80000018c1b342e3f.jpg

拖入圖片只是一個(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)在在你的屏幕底部。

e2a3576394e50000018c1b6734e7.jpg

最后,我們需要指定圖像路徑。我們將設(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)色層。

7e36576395180000018c1b1fd624.jpg

回到我們的代碼中,我們拖入的五個(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


 

效果如下

6a945763954a0000018c1b73f307.jpg

你可能會(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)好多了:

0225576395670000012e7e0836a2.jpg


 

像太空中的氣球,所以不希望它們從底部的同時(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  

 

效果如下:

e5ea576395840000018c1b634225.jpg

最后,我們的動(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欄的下面。

3735576395ae0000018c1ba866a0.jpg

我們將氣球的初始位置設(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à)完成的氣泡圖層。

36f6576395dc0000012e7efc7576.jpg

最終效果如下:

9429576395ff0000012e7e013f2a.jpg

需要framer安裝包(建議購(gòu)買正版)可以留言,附件是教程源文件,供參考:

雖然翻譯水平不好,但是很幸苦,大家給個(gè)贊吧??!


26
評(píng)論區(qū)(0)
正在加載評(píng)論...
相關(guān)推薦