组合 V4 JS

定义当同一目标上的同一属性的另一个动画同时播放时，动画的行为方式。组合模式可以为所有动画属性全局定义，也可以为特定属性局部定义。

接受

模式	描述
`'replace'`	替换并取消正在运行的动画。
`'none'` JS	不替换正在运行的动画。这意味着如果之前的动画持续时间比新动画长，则之前的动画将继续运行。此模式还可以提供更好的性能。
`'blend'` JS	创建附加动画，并将其值与正在运行的动画混合。
`0` JS	`'replace'` 的简写。
`1` JS	`'none'` 的简写。
`2` JS	`'blend'` 的简写。

默认值

如果动画目标计数低于 1000，则为 'replace'；否则，如果在 JS 版本上未定义组合模式，则默认组合设置为 'none'。

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

import { engine } from 'animejs';
engine.defaults.composition = 'blend';

附加动画

'blend' 模式允许您创建附加动画。这种类型的动画允许您平滑地将同一目标上同一属性的两个动画混合在一起。此模式最适用于在屏幕上视觉上移动的属性，例如 'translate'、'scale' 和 'rotation'。

当前在使用关键帧或颜色值时，无法使用附加模式。

组合代码示例

import { animate, utils } from 'animejs';

const squares = utils.$('.square');
const [ $none, $replace, $blend ] = squares;

// Animate each square with a different composition mode

squares.forEach($square => {
  // 'none', 'replace', 'blend'
  const mode = $square.classList[1];
  animate($square, {
    scale: [.5, 1],
    alternate: true,
    loop: true,
    duration: 750,
    composition: mode,
  });
});

// Common animation parameters

const enter = { scale: 1.5, duration: 350 };
const leave = { scale: 1.0, duration: 250 };

// Composition none animations

const enterNone = () => animate($none, {
  composition: 'none', ...enter
});

const leaveNone = () => animate($none, {
  composition: 'none', ...leave
});

$none.addEventListener('mouseenter', enterNone);
$none.addEventListener('mouseleave', leaveNone);

// Composition replace animations

const enterReplace = () => animate($replace, {
  composition: 'replace', ...enter
});

const leaveReplace = () => animate($replace, {
  composition: 'replace', ...leave
});

$replace.addEventListener('mouseenter', enterReplace);
$replace.addEventListener('mouseleave', leaveReplace);

// Composition blend animations

const enterBlend = () => animate($blend, {
  composition: 'blend', ...enter
});

const leaveBlend = () => animate($blend, {
  composition: 'blend', ...leave
});

$blend.addEventListener('mouseenter', enterBlend);
$blend.addEventListener('mouseleave', leaveBlend);

<div class="large spaced-evenly row">
  <div class="col">
    <div class="centered row">
      <span class="label centered">none<br><br></span>
      <div class="square none"></div>
    </div>
  </div>
  <div class="col">
    <div class="centered row">
      <span class="label centered">replace<br><br></span>
      <div class="square replace"></div>
    </div>
  </div>
  <div class="col">
    <div class="centered row">
      <span class="label centered">blend<br><br></span>
      <div class="square blend"></div>
    </div>
  </div>
</div>

<div class="medium spaced-evenly centered row">
  <div class="label"><br><br>(Hover the squares)</div>
</div>