通過移動大的背景圖來進行內容的瀏覽,小視窗的區域性展示。時間軸控制背景整體的移動,透明按鈕觸發背景的區域性移動。下面,我們一步步地實現移動背景的具體步驟。
工具/原料
iH5
方法/步驟
1.新建一個頁面。選中舞臺,點選工具欄下的頁面工具,新增一個頁面1
2、在頁面1下新增一個時間軸,選中頁面1,點選工具欄下的時間軸工具,新建一個時間軸1
3、在時間軸下新增一個背景圖片,選中時間軸,點選工具欄下的圖片工具,在舞臺裡畫出一個矩形,新增一個背景圖。因為背景需要移動,所以需要比舞臺還要大的背景圖。
案例裡面選擇的背景圖是寬4504高2100的
4、在背景圖下新增一個軌跡。選中背景圖,點選工具欄下的軌跡工具,為設定關鍵幀做準備。
5、接下來是在背景圖的各個位置上,新增需要的資訊,例如案例裡的個人資訊,專業技能,教育經歷等的資訊。
(1)個人資訊”為例,在案例下添加了透明按鈕,事件,圖片,中文字型等的工具。
(2)在專業技能按鈕下新增一個事件,選中專業技能按鈕,點選工具欄下的事件工具,
這是一個控制時間軸播放的事件。
(3)專業技能模組有以下幾要素
選中背景圖,點選工具欄下的透明按鈕工具,新增一個專業技能透明按鈕物件
(4)在教育經歷透明按鈕下新增一個事件,選中教育經歷透明按鈕,點選工具欄下的事件工具,新增一個控制時間軸繼續播放的事件。
(5)時間軸下包含了9張圖片,控制這幾張圖片的運動軌跡,圖片從四周往中間聚集的形式出現
(6)教育經歷
選中背景圖,點選工具欄下的中文字型工具,新增一個教育經歷物件。
(7)在工作經驗透明按鈕下新增一個事件,選中工作經驗透明按鈕,點選工具欄下的事件工具,新增一個控制時間軸播放的事件。
(8)工作經驗,選中背景圖,點選工具欄下的中文字型工具,新增一個工作經驗中文字型物件
(9)在作品展示透明按鈕下新增一個事件,選中作品展示透明按鈕,點選工具欄下的事件工具,新增一個控制時間軸繼續播放的事件
(10)作品展示選中背景圖片,點選工具欄下的透明按鈕,新增一個作品展示的透明按鈕。
(11)在謝謝觀看透明按鈕下新增一個事件,選中謝謝觀看透明按鈕,點選工具欄下的事件工具,新增一個控制時間軸繼續播放的事件。
(12)謝謝觀看,選中背景圖,點選工具欄下的中文字型工具,新增一個謝謝觀看的物件。
(13)在個人資訊透明按鈕下,新增一個事件,選中個人資訊透明按鈕,點選工具欄下的事件工具,新增一個控制時間軸繼續播放的事件。
1、當所需要的資訊模組都編輯好之後,可以對軌跡進行關鍵幀的設定。首先要知道資訊模組的展現順序,這樣會更加容易地設定關鍵幀。案例裡設定的是每個關鍵幀的時間間隔為兩秒。
2、注意的是軌跡的最後一個關鍵幀必須是第一個關鍵幀的資訊模組,這樣會讓時間軸形成連貫的迴圈,不會在最後一幀暫停。
3、除了“個人資訊”模組的按鈕事件是從頭播放之外,其他資訊模組的按鈕事件設定都是繼續播放。
第三步:
1、在時間軸1下新增8個事件,選中時間軸1,點選事件工具,新增8個事件
2、其中有一個事件是觸發“專業技能”資訊模組下的時間軸的開始運動。其他事件都是控制資訊模組在開始運動的2秒後停止運動的,因為案例裡的時間軸是設定兩秒一個關鍵幀,因此兩秒後便是下一個關鍵幀的位置。點選資訊模組的按鈕時,就會繼續觸發時間軸的運動。
3、這是案例的整體背景圖效果:
重點工具:時間軸、事件、透明按鈕
重點事件:
觸發物件:透明按鈕
觸發條件:手指按下
按下時間:0
目標物件:舞臺·頁面1·時間軸1
目標動作:繼續播放
觸發物件:時間軸1
觸發條件:播放時間
時間:X秒
目標物件:舞臺·頁面1·時間軸1
目標動作:繼續播放
TIPS:
時間軸和事件通過固定的關鍵幀,控制背景圖在舞臺上的運動,停留在某一個特定的位置。
透明按鈕可以觸發時間軸繼續運動,瀏覽下一個資訊模組。