合成 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>