三次贝塞尔缓动

三次贝塞尔缓动通过贝塞尔曲线定义动画的速度和节奏。

适用于 JavaScript

针对 js animate() 函数，必须导入 cubicBezier() 函数。

import { animate, cubicBezier } from 'animejs';

animate(target, { x: 100, ease: cubicBezier(0, 0, 0.58, 1) });

适用于 WAAPI

waapi animate() 函数使用浏览器原生的三次贝塞尔时间函数，可以直接在 ease 参数中以 String 形式指定。

import { waapi } from 'animejs';

waapi.animate(target, { x: 100, ease: 'cubic-bezier(0, 0, 0.58, 1)' });

// Or

waapi.animate(target, { x: 100, ease: 'cubicBezier(0, 0, 0.58, 1)' });

参数

三次贝塞尔函数接受 4 个参数 cubicBezier(x1, y1, x2, y2)

名称	类型	信息
x1	`数字`	第一个控制点的 X 坐标。必须介于 0 和 1 之间。
y1	`数字`	第一个控制点的 Y 坐标。可以是任意值（负值会产生预备动作，大于 1 会产生过冲）。
x2	`数字`	第二个控制点的 X 坐标。必须介于 0 和 1 之间。
y2	`数字`	第二个控制点的 Y 坐标。可以是任意值（负值会产生预备动作，大于 1 会产生过冲）。

示例

名称	编辑器链接
入三次贝塞尔曲线	在编辑器中打开
出三次贝塞尔曲线	在编辑器中打开
入出三次贝塞尔曲线	在编辑器中打开
出入三次贝塞尔曲线	在编辑器中打开

三次贝塞尔缓动代码示例

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

animate('.row:nth-child(1) .square', {
  x: '17rem',
  rotate: 360,
  ease: cubicBezier(0.5, 0, 0.9, 0.3)
});

animate('.row:nth-child(2) .square', {
  x: '17rem',
  rotate: 360,
  ease: cubicBezier(0.1, 0.7, 0.5, 1)
});

waapi.animate('.row:nth-child(3) .square', {
  x: '17rem',
  rotate: 360,
  ease: 'cubicBezier(0.7, 0.1, 0.5, 0.9)'
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label">cubicBezier(0.5, 0, 0.9, 0.3)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">cubicBezier(0.1, 0.7, 0.5, 1)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">cubicBezier(0.7, 0.1, 0.5, 0.9)</div>
</div>