主要內(nèi)容

在手機(jī)微信首頁(yè)，拖動(dòng)內(nèi)容區(qū)就可以打開拍照功能，本教程，我們就學(xué)習(xí)一下使用動(dòng)態(tài)面板和部件函數(shù)來(lái)實(shí)現(xiàn)這個(gè)功能。

交互說(shuō)明

1.進(jìn)入微信首頁(yè)，用手拖動(dòng)內(nèi)容區(qū)，逐漸顯示“眼睛”動(dòng)畫效果。

注意：逐漸顯示表示“隨著手下拉的距離越長(zhǎng)，眼睛以動(dòng)畫效果出現(xiàn)”

2.當(dāng)“眼晴”沒(méi)有全部顯示時(shí)，松開手，恢復(fù)微信首頁(yè)面。

3.當(dāng)“眼睛”己全部顯示，松開手時(shí)出現(xiàn)拍照鏡頭。在拍照鏡頭頁(yè)，點(diǎn)擊“X”號(hào)，返回微信首頁(yè)。

一、原型制作

步驟1：

部件窗口拖入“圖片”部件，導(dǎo)入狀態(tài)欄

-----------------------------------------------------

步驟2：

拖入矩形，設(shè)置矩形填充、線色顏色：黑色；設(shè)置位置與大?。簒:0 y:29 w:360 h:46

拖入標(biāo)簽，編輯文本：微信；字體顏色：白色

拖入矩形、橫線、垂直線，設(shè)置線條色：白色；組合部件制作“查詢”、“新增”按鈕

-----------------------------------------------------

步驟3：

拖入矩形，設(shè)置矩形填充、線色顏色：黑色；設(shè)置位置與大小：x:0 y:25 w:360 h:173；設(shè)置矩形名稱：導(dǎo)航背景

------------------------------------------------------

步驟4：

圖片部件導(dǎo)入微信首頁(yè)內(nèi)容（此處做演示，以圖片代替）；轉(zhuǎn)換為動(dòng)態(tài)面板；設(shè)置部件名稱：內(nèi)容

------------------------------------------------------

步驟5：

部件窗口拖入圖片部件，導(dǎo)入拍照頁(yè)面圖片；右鍵快捷菜單選擇：設(shè)為隱藏、置于底層

部件窗口拖入圖像熱區(qū)部件，設(shè)置位置與大小：x:10 y:35 w:80 h:71(覆蓋在拍照?qǐng)D片關(guān)閉按鈕上)；右鍵快捷菜單選擇：設(shè)為隱藏、置于底層

------------------------------------------------------

步驟6：

準(zhǔn)備內(nèi)容區(qū)拖動(dòng)時(shí)，“眼晴”動(dòng)畫的幀圖片（可根據(jù)需要的逼真程度，準(zhǔn)備圖片數(shù)量）

------------------------------------------------------

步驟7：

圖片部件導(dǎo)入所有幀圖片，按順序疊放在一起；放置在“內(nèi)容”動(dòng)態(tài)面板下一層；批量設(shè)置圖片為隱藏。分別設(shè)置圖片名稱：1-15

二、設(shè)置拖動(dòng)動(dòng)態(tài)面板時(shí)事件，用例1-2

步驟8：

選中“內(nèi)容”動(dòng)態(tài)面板，雙擊“拖動(dòng)動(dòng)態(tài)面板時(shí)”事件，打開用例編輯器設(shè)置用例1：

第一步：編輯條件：如果“[[This.y]]”?≦?“79”并且“[[This.y]]”≥“75”

動(dòng)作1
第二步：點(diǎn)擊新增動(dòng)作 選擇“移動(dòng)”動(dòng)作
第四步：配置動(dòng)作 勾選“內(nèi)容”前復(fù)選框 移動(dòng)“沿Y軸拖動(dòng)”

動(dòng)作2
第二步：點(diǎn)擊新增動(dòng)作 選擇“顯示/隱藏”動(dòng)作
第四步：配置動(dòng)作 勾選“導(dǎo)航背景（形狀）”前復(fù)選框 可見(jiàn)性：隱藏 動(dòng)畫：淡入淡出 用時(shí)：2000毫秒

點(diǎn)擊“確定”，關(guān)閉窗口

------------------------------------------------------

步驟9：

繼續(xù)選中“內(nèi)容”動(dòng)態(tài)面板，雙擊“拖動(dòng)動(dòng)態(tài)面板時(shí)”事件，打開用例編輯器設(shè)置用例2：

第一步：編輯條件：如果“[[This.y]]”?≦?“84”并且“[[This.y]]”≥“79”

動(dòng)作1
第二步：點(diǎn)擊新增動(dòng)作 選擇“移動(dòng)”動(dòng)作
第四步：配置動(dòng)作 勾選“內(nèi)容”前復(fù)選框 移動(dòng)“沿Y軸拖動(dòng)”

動(dòng)作2
第二步：點(diǎn)擊新增動(dòng)作 選擇“顯示/隱藏”動(dòng)作
第四步：配置動(dòng)作 勾選“1”前復(fù)選框；可見(jiàn)性：顯示

動(dòng)作3
第二步：點(diǎn)擊新增動(dòng)作 選擇“顯示/隱藏”動(dòng)作
第四步：配置動(dòng)作 勾選“2、3、4、5、6、7、8、9、10、11、12、13、14、15”前復(fù)選框；可見(jiàn)性：隱藏

點(diǎn)擊“確定”，關(guān)閉窗口

三、設(shè)置“拖動(dòng)動(dòng)態(tài)面板時(shí)”事件用例3-16

步驟10：

重復(fù)步驟9（或復(fù)制），設(shè)置“拖動(dòng)動(dòng)態(tài)面板時(shí)”事件用例3-16，修改用例副本：

用例3：

第一步：如果“[[This.y]]”?≦?“89”并且“[[This.y]]”≥“84”

動(dòng)作2：顯示2

動(dòng)作3：隱藏“1、3、4、5、6、7、8、9、10、11、12、13、14、15”

用例4-用例16同樣操作，條件項(xiàng)修改拖動(dòng)距離數(shù)值，動(dòng)作設(shè)置依順序顯示某張圖片并同時(shí)隱藏除該張圖片外的其它圖片

------------------------------------------------------

四、設(shè)置“結(jié)束拖放動(dòng)態(tài)面板時(shí)”事件用例

步驟11：

繼續(xù)選中“內(nèi)容”動(dòng)態(tài)面板，雙擊“結(jié)束拖放動(dòng)態(tài)面板時(shí)”事件，打開用例編輯器設(shè)置用例1：

第一步：編輯條件：如果“[[This.y]]”?≦?“150”并且“[[This.y]]”≥“69”

動(dòng)作1
第二步：點(diǎn)擊新增動(dòng)作 選擇“移動(dòng)”動(dòng)作
第四步：配置動(dòng)作 勾選“內(nèi)容”前復(fù)選框 移動(dòng)“到拖動(dòng)前的x,y位置”

動(dòng)作2
第二步：點(diǎn)擊新增動(dòng)作 選擇“顯示/隱藏”動(dòng)作
第四步：配置動(dòng)作 勾選“15”前復(fù)選框；可見(jiàn)性：隱藏

點(diǎn)擊“確定”，關(guān)閉窗口

------------------------------------------------------

步驟12：

繼續(xù)選中“內(nèi)容”動(dòng)態(tài)面板，雙擊“結(jié)束拖放動(dòng)態(tài)面板時(shí)”事件，打開用例編輯器設(shè)置用例2：

第一步：編輯條件：如果“[[This.y]]”?≦?“170”并且“[[This.y]]”≥“151”

動(dòng)作1
第二步：點(diǎn)擊新增動(dòng)作 選擇“顯示/隱藏”動(dòng)作
第四步：配置動(dòng)作 勾選“拍照”、“（圖像熱區(qū)）”前復(fù)選框；可見(jiàn)性：顯示；更多選項(xiàng)：置于頂層

動(dòng)作2
第二步：點(diǎn)擊新增動(dòng)作 選擇“顯示/隱藏”動(dòng)作
第四步：配置動(dòng)作 勾選“15”前復(fù)選框；可見(jiàn)性：隱藏,勾選“內(nèi)容”前復(fù)選框；可見(jiàn)性：隱藏，動(dòng)畫：淡入淡出

點(diǎn)擊“確定”，關(guān)閉窗口

五、設(shè)置“圖像熱區(qū)”部件“鼠標(biāo)單擊時(shí)”事件

步驟13：

選中“圖像熱區(qū)”部件，雙擊“鼠標(biāo)單擊時(shí)”事件，打開用例編輯器設(shè)置用例1：

動(dòng)作1
第二步：點(diǎn)擊新增動(dòng)作 選擇“顯示/隱藏”動(dòng)作
第四步：配置動(dòng)作 勾選“拍照”、“（圖像熱區(qū)）”前復(fù)選框；可見(jiàn)性：隱藏

動(dòng)作2

第二步：點(diǎn)擊新增動(dòng)作 選擇“顯示/隱藏”動(dòng)作
第四步：配置動(dòng)作 勾選“內(nèi)容”前復(fù)選框；可見(jiàn)性：顯示

動(dòng)作3
第二步：點(diǎn)擊新增動(dòng)作 選擇“移動(dòng)”動(dòng)作
第四步：配置動(dòng)作 勾選“內(nèi)容”前復(fù)選框；移動(dòng)：絕對(duì)位置 x:0 y:75

點(diǎn)擊“確定”，關(guān)閉窗口

關(guān)于陪學(xué)網(wǎng)（www.pexue.com）：我們6年來(lái)專注于產(chǎn)品管理類課程的開發(fā)與制作，志在為產(chǎn)品經(jīng)理、交互設(shè)計(jì)、平面設(shè)計(jì)、需求人員分享最新、最好的產(chǎn)品類課程。學(xué)員遍布國(guó)內(nèi)外知名互聯(lián)網(wǎng)產(chǎn)品團(tuán)隊(duì)：百度、新浪、騰訊、領(lǐng)英等