主要内容
在手机微信首页，拖动内容区就可以打开拍照功能，本教程，我们就学习一下使用动态面板和部件函数来实现这个功能。
交互说明
1.进入微信首页，用手拖动内容区，逐渐显示“眼睛”动画效果。
注意：逐渐显示表示“随着手下拉的距离越长，眼睛以动画效果出现”
2.当“眼晴”没有全部显示时，松开手，恢复微信首页面。
3.当“眼睛”己全部显示，松开手时出现拍照镜头。在拍照镜头页，点击“X”号，返回微信首页。
一、原型制作
步骤1：
部件窗口拖入“图片”部件，导入状态栏
-----------------------------------------------------
步骤2：
拖入矩形，设置矩形填充、线色颜色：黑色；设置位置与大小：x:0 y:29 w:360 h:46
拖入标签，编辑文本：微信；字体颜色：白色
拖入矩形、横线、垂直线，设置线条色：白色；组合部件制作“查询”、“新增”按钮
-----------------------------------------------------
步骤3：
拖入矩形，设置矩形填充、线色颜色：黑色；设置位置与大小：x:0 y:25 w:360 h:173；设置矩形名称：导航背景
------------------------------------------------------
步骤4：
图片部件导入微信首页内容（此处做演示，以图片代替）；转换为动态面板；设置部件名称：内容
------------------------------------------------------
步骤5：
部件窗口拖入图片部件，导入拍照页面图片；右键快捷菜单选择：设为隐藏、置于底层
部件窗口拖入图像热区部件，设置位置与大小：x:10 y:35 w:80 h:71(覆盖在拍照图片关闭按钮上)；右键快捷菜单选择：设为隐藏、置于底层
------------------------------------------------------
步骤6：
准备内容区拖动时，“眼晴”动画的帧图片（可根据需要的逼真程度，准备图片数量）
------------------------------------------------------
步骤7：
图片部件导入所有帧图片，按顺序叠放在一起；放置在“内容”动态面板下一层；批量设置图片为隐藏。分别设置图片名称：1-15
二、设置拖动动态面板时事件，用例1-2
步骤8：
选中“内容”动态面板，双击“拖动动态面板时”事件，打开用例编辑器设置用例1：
第一步：编辑条件：如果“[[This.y]]” ≦ “79”并且“[[This.y]]”≥“75”
动作1
第二步：点击新增动作 选择“移动”动作
第四步：配置动作 勾选“内容”前复选框 移动“沿Y轴拖动”
动作2
第二步：点击新增动作 选择“显示/隐藏”动作
第四步：配置动作 勾选“导航背景（形状）”前复选框 可见性：隐藏 动画：淡入淡出 用时：2000毫秒
点击“确定”，关闭窗口
------------------------------------------------------
步骤9：
继续选中“内容”动态面板，双击“拖动动态面板时”事件，打开用例编辑器设置用例2：
第一步：编辑条件：如果“[[This.y]]” ≦ “84”并且“[[This.y]]”≥“79”
动作1
第二步：点击新增动作 选择“移动”动作
第四步：配置动作 勾选“内容”前复选框 移动“沿Y轴拖动”
动作2
第二步：点击新增动作 选择“显示/隐藏”动作
第四步：配置动作 勾选“1”前复选框；可见性：显示
动作3
第二步：点击新增动作 选择“显示/隐藏”动作
第四步：配置动作 勾选“2、3、4、5、6、7、8、9、10、11、12、13、14、15”前复选框；可见性：隐藏
点击“确定”，关闭窗口
三、设置“拖动动态面板时”事件用例3-16
步骤10：
重复步骤9（或复制），设置“拖动动态面板时”事件用例3-16，修改用例副本：
用例3：
第一步：如果“[[This.y]]” ≦ “89”并且“[[This.y]]”≥“84”
动作2：显示2
动作3：隐藏“1、3、4、5、6、7、8、9、10、11、12、13、14、15”
用例4-用例16同样操作，条件项修改拖动距离数值，动作设置依顺序显示某张图片并同时隐藏除该张图片外的其它图片
------------------------------------------------------
四、设置“结束拖放动态面板时”事件用例
步骤11：
继续选中“内容”动态面板，双击“结束拖放动态面板时”事件，打开用例编辑器设置用例1：
第一步：编辑条件：如果“[[This.y]]” ≦ “150”并且“[[This.y]]”≥“69”
动作1
第二步：点击新增动作 选择“移动”动作
第四步：配置动作 勾选“内容”前复选框 移动“到拖动前的x,y位置”
动作2
第二步：点击新增动作 选择“显示/隐藏”动作
第四步：配置动作 勾选“15”前复选框；可见性：隐藏
点击“确定”，关闭窗口
------------------------------------------------------
步骤12：
继续选中“内容”动态面板，双击“结束拖放动态面板时”事件，打开用例编辑器设置用例2：
第一步：编辑条件：如果“[[This.y]]” ≦ “170”并且“[[This.y]]”≥“151”
动作1
第二步：点击新增动作 选择“显示/隐藏”动作
第四步：配置动作 勾选“拍照”、“（图像热区）”前复选框；可见性：显示；更多选项：置于顶层
动作2
第二步：点击新增动作 选择“显示/隐藏”动作
第四步：配置动作 勾选“15”前复选框；可见性：隐藏,勾选“内容”前复选框；可见性：隐藏，动画：淡入淡出
点击“确定”，关闭窗口
五、设置“图像热区”部件“鼠标单击时”事件
步骤13：
选中“图像热区”部件，双击“鼠标单击时”事件，打开用例编辑器设置用例1：
动作1
第二步：点击新增动作 选择“显示/隐藏”动作
第四步：配置动作 勾选“拍照”、“（图像热区）”前复选框；可见性：隐藏
动作2
第二步：点击新增动作 选择“显示/隐藏”动作
第四步：配置动作 勾选“内容”前复选框；可见性：显示
动作3
第二步：点击新增动作 选择“移动”动作
第四步：配置动作 勾选“内容”前复选框；移动：绝对位置 x:0 y:75
点击“确定”，关闭窗口
关于陪学网（www.pexue.com）：我们6年来专注于产品管理类课程的开发与制作，志在为产品经理、交互设计、平面设计、需求人员分享最新、最好的产品类课程。学员遍布国内外知名互联网产品团队：百度、新浪、腾讯、领英等
网友评论