可链式工具函数 V4

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

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

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

可链式函数与 modifier 缓动参数结合使用效果极佳。

用法

调用不带可选值参数的工具函数时，即可创建可链式函数

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>