链式实用工具函数 V4

链式实用工具函数允许通过在单个表达式中组合多个函数来创建复杂的操作。

const clampRoundPad = utils.clamp(0, 100).round(2).padStart(6, '0');
clampRoundPad(125)   // '000100'
clampRoundPad(75.25) // '075.25'

以下实用工具函数支持链式调用

链式函数与 modifier tween 参数配合使用效果极佳。

用法

当调用实用工具函数而没有可选的值参数时，会创建链式函数。

const chainableClamp = utils.clamp(0, 100); // Returns a chain-able function
const result = chainableClamp(150); // 100

链式调用

链式函数像这样组合

const normalizeAndRound = utils.mapRange(0, 255, 0, 1).round(1);
normalizeAndRound(128); // '0.5'
normalizeAndRound(64);  // '0.3'

链式实用工具函数代码示例

import { animate, utils } from 'animejs';

animate('.value', {
  innerHTML: 1000,
  modifier: utils.wrap(0, 10).roundPad(3).padStart(6, '0'),
  duration: 100000,
  alternate: true,
  loop: true,
  ease: 'linear',
});

<div class="large row">
  <pre class="large log row">
    <span class="value lcd">0</span>
  </pre>
</div>