4.6拖动面板推动元件效果.pptxVIP

第四章 图片平滑过渡效果 第六节 拖动面板推动元件效果 拖动面板推动元件效果 / 01 拖动面板推动元件效果 3 【实例】设计拖动面板推动元件效果。 【实例效果】 （1）如图所示，在默认状态下，展示移动端APP中一个代办APP的列表项页面。 （2）在列表项中，按照时间轴的顺序进行排序。向上拖动时，在【状态1】中，“15”与“16”未接触时，图中红框位置为：“15” 位置固定，“16”向上移动。 （3）在【状态2】中，“16”的上边界接触到“15”的下边界，“16”推动“15”一起向上移动。 （4）在【状态3】中，“16”到达“15”原起始位置后，“15”继续向上移动，“16”不再移动。 （5）在【状态4】中，“June 2016”的上边界接触到“16”的下边界时，“June 2016”推动“16”一起向上移动。 （6）在【状态5】中，“June 2016”全部移出列表项区域后，月份显示由“May 2016”变为“June 2016”。 （7）【状态1】到【状态5】的移动过程中，向下拖动页面内容时，也会展示相同的移动效果。 拖动面板推动元件效果 4 【实例准备】 （1）自定义名称为“内容面板1”的动态面板作为内容展示区域，设置尺寸为354像素×408像素。取消勾选【自动调整为内容尺寸】，“内容面板1”中包含“内容面板2”的动态面板和自定义名称为“15”“16”“1”“2”“3”五个动态面板，如图所示。 拖动面板推动元件效果 5 （2）如图所示，展示“内容面板2”，设置尺寸为377像素×720像素。 拖动面板推动元件效果 6 （3）图中红框位置是在“内容面板1”的“State1”状态中的矩形，分别自定义名称为“15”“16”“1”“2”“3”。 （4）设置“15” 动态面板的位置为（26,20），尺寸为40像素×40像素。 （5）设置“16” 动态面板的位置为（26,150），尺寸为40像素×40像素。 （6）设置“1” 动态面板的位置为（26,340），尺寸为40像素×40像素。 （7）设置“2” 动态面板的位置为（26,470），尺寸为40像素×40像素。 （8）设置“3” 动态面板的位置为（26,600），尺寸为40像素×40像素。 （9）如图所示，在展示月份的标题位置处设置动态面板，自定义名称为“时间”面板。其中，有“5”“6”两个状态，分别展示“May 2016”“June 2016”文字信息。 拖动面板推动元件效果 7 【设计思路】 （1）通过动态面板的拖动，实现其中内容的拖动。 （2）在拖动“内容面板1”的过程中，希望在不同的情况下移动“内容面板2”“15”“16”“1”“2”“3”元件，那么需要把“内容面板2”“15”“16”“1”“2”“3”元件放置在“内容面板1”动态面板中。 （3）在设计拖动的过程中，我们分为几种状态，如图10-46所示，通过当前“内容面板2”的垂直位置来判断。 ①在【状态1】中，“15”与“16”未接触时，移动“内容面板2”“16”“1”“2”“3”等元件，不移动“15”矩形。 ②在【状态2】中，“16”的上边界接触到“15”的下边界后，移动“内容面板2”“15”“16”“1”“2”“3”元件。 ③在【状态3】中，“16”到达“15”原起始位置后，移动“内容面板2”“15”“1”“2”“3”元件，不移动“16”矩形。 ④在【状态4】中，“June 2016”的上边界接触到“16”的下边界后，移动“内容面板2”“16”“1”“2”“3”元件，不移动“15”矩形。 ⑤在【状态5】中，“June 2016”全部移出列表项区域后，月份显示由“May 2016”变为“June 2016”。 （4）拖动可能是向上拖动，也可能是向下拖动，所以我们在进行原型设计时，要根据当前“内容面板2”的垂直位置进行判断。移动不同的元件，向上、向下拖动都可以完美实现。 拖动面板推动元件效果 8 【实例总结】 此实例中，当前日期的时间会在最上方固定位置处显示。当日期发生变化时，也是在相同的位置，通过日期与日期间的推动效果发生日期的迭代变化。这种设计让用户习惯性地知道当前展示的内容是属于哪一天的。在设计本实例的原型时，通过判断动态面板的位置，移动不同的内容，可让我们对动态面板的拖动产生更深一步的了解。 T hanks.