- 1、本文档共9页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
第四章 图片平滑过渡效果
第三节 控件向不同方向翻转
控件向不同方向翻转
/ 01
控件向不同方向翻转
3
【实例】设计控件向不同方向翻转
【实例效果】
如图所示,左侧图片为在手机端APP中展示“图片+标题+简介”的卡片样式信息,通过单击操作,卡片区域翻转为右侧展示样式展示信息详情。
在卡片中,通过单击事件,从列表切换为详情的转场动画有多种。而在APP中,可以判断当前手指单击的位置,单击不同的位置,可以设置不同的转场动画方向。例如,单击卡片上方区域,则卡片的转场动画【向上翻转】,切换到“详情”页面。
控件向不同方向翻转
4
【实例准备】
(1)图所示为一个手机端APP的背景图片。
(2)如图所示,放置一个318 像素×330像素的动态面板,自定义名称为“卡片”。
控件向不同方向翻转
5
(3)在“卡片”动态面板中有两个状态:“列表”和“详情”,如图所示,尺寸都设置为318像素×330像素。。
(4)在“卡片”动态面板的“列表”状态中,如图所示,内容层级的上层放置四个热区,分别命名为:“列表-上”“列表-下”“列表-左”“列表-右”。设置四个热区的目的是为了区别单击位置,单击不同的位置,转场动画的方向是不同的。
控件向不同方向翻转
6
(5)在“卡片”动态面板的“详情”状态中,如图所示,内容层级的上层放置四个热区,分别命名为:“详情-上”“详情-下”“详情-左”“详情-右”。设置四个热区的目的是为了区别单击位置,单击不同的位置,转场动画的方向是不同的。
控件向不同方向翻转
7
【设计思路】
(1)切换页面中的内容,选择包含两个状态的动态面板,使用“动态面板切换状态”来实现内容的切换。
(2)转场动画需要使用翻转效果,只需在切换动态面板的过程中,进入和退出动画效果选择翻转动画即可。
(3)需要通过单击面板内容的不同位置来确定不同的翻转方向。在不同的位置放置热区元件,单击不同位置的热区,翻转的方向即不同。
控件向不同方向翻转
8
【实例总结】
我们在设计移动端的产品交互效果时要充分考虑终端的使用场景,移动端最好的交互动作是左滑、右滑,其次是单击效果。在本实例中,如果是在当前列表项中有多张图片内容需要切换展示,那么左右滑动的效果最佳,因为是并列的产品层级。如果产品层级是递进关系,转场动画使用翻转效果,那么为用户呈现的就是进入的视觉效果,就从交互效果中体现了产品的流程。
T hanks.
文档评论(0)