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

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