缓动

一组缓动函数和基于物理的弹簧生成器

使用缓动函数编辑器来可视化、创建和自定义缓动函数。

所有缓动函数都可在从主'animejs'模块导入的easings对象上使用

import { easings } from 'animejs';

easings.eases.inOut(3);
easings.cubicBezier(.7, .1, .5, .9);
easings.spring({ bounce: .35 });

或者直接从主 'animejs' 模块导入

import { eases, cubicBezier, spring } from 'animejs';

eases.inOut(3);
cubicBezier(.7, .1, .5, .9);
spring({ bounce: .35 });

或者从'animejs/easings'子路径作为独立模块导入

import { eases, cubicBezier, spring } from 'animejs/easings';

缓动和弹簧函数可以传递给animate()方法的ease和playbackEase参数，或者stagger()函数的ease参数。

import { cubicBezier, linear, spring } from 'animejs';

animate(target, { x: 100, ease: 'inOut(3)' });
animate(target, { x: 100, ease: cubicBezier(.7, .1, .5, .9) });
animate(target, { x: 100, ease: spring({ bounce: .35 }) });

缓动代码示例

import { animate, waapi, cubicBezier, spring } from 'animejs';

animate('.row:nth-child(1) .square', {
  x: '17rem',
  rotate: 360,
  ease: 'out(3)', // Built-in ease
});

animate('.row:nth-child(2) .square', {
  x: '17rem',
  rotate: 360,
  ease: cubicBezier(.7, .1, .5, .9), // Custom cubic Bezier curves
});

waapi.animate('.row:nth-child(3) .square', {
  x: '17rem',
  rotate: 360,
  ease: spring({ bounce: .35 }), // Spring physics
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label">'inQuad'</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">cubicBezier(.7, .1, .5, .9)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">spring({ bounce: 1.25 })</div>
</div>

本节内容