同一块表面,承接两种内容

示例让摘要卡片在预览区域中扩大,宽度、高度和圆角同时变化。摘要先淡出,详情再在靠后的时间段进入。

这种接续可以帮助用户理解详情来自哪张卡片。示例使用固定的内部边界演示形变,没有执行页面跳转,也没有测量真实页面中的卡片位置。

把形变与内容的时间分配开

编辑器中的整体时长会同步缩放各段轨道,保持摘要淡出与详情进入的相对顺序。可以先减慢预览,观察内容切换是否和表面变化相互配合。

整体位移、缩放和缓动可以继续调整。当前示例保留自己原有的形状与圆角轨道,避免让内容和容器一起被套上无关的统一样式。

用于真实内容前,需要检查什么

示例里的内容高度是固定的。接入真实项目时,需要检查长标题、多行正文、图片加载和窄屏下的实际尺寸,不能直接把演示边界当作所有内容的最终布局。

关闭会反向播放相关轨道。减少动态效果开启时,直接到达相应状态;摘要与详情仍然要保持清楚的交互关系。