在iOS应用里通过WKWebView承载视频页面时，很多产品希望用户能把视频小窗拖到任意位置，并在松手后像原生画中画那样带一点重力加速度和惯性滑动。但实际开发中，网页自身的拖拽逻辑往往只用线性插值或简单速度衰减，导致窗口运动手感生硬。要把这种拖拽加速度做得自然，就需要引入物理引擎来模拟重力加速度与摩擦阻力。
所谓画中画窗口拖拽加速度，是指用户手指离开屏幕后，悬浮视频窗因为之前拖拽积累的初速度，在重力或惯性影响下继续运动并逐步减速的过程。如果只靠前端定时器减去固定速度，运动曲线会和真实物理规律脱节。物理引擎则把窗口视作一个有质量的物体，每一帧根据受力更新速度和位置，从而自然产生加速度变化。
在WKWebView场景下，视频本身由网页控制，但画中画小窗通常由原生层或桥接的悬浮视图承载。我们要做的，是在原生端维护一个物理世界，把小窗注册为刚体，网页通过桥接把拖拽事件和松手速度传给原生，由物理引擎计算后续运动，再反向同步给WebView的悬浮样式。这样既能保留网页视频能力，又拥有原生级手感。
为什么需要物理引擎模拟重力加速度
系统原生画中画在拖拽松手时，窗口会顺着惯性滑动，遇到屏幕边缘轻巧回弹，整个过程符合日常对物体运动的直觉。这种直觉来自真实的重力加速度与接触面摩擦：物体有质量，地球有引力，空气和边缘有阻力。如果开发者用单纯数学公式猜测减速比例，不同设备帧率下表现不一致，用户一眼就能察觉虚假感。
物理引擎如UIKit Dynamics、Box2D或自研轻量积分器，内置了重力向量、碰撞边界和摩擦系数。把小窗交给引擎后，你只需在拖拽时设置刚体速度，在松手时让引擎接管。引擎用固定时间步长做欧拉或韦尔莱积分，得到平滑的加速度曲线。相比手写衰减代码，它更稳也更贴近系统表现。
常用物理方案与接入方式
如果项目允许使用系统能力，UIKit Dynamics是最省事的选择。它提供UIGravityBehavior、UIDynamicItemBehavior和UICollisionBehavior，可以直接把代表画中画窗口的UIView设为dynamic item。拖拽中用pan手势更新item位置并实时记录速度，松手时把最后速度赋给behavior的addLinearVelocity，引擎就会继续推着窗口跑。
当WKWebView小窗并非纯原生视图，而是网页内绝对定位元素时，可以用桥接把位置同步出来：原生层建一个隐形UIView做物理体，引擎算完坐标后，通过webView.evaluateJavaScript把left、top写回网页元素。这样既用到原生物理，也不破坏网页播放结构。若团队偏好跨平台，也可在JS层接入轻量物理库，用requestAnimationFrame做积分，但注意帧率同步问题。
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| UIKit Dynamics | 原生承载小窗 | 系统级、无需第三方库 | 仅iOS、需视图映射 |
| Box2D移植 | 复杂碰撞需求 | 物理精确、可扩展 | 体积大、接入成本高 |
| JS轻量积分 | 纯网页小窗 | 跨端、改动小 | 帧率波动影响手感 |
重力加速度与拖拽加速度的具体实现
实现时先定义重力向量，例如UIKit里默认重力方向向下，大小约9.8缩放值。拖拽过程中，暂停重力行为，仅用同步位移跟随手指；同时用时间戳差计算手指速度，单位像素每秒。松手瞬间，恢复重力并给刚体附加刚才算出的线性速度。此时窗口会边受重力下沉边靠惯性水平滑，遇到边界碰撞行为产生回弹。
若希望画中画窗口停在某高度而非落到底部，可以关闭重力或把边界设为可视区，仅保留拖拽惯性摩擦。UIDynamicItemBehavior里的resistance属性控制空气阻力，elasticity控制边缘弹性。调小resistance会让滑动更远距离，调低elasticity则回弹更弱。通过这些参数组合，就能模拟出不同轻重的小窗质感。
边界与多窗口处理
当屏幕可能存在多个画中画或通知浮窗时，应为每个刚体设独立碰撞边界，避免穿插。物理引擎支持把屏幕内缩区域作为collision boundary，窗口碰到即反弹。若WKWebView旋转或分屏，需监听布局变化并实时更新边界矩形，否则松手后窗口可能飞出可视范围。
另外，网页视频暂停或页面跳转时要销毁对应物理体，防止野指针。可在WebView的webViewWebContentProcessDidTerminate或自定义消息里移除dynamic item，并停止该item的行为引用，保证内存和动画都干净退出。
调试与参数调优经验
手感是否自然，很大程度取决于时间步长和速度缩放。建议把引擎步长锁在每秒六十次，拖拽速度采集用CADisplayLink而非touch事件间隔，这样松手速度更准。若发现窗口下滑过快，就把重力系数乘零点六；若水平滑太短，降低resistance到零点零五以下。
真机调试时打开慢动作录屏，观察松手后前三十帧的位移曲线。理想状态下，位移差应逐帧缩小且带轻微过冲。如果曲线呈折线，说明速度赋值断档，需要把拖拽末速度做指数平滑再传给引擎。经过几轮对比，WKWebView画中画小窗就能拥有和系统播放器几乎一致的拖拽加速度体验。
WKWebView画中画拖拽加速度物理引擎模拟修改时间：2026-08-11 11:00:48