<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »不用編碼!輕松制作酷炫的H5頁面案例

        不用編碼!輕松制作酷炫的H5頁面案例

        至成科技 2015-07-07 訪問量(1545) 評論(0)
        摘要:

        前段時間某品牌手機的廣告里,用逼真的打字效果”一步一步看清韓寒”。其實設計師,不用寫編碼,也可以做出一樣的效果。

        vxplo-hanhan-h5-1

        詳細步驟:

        先進步:登錄網站

        登錄VXPLO互動大師官網。在我的作品里,創建一個新的手機案例,根據需要調整舞臺大小(大多數手機像素是640*1008,iPhone4的是640*832,iPhone5/5S的是640*1008,iPhone6的是640*1030,iPhone6+的是640*1040),互動大師默認的舞臺大小是640*1008,該案例是以大多數手機尺寸為準,就不需要再調整舞臺大小了。

        第二步:新建一個手機案例

        在我的作品里,創建一個新的手機案例,根據需要調整舞臺大小(大多數手機像素是640 * 1008,如果要匹配iPhone6,可以調為640 * 1030,iPhone6+的是640 * 1040),互動大師默認的舞臺大小是640*1008。這個案例是以大多數手機尺寸為準,就不需要再調整舞臺大小了。

        vxplo-hanhan-h5-2

        第三步:添加素材

        在舞臺下添加樸樹的平凡之路音樂素材,音樂屬性設為自動播放YES,同樣添加打字機聲音的音樂素材,音樂屬性設為自動播放NO(因為只有在打字機動的時候才有聲音)。添加時間軸1(根據這個案例的需要,將時間軸的自動播放和循環播放屬性設置為NO,時間軸時長設為65s),在時間軸下添加1、2、3、4、5圖片素材,即打字機中出現的圖片,讓這些圖片成為時間軸1的子對象。同樣的方法添加時間軸2,并在它下面添加打字機的GIF圖片。

        vxplo-hanhan-h5-4

        第四步:設置打字出現的效

        選中時間軸1下的每張圖片,點擊工具欄中的軌跡按鈕為每張圖片添加軌跡。然后在軌跡上添加圖片運動的關鍵幀。例如,選中圖片1的軌跡添加關鍵幀,控制圖片1的運動。在這個案例中,這些圖片是從下到上出現的,所以只需要選中關鍵幀,修改圖片的Y坐標就可以達到向上運動的效果。比如在圖片1軌跡1中,0秒關鍵幀時,圖片1的坐標為(0, 950),在1秒的地方,添加另一個關鍵幀,并設置圖片1的坐標為(0, 200),這樣圖片1就在1秒的時間內從Y坐標為950的位置向上移動到了200的位置,即視覺上打字機中的圖片向上慢慢出現了。照此方法,用時間軸2添加打字針的運動效果,要注意,打字針是左右運動。

        vxplo-hanhan-h5-4

        第五步:添加打字機動畫

        選中舞臺,添加透明按鈕1,區域為”按下看清每一步”的大小,或可以拉得更大。添加透明按鈕的遠影是避免iPhone中由于長按圖片會自動跳出保存圖片的指令。

        在透明按鈕下添加事件,事件是交互中的核心,首先你需要梳理清楚事件的觸發條件,即用戶做了什么動作觸發了什么效果,即目標對象是什么,目標效果是什么。在這個案例中,以事件1和事件2為例,用戶的動作是長按底部按鈕時,打字針會左右運動,同時打字機中的圖片向上出現,當手指離開的時候,打字針停止,打字機中的圖片也停止向上。

        按這個邏輯,設置在透明按鈕下插入四個事件,

        vxplo-hanhan-h5-5

        事件1為手指按下,0秒,目標對象時間軸1,目標動作為繼續播放。

        事件2為手指按下,0秒,目標對象時間軸2,目標動作為繼續播放。

        vxplo-hanhan-h5-6

        以上兩個事件控制打字機在手指按下的情況下,會有打字針左右運動,打字機中的圖片向上運動的效果。

        用同樣的邏輯,可以設置控制打字機的音效。讓我們來看一下這樣完成的這個作品的效果。點擊這里預覽。

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划