4.3控件向不同方向翻转.pptxVIP

第四章 图片平滑过渡效果 第三节 控件向不同方向翻转 控件向不同方向翻转 / 01 控件向不同方向翻转 3 【实例】设计控件向不同方向翻转 【实例效果】 如图所示，左侧图片为在手机端APP中展示“图片+标题+简介”的卡片样式信息，通过单击操作，卡片区域翻转为右侧展示样式展示信息详情。 在卡片中，通过单击事件，从列表切换为详情的转场动画有多种。而在APP中，可以判断当前手指单击的位置，单击不同的位置，可以设置不同的转场动画方向。例如，单击卡片上方区域，则卡片的转场动画【向上翻转】，切换到“详情”页面。 控件向不同方向翻转 4 【实例准备】 （1）图所示为一个手机端APP的背景图片。 （2）如图所示，放置一个318 像素×330像素的动态面板，自定义名称为“卡片”。 控件向不同方向翻转 5 （3）在“卡片”动态面板中有两个状态：“列表”和“详情”，如图所示，尺寸都设置为318像素×330像素。。 （4）在“卡片”动态面板的“列表”状态中，如图所示，内容层级的上层放置四个热区，分别命名为：“列表-上”“列表-下”“列表-左”“列表-右”。设置四个热区的目的是为了区别单击位置，单击不同的位置，转场动画的方向是不同的。 控件向不同方向翻转 6 （5）在“卡片”动态面板的“详情”状态中，如图所示，内容层级的上层放置四个热区，分别命名为：“详情-上”“详情-下”“详情-左”“详情-右”。设置四个热区的目的是为了区别单击位置，单击不同的位置，转场动画的方向是不同的。 控件向不同方向翻转 7 【设计思路】 （1）切换页面中的内容，选择包含两个状态的动态面板，使用“动态面板切换状态”来实现内容的切换。 （2）转场动画需要使用翻转效果，只需在切换动态面板的过程中，进入和退出动画效果选择翻转动画即可。 （3）需要通过单击面板内容的不同位置来确定不同的翻转方向。在不同的位置放置热区元件，单击不同位置的热区，翻转的方向即不同。 控件向不同方向翻转 8 【实例总结】 我们在设计移动端的产品交互效果时要充分考虑终端的使用场景，移动端最好的交互动作是左滑、右滑，其次是单击效果。在本实例中，如果是在当前列表项中有多张图片内容需要切换展示，那么左右滑动的效果最佳，因为是并列的产品层级。如果产品层级是递进关系，转场动画使用翻转效果，那么为用户呈现的就是进入的视觉效果，就从交互效果中体现了产品的流程。 T hanks.