Animatable V4

高效地对目标属性进行动画处理,使其成为 animate()utils.set() 在值频繁变化的场景(例如光标事件或动画循环)下的理想替代品。

Animatable 对象使用 createAnimatable() 函数创建。

import { createAnimatable } from 'animejs';

const animatable = createAnimatable(targets, parameters);

参数

名称 接受
targets 目标
参数 一个包含 Animatable 设置Object

返回

一个 Animatable 实例,具有可动画属性函数,用于 获取设置 值。

animatable.propertyName(value, duration, ease); // Triggers an animation
animatable.propertyName(); // Returns the current value

出于性能考虑,只有 NumberArray<Number> 可以传递给 Animatable 属性函数。

Animatable 代码示例

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 animatableSquare = createAnimatable('.square', {
  x: 500, // Define the x duration to be 500ms
  y: 500, // Define the y duration to be 500ms
  ease: 'out(3)',
});

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);
  animatableSquare.x(x); // Animate the x value in 500ms
  animatableSquare.y(y); // Animate the y value in 500ms
}

window.addEventListener('mousemove', onMouseMove);
$demos.addEventListener('scroll', refreshBounds);
<div class="large centered row">
  <div class="col">
    <div class="square"></div>
  </div>
</div>
<div class="small centered row">
  <span class="label">Move cursor around</span>
</div>