adui/components/_util/motion.ts

<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>

/**
 * 参考屏幕尺寸 1920 * 1080, 21.5 英寸，为统计下使用最多的尺寸
 * PPI = 102.46
 * 对于台式电脑或笔记本电脑的屏幕，一般距离为 50 厘米
 * 一般来说，中心视觉的范围约为视野的直径约 10°，外围视觉则延伸到大约 170°。
 * 也就是说，距离 50 厘米的屏幕，中心视觉范围约为 2 * 50 * tan(5°) = 8.75 厘米
 * 对于 PPI 102.46 的屏幕来说，中心视觉范围约为 8.75 * 102.46 / 2.54 = 354.5 像素
 * 我们大致地取到 350px
 *
 * 在 350 以下的距离，即在中心视觉范围内，使用 ease-base，相对平缓，能够提供一种流畅的过渡效果，用户可以轻松地跟踪和理解这种变化。
 * 在 350 以上的距离，即在外围视觉范围内，使用 ease-gentle/bounce，更加明显和有力，吸引用户注意力，传达出页面元素之间的较大距离。
 */
export const BOUNCE_DISTANCE = 350

/**
 * 以 350px 为正方形的边长，计算出一个正方形的面积为 350 * 350 = 122500
 *
 * 当元素尺寸小于 122500 时，使用 ease-base；
 * 当元素尺寸大于 122500 时，使用 ease-gentle/bounce。
 */
export const BOUNCE_SIZE = 122500