In-depth TimeredCounter

Structure

TimeredCounter consists of , , , and . You can see these parts annotated in the example below.

The is an optional part. In the example below, it is used to display time units (day, hour).

Hierarchy

Using the example above as a reference, the hierarchy of TimeredCounter is as follows:

part -> digit -> cell
-> digit -> cell
-> suffix (day)

part -> digit -> cell
-> digit -> cell
-> suffix (hour)

Usage

For simple usage (such as simple scrolling effect, localization), you don't need to worry about the implementation details of TimeredCounter.

However, when we need to customize animation effects, such as (), or need to customize the style of each digit, understanding the structure of TimeredCounter is essential.

To provide enough freedom to customize animation effects and styles, you can use

1. animationOptions to set animation properties down to the level.
2. cellStyle to set style properties down to the level.

Set Animation Options

animationOptions is the second parameter of Element.animate(keyframes, options), where you can set animation properties such as duration, delay, easing, etc.

The configuration can take the following forms:

• An object containing the configuration items you set, which will be applied to all .

  { duration: 0.5, delay: 0.1 }

• A one-dimensional array, which will be applied to all in the corresponding .

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

• A two-dimensional array, which will be applied to the corresponding in the corresponding .

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

• A callback function that accepts an object containing:

  • preprocessData: a two-dimensional array containing the test results for each .
  • data: the data used for scrolling. Contains the data for constructing the scroll list for each .
  • direction: the direction of scrolling. up or down.
  • value: the new and old values of the number.

  The return value of the function can be one of the three forms above.

For example, in the delay example, after enabling delayed increment, the animation delay for each is set to achieve the effect of incremental delay.

const delay = ref(100);
const increase = ref(false);

onMounted(() => watch([number, delay, increase,], update, { immediate: true }));
function update() {
  const _number = number.value;
  const _delay = delay.value;
  const _increase = increase.value;

  const counter = document.getElementById('advanced-delay-counter');
  counter.value = _number;
  counter.animationOptions = ({ preprocessData }) => {
    if (!_increase) return { delay: _delay };

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

Custom Style

cellStyle is a CSSProperties object where you can set the style of .

The configuration forms add one more layer on top of animationOptions:

• A three-dimensional array, which will be applied to the corresponding in the corresponding in the corresponding .

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

• The callback function form is the same as animationOptions. It can also return a three-dimensional array.