waapi.convertEase()

将任何 JavaScript 缓动函数转换为兼容 WAAPI 的线性缓动。

import { waapi, createSpring } from 'animejs';

const spring = createSpring({ stiffness: 12 });

const linearEasing = waapi.convertEase(spring.ease);

waapi.convertEase() 代码示例

import { waapi, createSpring } from 'animejs';

const springs = [
  createSpring({ stiffness: 100 }),
  createSpring({ stiffness: 150 }),
  createSpring({ stiffness: 200 })
]

document.querySelectorAll('#web-animation-api-waapi-convertease .demo .square').forEach(($el, i) => {
  $el.animate({
    translate: '17rem',
    rotate: '1turn',
  }, {
    easing: waapi.convertEase(springs[i].ease),
    delay: i * 250,
    duration: springs[i].duration,
    fill: 'forwards'
  });
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label">stiffness: 100</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">stiffness: 150</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">stiffness: 200</div>
</div>

上一个 下一个