立方贝塞尔缓动

立方贝塞尔缓动使用贝塞尔曲线来定义动画的节奏。

适用于 JavaScript

必须为 js animate()导入cubicBezier()函数:

import { animate, cubicBezier } from 'animejs';

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

用于 WAAPI

The 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	`Number`	第一个控制点的 X 坐标。必须在 0 到 1 之间。
y1	`Number`	第一个控制点的 Y 坐标。可以是任意值（负值会产生预期效果，>1 会产生超调）。
x2	`Number`	第二个控制点的 X 坐标。必须在 0 到 1 之间。
y2	`Number`	第二个控制点的 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>