缓动函数

确定属性动画值的过渡缓动函数。

接受

缓动函数

默认值

'outQuad'

建议使用 out 类型的缓动函数以获得有趣的结果。 in 类型的缓动函数开始的变化太细微,难以察觉。

缓动函数代码示例

import { createAnimatable, utils, stagger } from 'animejs';

const clock1 = createAnimatable('.clock-1', {
  rotate: { unit: 'rad' },
  ease: 'linear',
});

const clock2 = createAnimatable('.clock-2', {
  rotate: { unit: 'rad' },
  ease: 'outElastic',
});

const rotateClock = (animatable) => {
  const PI = Math.PI;
  let angle = PI / 2;
  let lastAngle = 0;
  return e => {
    const [ $clock ] = animatable.targets;
    const { width, height, left, top } = $clock.getBoundingClientRect();
    const x = e.clientX - left - width / 2;
    const y = e.clientY - top - height / 2;
    const currentAngle = Math.atan2(y, x);
    const diff = currentAngle - lastAngle;
    angle += diff > PI ? diff - 2 * PI : diff < -PI ? diff + 2 * PI : diff;
    lastAngle = currentAngle;
    animatable.rotate(angle);
  }
}

const rotateClock1 = rotateClock(clock1);
const rotateClock2 = rotateClock(clock2);

const onMouseMove = e => {
  rotateClock1(e);
  rotateClock2(e);
}

window.addEventListener('mousemove', onMouseMove);
<div class="large centered row">
  <div class="col">
    <div class="clock clock-1"></div>
    <div class="label">linear</div>
  </div>
  <div class="col">
    <div class="clock clock-2"></div>
    <div class="label">outElastic</div>
  </div>
</div>