组合 JS

定义当同一个目标上的相同属性同时存在另一个正在播放的动画时，动画应如何表现。Composition（合成）模式可以为所有动画属性全局定义，也可以针对特定属性进行局部定义。

接受

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

默认值

如果动画目标数量少于 1000，则默认为 'replace'；否则，如果未定义 composition 模式，JS 版本上的默认合成设置为 'none'。

叠加动画 (Additive animations)

'blend' 模式允许你创建叠加动画。这种类型的动画使你能够平滑地将同一个目标上针对相同属性的两个动画混合在一起。此模式最适用于在屏幕上视觉移动的属性，如 'translate'（位移）、'scale'（缩放）和 'rotation'（旋转）。

Composition blend 注意事项

混合功能仅在同时正向播放两个或多个 composition 设置为 'blend' 的动画时生效。

目前无法将 composition 'blend' 与以下内容一起使用：

多个关键帧 (keyframes)
颜色值
reverse() 方法
loop 参数
reversed 参数
alternate 参数

混合动画应被区别对待，并且仅在你确实需要将多个动画混合在一起时使用。

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

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

composition 代码示例

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>