设置器

在可动画参数中定义的每个可动画属性都转换为方法，并且可以在可动画对象上访问。

当调用至少带一个参数的方法时，该方法充当设置器，并返回可动画实例，从而允许链式方法调用。

animatable.property(value, duration, easing);

参数

名称	类型	描述
值	`数字` \| `数字数组`	定义要动画到的可动画对象的新值
duration ^(可选)	`数字`	可选的新过渡持续时间，单位为毫秒
easing ^(可选)	缓动	可选的动画新缓动函数

可动画对象本身，允许链式调用多个属性设置器

animatable.x(100).y(200); // Animate x to 100 and y to 200 in 500ms

设置器代码示例

import { createAnimatable, utils } from 'animejs';

const $demos = document.querySelector('#docs-demos');
const $demo = $demos.querySelector('.docs-demo.is-active');
let bounds = $demo.getBoundingClientRect();
const refreshBounds = () => bounds = $demo.getBoundingClientRect();

const circle = createAnimatable('.circle', {
  x: 0,
  y: 0,
  backgroundColor: 0,
  ease: 'outExpo',
});

const rgb = [164, 255, 79];

// Sets new durations and easings
circle.x(0, 500, 'out(2)');
circle.y(0, 500, 'out(3)');
circle.backgroundColor(rgb, 250);

const onMouseMove = e => {
  const { width, height, left, top } = bounds;
  const hw = width / 2;
  const hh = height / 2;
  const x = utils.clamp(e.clientX - left - hw, -hw, hw);
  const y = utils.clamp(e.clientY - top - hh, -hh, hh);
  rgb[0] = utils.mapRange(x, -hw, hw, 0, 164);
  rgb[2] = utils.mapRange(x, -hw, hw, 79, 255);
  circle.x(x).y(y).backgroundColor(rgb); // Update values
}

window.addEventListener('mousemove', onMouseMove);
$demos.addEventListener('scroll', refreshBounds);

<div class="large centered row">
  <div class="circle"></div>
</div>
<div class="medium centered row">
  <span class="label">Move cursor around</span>
</div>

上一个 下一个