修改器 JS

一个用于修改或改变动画数值行为的 Function（函数）。修饰符可以为所有动画属性全局设置，也可以为特定属性局部设置。如果最终的动画值包含字符串（例如单位 '100px'），则该字符串部分会在应用到元素之前自动添加到最终数值之后。

大多数 Utilities（实用工具）函数都可以用作修饰符。

接受

一个带有以下参数的 Function

参数

名称	描述
`值`	当前动画的数值

必须返回

数字

默认值

null

要全局更改默认值，请更新 engine.defaults 对象。

import { engine } from 'animejs';
engine.defaults.modifier = v => -v; // Don't do this :D

修饰符代码示例

import { animate, utils } from 'animejs';

animate('.row:nth-child(1) .square', {
  x: '17rem',
  modifier: utils.round(0), // Round to 0 decimals
  duration: 4000,
});

animate('.row:nth-child(2) .square', {
  x: '85rem',
  modifier: v => v % 17,
  duration: 4000,
});

animate('.row:nth-child(3) .square', {
  x: '17rem',
  y: {
    to: '70rem',
    modifier: v => Math.cos(v) / 2, // Specific modifier to y property
  },
  duration: 4000,
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label">utils.round(0)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">v => v % 17</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">v => Math.cos(v) / 2</div>
</div>