iH5高級教程：H5創(chuàng)意展示,背景移動特效.docx

iH5高級教程：H5創(chuàng)意展示，背景移動特效通過移動大的背景圖來進行內(nèi)容的瀏覽，小窗口的局部展示。時間軸控制背景整體的移動，透明按鈕觸發(fā)背景的局部移動。下面，我們一步步地實現(xiàn)移動背景的具體步驟。第一步：1、新建一個頁面。選中舞臺，點擊工具欄下的頁面工具，添加一個頁面12、在頁面1下添加一個時間軸，選中頁面1，點擊工具欄下的時間軸工具，新建一個時間軸13、在時間軸下添加一個背景圖片，選中時間軸，點擊工具欄下的圖片工具，在舞臺里畫出一個矩形，添加一個背景圖。因為背景需要移動，所以需要比舞臺還要大的背景圖。案例里面選擇的背景圖是寬4504高2100的4、在背景圖下添加一個軌跡。選中背景圖，點擊工具欄下的軌跡工具，為設(shè)置關(guān)鍵幀做準(zhǔn)備。5、接下來是在背景圖的各個位置上，添加需要的信息，例如案例里的個人信息，專業(yè)技能，教育經(jīng)歷等的信息。（1）個人信息”為例，在案例下添加了透明按鈕，事件，圖片，中文字體等的工具。（2）在專業(yè)技能按鈕下添加一個事件，選中專業(yè)技能按鈕，點擊工具欄下的事件工具，這是一個控制時間軸播放的事件。（3）專業(yè)技能模塊有以下幾要素選中背景圖，點擊工具欄下的透明按鈕工具，添加一個專業(yè)技能透明按鈕對象（4）在教育經(jīng)歷透明按鈕下添加一個事件，選中教育經(jīng)歷透明按鈕，點擊工具欄下的事件工具，添加一個控制時間軸繼續(xù)播放的事件。（5）時間軸下包含了9張圖片，控制這幾張圖片的運動軌跡，圖片從四周往中間聚集的形式出現(xiàn)（6）教育經(jīng)歷選中背景圖，點擊工具欄下的中文字體工具，添加一個教育經(jīng)歷對象。（7）在工作經(jīng)驗透明按鈕下添加一個事件，選中工作經(jīng)驗透明按鈕，點擊工具欄下的事件工具，添加一個控制時間軸播放的事件。（8）工作經(jīng)驗，選中背景圖，點擊工具欄下的中文字體工具，添加一個工作經(jīng)驗中文字體對象（9）在作品展示透明按鈕下添加一個事件，選中作品展示透明按鈕，點擊工具欄下的事件工具，添加一個控制時間軸繼續(xù)播放的事件。（10）作品展示選中背景圖片，點擊工具欄下的透明按鈕，添加一個作品展示的透明按鈕。（11）在謝謝觀看透明按鈕下添加一個事件，選中謝謝觀看透明按鈕，點擊工具欄下的事件工具，添加一個控制時間軸繼續(xù)播放的事件。（12）謝謝觀看，選中背景圖，點擊工具欄下的中文字體工具，添加一個謝謝觀看的對象。（13）在個人信息透明按鈕下，添加一個事件，選中個人信息透明按鈕，點擊工具欄下的事件工具，添加一個控制時間軸繼續(xù)播放的事件。第二步：1、當(dāng)所需要的信息模塊都編輯好之后，可以對軌跡進行關(guān)鍵幀的設(shè)置。首先要知道信息模塊的展現(xiàn)順序，這樣會更加容易地設(shè)置關(guān)鍵幀。案例里設(shè)置的是每個關(guān)鍵幀的時間間隔為兩秒。2、注意的是軌跡的最后一個關(guān)鍵幀必須是第一個關(guān)鍵幀的信息模塊，這樣會讓時間軸形成連貫的循環(huán)，不會在最后一幀暫停。3、除了“個人信息”模塊的按鈕事件是從頭播放之外，其他信息模塊的按鈕事件設(shè)置都是繼續(xù)播放。第三步：1、在時間軸1下添加8個事件，選中時間軸1，點擊事件工具，添加8個事件2、其中有一個事件是觸發(fā)“專業(yè)技能”信息模塊下的時間軸的開始運動。其他事件都是控制信息模塊在開始運動的2秒后停止運動的，因為案例里的時間軸是設(shè)置兩秒一個關(guān)鍵幀，因此兩秒后便是下一個關(guān)鍵幀的位置。點擊信息模塊的按鈕時，就會繼續(xù)觸發(fā)時間軸的運動。3、這是案例的整體背景圖效果：重點工具：時間軸、事件、透明按鈕重點事件：觸發(fā)對象：透明按鈕觸發(fā)條件：手指按下按下時間：0目標(biāo)對象：舞臺頁面1時間軸1目標(biāo)動作：繼續(xù)播放觸發(fā)對象：時間軸1觸發(fā)條件：播放時間時間：X秒目標(biāo)對象：舞臺頁面1時間軸1目標(biāo)