set()

立即将一个或多个属性值设置为一个或多个目标对象。

const setter = utils.set(targets, properties);

参数

名称	接受	描述
targets	目标	目标元素
属性	`对象`	包含目标有效属性及其值的对象

动画

utils.set() 对于设置复杂值非常有用，但如果需要反复更新同一目标上的同一属性，建议使用 Animatable 以获得更好的性能。

如果你尝试在 DOM 或 SVG 元素上设置尚未定义的属性，utils.set() 将无法生效。

set() 代码示例

import { utils, stagger } from 'animejs';

const [ $set, $revert ] = utils.$('button');
const squares = utils.$('.square');
const colors = ['red', 'orange', 'yellow'];

let setter;

const setStyles = () => {
  setter = utils.set(squares, {
    borderRadius: '50%',
    y: () => utils.random(-1, 1) + 'rem',
    scale: stagger(.1, { start: .25, ease: 'out' }),
    color: () => `var(--hex-${utils.randomPick(colors)})`
  });
  $set.setAttribute('disabled', 'true');
  $revert.removeAttribute('disabled');
}

const revertStyles = () => {
  setter.revert();
  $set.removeAttribute('disabled');
  $revert.setAttribute('disabled', 'true');
}

$set.addEventListener('click', setStyles);
$revert.addEventListener('click', revertStyles);

<div class="large justified row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button>Set styles</button>
    <button disabled>Revert styles</button>
  </fieldset>
</div>

Anime.js | JavaScript 动画引擎

set()

参数

返回

set() 代码示例