修饰符 V4 JS

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

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

接受

一个带有以下参数的 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>