缓动函数-Easing

缓动函数提供了各种不同的过渡效果

引入

import { easing } from 'popmotion';

也可以在其他的动画库里面使用Popmotion的easing函数

npm install @popmotion/easing

import { linear } from '@popmotion/easing';

import { tween, easing } from 'popmotion';

tween({
  ease: easing.easeOut
}).start();

贝塞尔曲线

const { cubicBezier } = easing;
const longTail = cubicBezier(0, .42, 0, 1);

翻转缓动特效，例如easeIn翻转就变成了easeOut

const { anticipate, reversed } = easing;
const anticipateOut = reversed(anticipate);

镜像。将你输入的缓动函数镜像处理，例如easeIn镜像之后就变成了easeInOut，现在动画的开始和结束都是镜像的动效了

const { anticipate, mirrored } = easing;
const anticipateInOut = mirrored(anticipate);

自定义一个类似easeIn的动效。easeIn是createExpoIn(2)

const { createExpoIn } = easing;
const strongerEaseIn = createExpoIn(3);

自定义一个类似backIn的动效。backIn是createBackIn(1.525)

const { createBackIn, reversed } = easing;
const strongerBackOut = reversed(createBackIn(3));

自定义一个类似anticipate的动效。anticipate是createAnticipateEasing(1.525)

const { createAnticipateEasing } = easing;
const strongerAnticipate = createAnticipateEasing(3);