本篇文章以端午節H5案例為例講解。

設置首頁

如下圖，點擊「導入Photoshopshop(PSD)素材」按鈕，將PSD格式內的圖片素材原位置「分層導入」編輯頁面

可為每個素材添加預置動畫效果

將「點擊」圖標右鍵轉換為元件，雙擊在元件頁面為其設置一個放大縮小的動畫效果。點擊回到舞台後可重新為其添加一個預置動畫效果。

設置長圖元件動畫

新建圖層，在第3幀插入幀，插入關鍵幀，同時添加進長圖背景素材

將背景圖片右鍵轉換為元件，進入元件頁面。

新建圖層，分層導入其他圖片素材。

為所有素材圖層插入關鍵幀動畫，分別設置素材的動畫效果，例如給人物素材設置放大縮小動畫，為「向左滑動」圖標設置向左滑動動畫效果。

回到舞台，補全所有圖層的幀數，為長圖元件添加預置動畫，如圖為「向右移入」

如下圖，為「點擊」圖標添加「點擊跳轉到第3幀並停止」的行為。同時新建圖層「行為層」，添加矩形，為其添加一個「出現即暫停」的行為。注意隨時保存作品。

選中長圖元件，在其屬性欄內設置「拖動/旋轉」為「水平拖動」

設置點擊出現提示效果

新建圖層「提示層」，在第4幀插入空白關鍵幀，同時導入原先預備好的提示素材。可為其添加預置動畫效果等。

新建兩個按鈕層，分別在一個圖層的第3幀放置「分享」按鈕，在另一個圖層第4幀提示頁面放置一個「返回」按鈕。

補全「行為層」及其他圖層幀數，為其中一個需提示介紹的人物素材添加「點擊跳轉到第4幀並停止」的行為

為第4幀的「返回」按鈕添加「點擊跳轉到第3幀並停止」的行為。即為第一個人物素材設置好了提示出現和消失的動畫，同理可為接下來的人物素材設置提示出現消失的動畫。

設置分享動畫的提示：如下圖，新建「分享」圖層，添加分享提示的素材，命名為「分享」，將其移至舞台之外。

為「分享」按鈕添加「改變元素屬性」行為

屬性控制→改變元素屬性→觸發條件：點擊。
設置「參數」
元素名稱：「分享」
元素屬性：「左」
賦值方式：「用設置的值替換現有值」
取值：「0」

同理為「分享」素材組合添加「點擊改變其左坐標為『1000』」的行為，即點擊將其移至舞台之外。


推薦閱讀：
相关文章