CSS
Transform
Android
DecelerateInterpolator
- 开始比较快,后面越来越慢,最后平滑停下。
Indicator
正常大小的先平移,再闪烁
左右缩小的
-
区别在层级。
边缘点为主:容器整体会平移,但透明度变化主要落在“刚进入窗口的新
dot”和“刚离开窗口的旧 dot”上。中间那几颗保持稳定,所以视觉重点是“窗口
在滑,边缘在接棒”。整组一起:整排 dots 作为一个整体在平移时同时变淡/变亮,不区分边缘和中
间。实现更直接,但会让中间本来不该变化的 dots 也一起闪一下。如果你的目标是“像列表窗口往前推一格”,我推荐 边缘点为主。
-
区别在作用对象。
边缘点为主:
整组会平移,但透明度变化主要落在“新进来/被挤出去”的那一两个边缘 dot
上。中间大多数 dot 基本不变,所以视觉重点是“窗口在向左/向右挪”,整体
会更轻、更像分页指示器。整组一起:
整组也会平移,但整个 groupLayout 都会一起变淡再恢复。用户会明显感
知“这一排 dots 在切一组内容”,存在感更强,不过更容易压过你们现在已有
的选中态颜色过渡。如果你要更克制、跟现有实现更贴合,我推荐 边缘点为主。
- 平移动画时长
OUI/src/main/java/com/obric/oui/indicator/OCarouselIndicator.kt:44 退出段是 110ms。
OUI/src/main/java/com/obric/oui/indicator/OCarouselIndicator.kt:45 进入段是 180ms。 - “选中”切换时机
OUI/src/main/java/com/obric/oui/indicator/OCarouselIndicator.kt:423 到 OUI/src/main/java/com/obric/oui/indicator/
OCarouselIndicator.kt:432 现在是按滚动过半切窗,不是按毫秒:
正向滑时,positionOffset >= 0.5f 切到 nextPosition。
反向滑时,positionOffset ⇐ 0.5f 切到 selectedPosition。 - 选中颜色过渡
OUI/src/main/java/com/obric/oui/indicator/OCarouselIndicator.kt:947 到 OUI/src/main/java/com/obric/oui/indicator/
OCarouselIndicator.kt:958 的颜色切换也不是固定时长,而是跟着 positionOffset 实时插值,取决于用户滑动速度。
如果你说的“选中的切换时间”是“视觉上回中完成多久”,那就是:
过半时触发切窗,然后进入段再用 180ms 把位置动画收完。