
推近操作再拉回讲功能
配件从主体里逐个滑出排成一行,文案逐词同步出现,停留后对称收回。
文案的词数和配件个数一一对应,正放和倒放对称,成为可逆的动作;配件尺寸从大到小递减,行内产生透视感;整行没有辅助线或标注。
cubic-bezier(0.16,1,0.3,1)(expo.out);收回是展开的精确时间镜像;镜头推近 sine.inOut;字标和副标 expo.out#f4f4f6,哑光白色产品(#f4f4f3,roughness 0.62),大面积柔和顶部灯箱加宽幅正面补光,隐形地面上的柔和接触阴影;不加色调映射;深灰文字 #1d1d1f(文案 50px,字标 156px)用「吐出排列(Dispense Line-up)」做配件展示,整段 10.5 秒。浅灰白底(#f4f4f6),一台哑光白色充电底座,锁定侧视机位(fov 13°,用镜头偏移让底座在左、一排配件在中偏右)。5 个电源适配器(140W、96W、70W、35W、20W)从底座右侧面向右滑出,排成一行,尺寸从大到小:最小的先出发、走得最远,后一个晚 0.15 秒出发,单个滑出 0.3 秒,用 expo.out(cubic-bezier(0.16,1,0.3,1)),总共 0.9 秒。每个配件开始移动 0.1 秒后,下方文案多出一个词,词直接出现无淡入,词数与配件数一致。停留 1.1 秒后按精确的时间镜像收回,耗时 0.9 秒:配件从右往左回到底座,文案按相反顺序逐词删除。做两轮(0.5 秒和 4.3 秒开始),第二轮换一句文案,镜头切到左侧三四分之三视角(fov 23°),最后回到侧视,7.75 秒字标淡入(expo.out,blur 10px→0)。每个镜头用 sine.inOut 推近 3%。柔和顶光,柔和接触阴影,运动部分加 14 子帧运动模糊。3D 由时间函数驱动,使收回成为镜像,GSAP 只负责文案词和字标。













