可链式实用函数

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

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>