深入 VueToCounter

结构

VueToCounter 由 part，digit，cell 和 suffix 组成。你可以在下方的示例的标注中看到这些部分。

其中 suffix 是一个可选的部分。在下方示例中，它被用于显示时间（day，hour）单位。

---

000000day0101000987654321009876543210hour

层级关系

以上方示例作为参考，VueToCounter 的层级关系如下：

• part
  • digit
    • cell
    • ...
  • digit
    • cell
    • ...
  • suffix

• part
  • digit
    • cell
    • ...
  • digit
    • cell
    • ...
  • suffix

用途

简单使用时（如简单的滚动效果， 本地化，自定义样式），大可不必关心 VueToCounter 的实现细节。

但是，当我们需要自定义动画效果，例如（0V V 0u u 0e e 0  0T T 0o o 0  0C C 0o o 0u u 0n n 0t t 0e e 0r r ），或者需要自定义每个数位的样式时，了解 VueToCounter 的结构是必不可少的。

为了提供足够的自由度来自定义动画效果和样式。你可以使用

1. animationOptions 设置精确到 digit 的动画属性。
2. cellStyle 设置精确到 cell 的样式属性。

设置动画属性

animationOptions 是 Motion 的配置对象 (详见 Motion API )，你可以在这里设置动画的属性，比如 duration，delay，ease 等。

配置的形式可以有如下几种：

• 一个对象，包含你设置的配置项，将应用到所有 digit。

  { duration: 0.5, delay: 0.1 }

• 一个一维数组，将应用到对应 part 中的所有 digit。

  [
    { duration: 0.5, delay: 0.1 }, // part 1
    { duration: 0.5, delay: 0.4 }, // part 2
    ...
  ]

• 一个二维数组，将应用到对应 part 中的对应 digit。

  [
    [ // part 1
      { duration: 0.5, delay: 0.1 }, // digit 1
      { duration: 0.5, delay: 0.4 }, // digit 2
      ...
    ],
    ...
  ]

• 一个回调函数，接受一个对象，其中包含：

  • testResults：一个二维数组，包含了每个 digit 的测试结果。
  • data：用于滚动的数据。包含了构造每个 digit 滚动列表的数据。
  • direction：滚动的方向。up 或 down。
  • value：数值的新值和旧值。

  函数的返回值可以是上述三种形式之一。

比如，在延时示例中，在启用延迟递增后，对每个 digit 的动画延时进行了设置，以实现递增的延时效果。

const delay = ref(0.1);
const increase = ref(false);
const animationOptions = ({ testResults }) => {
  if (!increase.value) return { delay: delay.value };

  let count = 0;
  return testResults.map((part) =>
    part.map(() => ({ delay: count++ * delay.value }))
  );
};

自定义样式

cellStyle 是个 CSSProperties ，你可以在这里设置 cell 的样式。

配置的形式在 animationOptions 的基础上增加了一层：

• 一个三维数组，将应用到对应 part 中的对应 digit 中的对应 cell。

  [
    [
      // part 1
      [
        // digit 1
        { color: "red" }, // cell 1
        { color: "blue" }, // cell 2
      ],
    ],
  ];

• 回调函数的形式与 animationOptions 相同。也可以返回三维数组。