能像看書一樣對摺看相片是不是很有趣,使用一個免費的線上H5編輯工具不需要寫程式碼也可以製作這種類似的效果,下面教大家來製作一個非常簡單的對摺翻頁。
工具/原料
圖片素材
iH5
方法/步驟
選擇舞臺,點選工具欄“滑動時間軸”,在舞臺上畫出一個框作為你滑動的區域,在這區域外滑動則無效。
在物件樹選中滑動時間軸,點選工具欄圖片按鈕,新增4張圖片,每張圖片在其他圖片工具處理後備對半分成兩張圖片,即上傳8張圖片。
時間軸設定
1、第一張圖片的左側與最後一張圖片的右側不需要加軌跡,其他圖片下新增軌跡,每條軌跡設定兩個關鍵幀,第一個關鍵幀的圖片屬性是正常寬度320,第二個的寬度是0,其他都不變。
2、在前一張圖片寬度變成0的時候,下一張圖片的寬要從0慢慢變成正常寬度,就是右邊的圖片(1-2)慢慢的變扁,左邊的圖片(2-1)慢慢由扁變寬。
滑動時間軸屬性面板,滑動方向設定為左,自動跳轉控制點為NO。
先行知識:滑動時間軸、軌跡
重點控制元件:滑動時間軸、軌跡、關鍵幀、滑動方向、自動跳轉控制點
1、滑動放大比例:使用此引數來設定手指滑動的距離對滑動時間軸軸播放進度的控制,預設值為1,即手指按設定方向劃過滑動時間軸整個範圍時,滑動時間軸會從起點播放到終點。
2、滑動方向:滑動方向是指設定一個滑動的方向,即手指或滑鼠向此設定方向滑動時,滑動時間軸會正向的播放;注意,手指也可以向此設定的方向反向滑動,那麼滑動時間軸會反向播放。
3、自動跳轉控制點:自動跳轉控制點是指滑動時滑動時間軸是否在滑動停止時自動播放至下一個控制點,如果將這個選項設為是,那麼在滑動停止時,將會自動播放到下一控制點再停止,呈現出類似慣性滑動的效果。此案例中可設為否。
4、製作翻頁效果,每個圖片的軌跡設定兩個關鍵幀,第一個關鍵幀的圖片屬性是正常寬度,第二個關鍵幀圖片的寬度是0,其他都不變。在前一張圖片寬度變成0的時候,下一張圖片的寬要從0慢慢變成正常寬度,就是右邊的圖片慢慢的變扁,左邊的圖片慢慢由扁變寬。