微信H5頁面交互手指觸發如何做?

Tags: 微信, 頁面, 手指,

在常見的微信朋友圈中,經常有H5動畫需要手指按下或擡起來觸發圖片切換或者動畫效果,那麼手指觸發是如何設置的呢。拿MugedaH5在線設計工具來講:

工具/原料

在線工具

動畫素材

方法/步驟

首先進入工具,打開舞臺界面

微信H5頁面交互手指觸發如何做

在舞臺上給手印做一個掃描的動畫,如下圖所示:

微信H5頁面交互手指觸發如何做

新建一個按圖層,命名為”按鈕“,在舞臺上畫一個矩形,這個矩形的大小能把圖層0上的圖形遮擋住即可,如下圖所示:

微信H5頁面交互手指觸發如何做

把新畫的矩形透明度設置為0,如下圖所示:

微信H5頁面交互手指觸發如何做

選中按鈕層的第1幀,在屬性面板上把動作設置為【行為】,點擊【編輯】,展開編輯行為對話框,展開播放控制選擇【跳轉並播放】,把事件設置為【手指按下】;(註釋:為什麼要在舞臺上畫一個透明的矩形,而不直接使用圖片呢?因為長時間按住手機裡的圖片就會彈出“保存圖片”選項),如下圖所示:

微信H5頁面交互手指觸發如何做

點擊【編輯】,把幀號設置為2,點擊確認,如下圖所示:

微信H5頁面交互手指觸發如何做

在播放控制裡點擊【跳轉並停止】,事件設置為【手指擡起】,如下圖所示:

微信H5頁面交互手指觸發如何做

點擊跳轉並停止的【編輯】,把幀號設置為1,點擊【確認】,如下圖所示:

微信H5頁面交互手指觸發如何做

再添加暫停,把事件設置為【出現】,如下圖所示:

微信H5頁面交互手指觸發如何做

預覽動畫,用鼠標按住圖形,又快速的擡起鼠標測試,大功告成,如下圖所示:

微信H5頁面交互手指觸發如何做

再點擊生成就可以了

相關問題答案