为旅行/酒店/旅游平台设计动效时…

当你在做旅行预订、酒店、旅游或度假规划类界面，需要让动效既有“梦想感”又不失预订的可靠感时使用。

适用场景

解决思路

1. Squash & Stretch（挤压与拉伸）：预订按钮按下时做轻微挤压，给出满足感；地图图钉落到地点时弹跳；飞机图标在飞行动画中做轻微拉伸。
2. Anticipation（预备动作）：搜索按钮在结果揭晓前先做蓄势；预订确认在成功前留一个戏剧性停顿；目的地揭晓前制造悬念瞬间。
3. Staging（舞台调度）：目的地图片用全出血（full-bleed）大图作为主视觉；价格信息清晰但视觉层级次于体验本身；预订流程中当前步骤要明确聚焦。
4. Straight Ahead & Pose to Pose（连贯动作与关键帧动作）：地图探索用平滑的平移与缩放（straight ahead）；预订流程用清晰的分步推进（pose to pose）；行程构建器按顺序规划活动。
5. Follow Through & Overlapping Action（跟随与重叠动作）：搜索结果卡片以错峰（stagger）方式层叠进入；图片画廊中的照片带跟随动作落定；地图标记先落地，随后再弹出信息浮层。
6. Slow In & Slow Out（缓入缓出）：梦幻型转场用平滑、放松的节奏；图片轮播用优雅的滑动过渡；模态框打开时长控制在舒适的 350-400ms。
7. Arc（弧线）：飞行路径在地图上用曲线表示；照片滑动使用自然的弧形手势；目的地之间的转场走弧线。
8. Secondary Action（次要动作）：预订成功时飞机起飞并撒下彩纸；价格更新时在优惠出现处加闪光；加载状态使用地点主题的动画。
9. Timing（时间节奏）：向往型时刻用较慢的 400-500ms 营造梦幻感；预订类操作使用自信的 250-350ms；搜索反馈要快，约 150ms。
10. Exaggeration（夸张）：庆祝时刻要够隆重，预订确认值得大肆渲染；梦想目的地要放大其向往感；优惠要戏剧化地突出节省金额。
11. Solid Drawing（扎实的构图/绘制）：摄影优先，使用惊艳的目的地影像；地图要准确，保证地理表示正确；图标保持一致，形成统一的旅行图标体系。
12. Appeal（吸引力）：动效要有启发性，能点燃旅行欲望；呈现高端服务感，建立奢侈品牌联想；保持文化敏感性，做尊重性的表达。
13. 行业时长标准——图片过渡：400ms，ease-in-out。
14. 行业时长标准——地图动画：500ms，ease-out。
15. 行业时长标准——预订步骤：300ms，ease-in-out。
16. 行业时长标准——搜索结果：250ms，ease-out。
17. 行业时长标准——确认反馈：600ms，custom-bounce。

适用边界 · 注意事项

• 面向企业差旅管理后台、报表或纯效率工具类界面时，过度梦幻的动效会拖慢操作节奏。
• 金融、医疗等要求严肃克制的场景，以及用户开启 prefers-reduced-motion 或低端设备性能受限时，应减少或关闭这些动效。