三次贝塞尔缓动

三次贝塞尔曲线缓动使用贝塞尔曲线定义动画的节奏。

适用于 JavaScript

必须导入 cubicBezier() 函数才能用于 js animate()

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 会产生超出效果）。

示例

名称	编辑器链接
In 三次贝塞尔曲线	在编辑器中打开
Out 三次贝塞尔曲线	在编辑器中打开
InOut 三次贝塞尔曲线	在编辑器中打开
OutIn 三次贝塞尔曲线	在编辑器中打开

三次贝塞尔曲线缓动代码示例

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>