大家好准夷，從今天起，UI妹兒【每周一練】正式開始莺掠，U妹將和要學(xué)習(xí)的小伙伴們一起進行AE衫嵌、交互動效設(shè)計、插畫設(shè)計彻秆、2.5D插畫設(shè)計等方面的練習(xí)楔绞，想一起學(xué)習(xí)的小伙伴可以加入進來结闸，我們一起學(xué)習(xí)！
今天U妹先給大家做一個APP抽屜式導(dǎo)航交互動效設(shè)計練習(xí)酒朵，先來看來最終的交互效果
效果圖抽屜式導(dǎo)航交互效果
1桦锄、 操作步驟
第1步：打開protopie，這個交互效果是用protopie軟件做的耻讽，軟件下載地址：http://www.protopie.cn/download/
Protopie軟件介紹：
原文中此處為鏈接，暫不支持采集
第2步：點擊新建Pie文件按鈕帕棉，選擇界面尺寸（因為我的界面尺寸是1242x2208px针肥，所以選擇8 Plus）
第3步：在菜單欄，點擊插入-圖層-圖片香伴，插入所需要的圖片素材慰枕，并將圖片移動到相應(yīng)的位置
第4步：先搞清楚交互原理：點擊導(dǎo)航圖標(biāo)——導(dǎo)航頁面從左側(cè)進入，并且首頁呈現(xiàn)遮罩層即纲，然后點擊遮罩層區(qū)域具帮，導(dǎo)航頁面還原；知道交互原理后低斋，可見我們需要新建一個遮罩層蜂厅，填充為黑色，將透明度設(shè)置為0膊畴，并將遮罩層調(diào)整到導(dǎo)航圖標(biāo)上層掘猿。
第5步：添加交互效果，為導(dǎo)航圖標(biāo)添加交互點擊事件唇跨，添加觸發(fā)條件：選擇單擊（選擇導(dǎo)航按鈕圖標(biāo)）—添加：移動（在屬性區(qū)域選擇：導(dǎo)航頁面稠通，X軸移動設(shè)置為：0，持續(xù)事件：0.3S）—添加：透明度（選擇mask圖層买猖，透明度設(shè)置為50%）
我們先來看下預(yù)覽：
第6步：再次添加交互效果改橘，為遮罩層添加交互點擊事件，可以讓導(dǎo)航頁回位玉控；點擊添加觸發(fā)條件：選擇單擊（選擇遮罩層）—添加：移動（在屬性區(qū)域選擇：導(dǎo)航頁面飞主，X軸移動設(shè)置為：-250，持續(xù)事件：0.3S）—添加：透明度（選擇mask圖層高诺，透明度設(shè)置為0）
添加完畢后整個效果就完成了既棺，我們再來看下預(yù)覽效果：
第7步：我們也可以在手機上查看交互效果，安裝protopie player APP懒叛，掃碼后即可在手機上預(yù)覽交互效果
我們也可以將交互效果丸冕，導(dǎo)出為MP4視頻格式，也可以將交互效果上傳到云端薛窥，分享鏈接給團隊人員查看胖烛。
2眼姐、 交作業(yè)方式
截止時間：5月5日（周六）22:00截止
作業(yè)形式：可將最終交互效果（用GIF、鏈接佩番、視頻格式）發(fā)送給UI妹兒公眾號众旗，我會在后臺給予點評和指點。
備注：請以 “作業(yè)名稱+昵稱”給作品命名趟畏，然后發(fā)送給UI妹兒公眾號诫钓！
3、 素材+源文件獲取
素材+源文件獲取方式：下載素材+源文件
當(dāng)然你也可以用你自己做的設(shè)計稿颗圣，來完成這次作業(yè)待榔。
5分鐘設(shè)計出抽屜式導(dǎo)航動效素材+源文件地址 ?密碼：u0p0
#UI妹兒【每周一練】——每周進步一點點#
