今天我要分享一個(gè)超實(shí)用的設(shè)計(jì)技巧——如何用Figma制作無(wú)限循環(huán)的頁(yè)面背景光效動(dòng)畫！
 
簡(jiǎn)單4步，打造循環(huán)光效動(dòng)畫
第一步：建立光效形狀
一切從基礎(chǔ)開始！首先，你需要在Figma中創(chuàng)建一個(gè)形狀，比如一個(gè)500×500像素的矩形，并為其設(shè)置顏色和透明度。為了讓光效更有層次感，記得給它添加一個(gè)明顯的模糊效果——這里建議使用 Layer blur 200，模糊的參數(shù)可以根據(jù)你的設(shè)計(jì)需求自行調(diào)整。
 
第二步：制作四幀動(dòng)畫
光效的魅力在于它的動(dòng)態(tài)表現(xiàn)。通過(guò)創(chuàng)建4個(gè)不同的Frame（幀），你可以定義光效的運(yùn)動(dòng)軌跡。按照?qǐng)D片的說(shuō)明，把形狀逐步移動(dòng)到不同的位置，形成一個(gè)順時(shí)針的運(yùn)動(dòng)路線。這4幀將是動(dòng)畫循環(huán)的核心。
 
第三步：調(diào)整動(dòng)畫參數(shù)
現(xiàn)在是讓動(dòng)畫“活”起來(lái)的時(shí)候了！在Figma的Prototype模式下，為每個(gè)Frame設(shè)置跳轉(zhuǎn)邏輯。
- 觸發(fā)方式：選擇“After delay”，設(shè)置延遲時(shí)間為1毫秒，這樣動(dòng)畫就能流暢地從一幀跳轉(zhuǎn)到下一幀。
- 動(dòng)畫效果：選擇“Smart animate”，讓Figma自動(dòng)幫你優(yōu)化動(dòng)畫的過(guò)渡效果。
- 時(shí)間參數(shù)：特別注意的是，F(xiàn)rame 2到Frame 3，以及Frame 4回到Frame 1的動(dòng)畫時(shí)間需要延長(zhǎng)到4000毫秒，這樣可以讓光效的運(yùn)動(dòng)更加柔和、自然。
 
第四步：完成循環(huán)效果
當(dāng)所有參數(shù)設(shè)置完畢后，你的動(dòng)畫就完成了！通過(guò)Figma的Prototype功能，這4幀會(huì)自動(dòng)無(wú)縫循環(huán)，形成一個(gè)令人驚艷的背景光效動(dòng)畫。
 
利用Figma的Prototype功能，你可以快速創(chuàng)建出無(wú)限循環(huán)的光效動(dòng)畫，為你的設(shè)計(jì)作品增添活力。別猶豫了！快打開Figma，動(dòng)手試試這個(gè)炫酷的技巧吧！