CSS

Transform

Android

DecelerateInterpolator

  • 开始比较快,后面越来越慢,最后平滑停下。

Indicator

正常大小的先平移,再闪烁
左右缩小的

  • 区别在层级。

    边缘点为主:容器整体会平移,但透明度变化主要落在“刚进入窗口的新
    dot”和“刚离开窗口的旧 dot”上。中间那几颗保持稳定,所以视觉重点是“窗口
    在滑,边缘在接棒”。

    整组一起:整排 dots 作为一个整体在平移时同时变淡/变亮,不区分边缘和中
    间。实现更直接,但会让中间本来不该变化的 dots 也一起闪一下。

    如果你的目标是“像列表窗口往前推一格”,我推荐 边缘点为主。

  • 区别在作用对象。

    边缘点为主:
    整组会平移,但透明度变化主要落在“新进来/被挤出去”的那一两个边缘 dot
    上。中间大多数 dot 基本不变,所以视觉重点是“窗口在向左/向右挪”,整体
    会更轻、更像分页指示器。

    整组一起:
    整组也会平移,但整个 groupLayout 都会一起变淡再恢复。用户会明显感
    知“这一排 dots 在切一组内容”,存在感更强,不过更容易压过你们现在已有
    的选中态颜色过渡。

    如果你要更克制、跟现有实现更贴合,我推荐 边缘点为主。

  1. 平移动画时长
    OUI/src/main/java/com/obric/oui/indicator/OCarouselIndicator.kt:44 退出段是 110ms。
    OUI/src/main/java/com/obric/oui/indicator/OCarouselIndicator.kt:45 进入段是 180ms。
  2. “选中”切换时机
    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。
  3. 选中颜色过渡
    OUI/src/main/java/com/obric/oui/indicator/OCarouselIndicator.kt:947 到 OUI/src/main/java/com/obric/oui/indicator/
    OCarouselIndicator.kt:958 的颜色切换也不是固定时长,而是跟着 positionOffset 实时插值,取决于用户滑动速度。

如果你说的“选中的切换时间”是“视觉上回中完成多久”,那就是:
过半时触发切窗,然后进入段再用 180ms 把位置动画收完。