线性缓动

线性缓动通过在指定点之间进行线性插值来定义动画的速度。

适用于 JavaScript

对于 js animate()，linear() 函数必须被导入

import { animate, linear } from 'animejs';

animate(target, { x: 100, ease: linear(0, '0.5 50%', '0.3 75%', 1) });

适用于 WAAPI

waapi animate() 函数使用浏览器原生的线性时间函数

import { waapi } from 'animejs';

waapi.animate(target, { x: 100, ease: 'linear(0, 0.5 50%, 0.3 75%, 1)' });

参数

线性函数接受一系列停止点 linear(stop1, stop2, ...stopN)

名称	类型	信息
数值	`数字`	表示动画过程中某个点的输出值。必须指定至少两个值。值 0 表示开始，值 1 表示结束。0-1 范围之外的值会产生过冲效果。
百分比 ^（可选）	`字符串`	可选的时间位置，以字符串形式表示：`'value percentage'`。表示动画过程中何时达到该值。不能用于第一个或最后一个停止点。如果省略，停止点将均匀分布。

线性缓动代码示例

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

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

animate('.row:nth-child(2) .square', {
  x: '17rem',
  rotate: 360,
  duration: 2000,
  ease: linear(0, '1 25%', 0, 1)
});

waapi.animate('.row:nth-child(3) .square', {
  x: '17rem',
  rotate: 360,
  duration: 2000,
  ease: 'linear(1, 0 25%, 1, 0)'
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label">linear(0, 0, 0.5, 0.5, 1, 1)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">linear(0, '1 25%', 0, 1)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">'linear(1, 0 25%, 1, 0)'</div>
</div>