线性缓动

线性缓动通过指定点之间的线性插值来定义动画的节奏。

适用于 JavaScript

必须导入 linear() 函数用于 js animate():

import { animate, linear } from 'animejs';

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

用于 WAAPI

The 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):

名称	类型	信息
number	`Number`	表示动画过程中某一点的输出值。必须至少指定两个值。值 0 表示开始，值 1 表示结束。0-1 之外的值会产生超出效果。
percentage ^(opt)	`String`	可选的时间位置，字符串形式：`'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>