5.7聊天窗口发送图片效果.pptx

第五章 交互效果的制作

第七节 聊天窗口发送图片效果

聊天窗口发送图片效果

/ 01

聊天窗口发送图片效果

3

【实例】设计聊天窗口发送图片效果。

【实例效果】

（1）如图所示，在im聊天窗口中，通过单击左下角的“添加”按钮，逆时针旋转展示“Location”“document”“photos”“camera”四个组合，并且“添加”按钮样式变为“关闭”按钮样式。

（2）单击“关闭”按钮，顺时针旋转隐藏“Location”“document”“photos”“camera”四个组合，并且“关闭”按钮样式变为“添加”按钮样式。

（3）单击“photos”组合时，旋转隐藏“Location”“document”“photos”“camera”四个组合，并且“关闭”按钮样式变为“添加”按钮样式。向上滑动展示四张图片。

（4）红框中的四张图片，单击后隐藏。

聊天窗口发送图片效果

4

【实例准备】

（1）准备im聊天页面，默认状态下如图所示。

聊天窗口发送图片效果

5

（2）准备“Location”“document”“photos”“camera”四个组合控件，默认放在“添加”动态面板的右侧，默认隐藏，如图所示。

（3）准备“图片1”“图片2”“图片3”“图片4”四张图片，放置在输入文本框上方，默认隐藏。

（4）准备“添加面板”动态面板，其中有“添加”“关闭”两种状态，如图所示。

选座系统展开效果

6

【设计思路】

（1）“添加”动态面板中有两种状态：“添加”和“关闭”。单击“添加”动态面板中的按钮可以切换状态，控制“Location”“document”“photos”“camera”四个组合显示时，会依次从水平位置向垂直位置旋转出现；关闭隐藏时，四个组合会依次从垂直位置向水平位置旋转隐藏。