手把手教你製作炫酷H5動效

為什麼設計師做的H5動畫辣么好看

為什麼自己一動手

就變得不連貫！不流暢！不美觀！

今天堂妹兒就來教大家幾個炫酷的動畫的製作

分步、詳細、手把手教學！

包教包會！

將依次講一下

如下兩個動畫的製作

1

超酷層疊效果

線條的疊加動效，多層圖片的重疊景象，再加上由內而外的聚散收斂，最後將主題和盤托出。這個H5，從亮相的第一刻。就以酷炫的形態吸引了眼球。

STEP 1

首先，打開秀堂客戶端或者網頁（http://s.wps.cn），新建一個畫冊。

STEP 2

然後，如圖所示，我們將準備好的各個素材（線條方塊，圖片，元素），一步一步開始放置到合適的位置。並按照順序，進行羅列。

STEP 3

重頭戲來了！我們要如何設置動畫的時間，才能製作出行雲流水般的酷炫層疊效果呢？

①要想顯示出，由左右向中心的順暢特效。很簡單，只需要兩個動態效果：向上淡入和向下淡入。首先，我們將各個線條素材，由左自右分類好，以0.1秒的間隔設置，一上一下的淡入，就能很好地融會貫通。

②想要製作圖中的心形擴展的效果，只需要使用秀堂的一個效果：縱向展開。從中心開始，以0.1秒的間隔設置，有里自外，就一氣呵成了。

③最後，也就是運用上下左右全方位的動態，來突出主題。具體的操作也都是通過最簡單的動畫【淡入】來完成的。藍粉底部，分別向上淡入和向下淡入。中心圖片從左淡入，各白色元素隨後從右淡入。

2

波浪紋路效果

第二個給大家分享一個製作波浪紋路效果背景的方法，先上效果圖。

STEP 1

首先，打開秀堂客戶端或者網頁（http://s.wps.cn），新建一個畫冊。

STEP 2

然後，如圖所示，我們將準備好的各個素材（線條方塊，圖片，元素），一步一步開始放置到合適的位置。並按照順序，進行羅列。

STEP 3

重頭戲來了！我們要如何設置動畫的時間，才能製作出波浪紋路般的動態效果呢？

①要想顯示出，自上而下的順暢特效。很簡單，只需要一個動態效果：縱向收縮。首先，我們將各個線條素材，自上而下排列好，以0.1秒的間隔設置，就能實現如下的絲滑效果。

②隨後的產品羅列的特效也十分容易做到。下部的花卉，採用了【從下淡入】的特效，以0.2的間隔，依次出現。展示圖片的素材使用的是【旋轉淡入】的特效，文字框使用的是【從上展開】的特效。

看完了這些動畫效果的製作

是不是發現酷炫的特效其實也並不難了呢

趕緊登陸秀堂官網或者秀堂客戶端

試著製作一款別具一格的H5吧

aHR0cDovL3dlaXhpbi5xcS5jb20vci9MMFNrdkduRTBqU3RyUzNmOXhFOQ== (二維碼自動識別)