25～32℃
日出 05:45日落 19:04

28℃中雨

09:00
28℃中雨
09:00

天气信息由中国天气、华风爱科提供

09:40
天气详情
切换日期或 15 日/90 日入口时出现，用于说明日期选中态切换动效。
日期选项卡切换

主时长：350ms

主缓动：cubic-bezier(0.36, 0.85, 0.30, 1.00)

白色高亮：旧块 opacity 1→0、scale 1→0.6；新块 opacity 0→1、scale 0.6→1。

蓝色条：旧条原地 opacity 1→0；新条 scaleX 0→1，transform-origin: left center。

日期切换导致天气卡片、15 日天气卡片或内容模块刷新时出现。
卡片出现动效

出现属性：opacity 0→1

出现时长：250ms

出现缓动：cubic-bezier(0.33, 0.00, 0.67, 1.00)

配套消失：opacity 1→0，10ms，同缓动；消失完成后隐藏更新内容，再执行出现。

拖动小时曲线时出现，说明把手、竖线和实时读数的跟手反馈。
曲线拖拽动效

拖拽中：把手和竖线跟手移动。

实时反馈：顶部读数跟随更新。

松手后：读数隐藏，把手复位。

日期切换且曲线数据刷新后出现。
曲线出现动效

范围：曲线、面积、把手和竖线。

方向：从左到右裁切出现。

时长：350ms。

缓动：cubic-bezier(0.28, 0.40, 0.20, 1.00)。

刷新页面后出现，说明 loading 和内容入场。
页面加载动效

Loading：停留 1000ms。

Loading 消失：opacity 1→0，150ms。

内容入场：从上到下透明度出现。

间隔：每组延迟 100ms。

日期切换后广告瀑布流内容刷新。
瀑布流刷新

刷新方式：硬切。

不做透明度、位移或缩放。

点击图表卡右上角指标按钮时出现，说明下拉菜单的液态弹性展开、收起、点按与拖拽形变。
菜单展开收起（液态弹性）

展开：X/Y 两轴独立两段式弹簧，transform-origin: 50% 0。Y（快轴）0.2→1，初速 v0 1.8，(0.30s, b0.30) + (0.30s, b0.15)；X（慢轴）0.4→1，初速 v0 0.9，(0.40s, b0.30) + (0.30s, b0.15)。先纵向挤出、再横向铺开。v0 为插值器初始速度（进度/秒），两段切换点值与速度连续。

材质淡入 0→1，0.30s，cubic-bezier(0.16, 0, 0.25, 1)：毛玻璃 blur、白色材质 alpha、阴影、文字逐属性同步淡入（不用 opacity，避免毛玻璃失效）。

收起：面积守恒耦合。Y 高度 1→0.2，(0.40s, b0) + (0.30s, b0)；面积 A 1→0.04，(0.30s, b0) + (0.30s, b0)，宽度 = A / 高度。材质淡出 0.20s，同一贝塞尔。

点按：整卡 scale 1.03（0.15s, b0，按下到松手只启动一次，滑动中不重启；保持到松手），被按选项背景叠 rgba(0,0,0,.30)；松手整卡收回与高亮淡出共用回弹 0.40s, b0.48。按住滑动时高亮跟手切换，松手选中；滑出菜单松手取消。

拖拽（超过 10px）：液滴形变，体积守恒。p = 1 − e^(−dist/600)，sx = (1 + 0.1p·cos²φ) / (1 + 0.1p·sin²φ)，sy = 1/sx，沿拖拽方向位移 p·23px，基准点为卡片中心。松手二段回弹 (0.30s, b1.2) + (0.58s, b0.4)。

箭头：触发按钮箭头 rotate 45°→225°，250ms，cubic-bezier(0.33, 0, 0.67, 1)。