本節示例:
一、特效塊的制作
在上一節中制作了一個可以增加動效的自定義按鈕后,這一節通過這個行按鈕對其進行特效制作。
在行按鈕中的絕對定位中,我們創建一個行,命名為移入,接下來我們做一個移入動效:
此時這個行會覆蓋掉文本區域,我們將按鈕文本移動至行之上:
此時這個行就不會蓋掉之前的文本:
接著更改這個行為我們喜歡的顏色:
接著我們先把行的坐標置于原點:
二、給動效塊添加動畫
此時我們需要將這個動效塊行放置于這個按鈕之外,那么此時可以給予指責格行的 x 值為負,并且由于該行還需要向上移動一段距離,所以該行的 y 值也需要為負一段距離:
接著,咱們需要給這個動效塊添加動畫,點擊行,添加軌跡:
在軌跡中設置動畫長度為 0.5:
隨后我們在關鍵幀區平均打上 3 個關鍵幀,時間位置分別是 0、0.25 、0.5 秒:
接著我們選中中間的關鍵幀,更改該關鍵幀使其移動到自定義按鈕區域,并且完全覆蓋掉整個區域:
此時理應再設置第三個關鍵幀使其返回到原來的位置,但時在這里默認狀態是本來位置所以不再設置。
三、設置鼠標移入事件
接著咱們給自定義行設置鼠標移入事件,移入時播放這個軌跡動畫到下一個關鍵幀:
如果選擇播放動畫將會播放完動畫效果,這個效果并不是我們所需要的,所以在這里只需要選擇播放至下一個關鍵幀即可。
設置完畢后再設置一個鼠標移出事件,設置其軌跡播放至上一個關鍵幀,為什么不直接設置播放至下一個關鍵幀是因為這樣做會使動畫無限生效,否則播放完了再調用關鍵幀播放則會無效,并且之前設置3個關鍵幀是為了使這個幀動畫完備,方便更改:
此時頁面效果如下:
但是此時你會發現,這只是一個塊的動畫特效,并不能說是按鈕的,那如何解決呢?
此時只需要設置自定義按鈕的是否裁剪為 是 即可,這樣就會使這個按鈕中超過按鈕的區域將不會顯示:
此時我們重命名軌跡為移入動畫、重命名行1為移入塊:
此時預覽即可完成一個動效按鈕:
若想設置其對應的圓角邊框,只需要設置自定義按鈕行即可,他將會裁剪掉顯示區域外部的內容:
后續將會有更多特效按鈕制作教程。