easy-tweening

• 仅1kb(gzipped)的补间动画库
• 支持多种缓动算法
• 使用Typescript编写，自动推断类型

安装

$ npm install easy-tweening

使用说明

参数	描述	类型	默认值
duration	动画持续时间（毫秒）	number	-
easing	缓动动画	见下方	linear
value	需要计算的值	number|number[]	-
yoyo	是否循环	boolean	-
onChange	每帧计算后调用的回调函数	(value:number|number[])=>void	-

easing类型：linear | easeInQuad | easeOutQuad | easeInOutQuad | easeInCubic | easeOutCubic | easeInOutCubic | easeInQuart | easeOutQuart | easeInOutQuart | easeInQuint | easeOutQuint | easeInOutQuint;

基本使用

import tweening from "easy-tweening";

const element = document.querySelector(".box");
tweening({
  duration: 3000,
  easing: "easeInOutQuad",
  yoyo: true,
  value: [0, 200],
  onChange(x) {
    element.style.transform = `translateX(${x}px)`;
  },
})

计算多个值

import tweening from "easy-tweening";

const element = document.querySelector(".box");
tweening({
  duration: 3000,
  easing: "easeInOutQuad",
  value: [
    [0, 100],
    [200, 500],
  ],
  onChange([x, y]) {
    element.style.transform = `translate(${x}px,${y}px)`;
  },
});

补间动画完成后调用

本质上返回的是一个Promise，在动画执行完后会调用resolve

import tweening from "easy-tweening";

const element = document.querySelector(".box");
tweening({
  duration: 3000,
  easing: "easeInOutQuad",
  value: [0, 1],
  onChange(opacity) {
    element.style.opacity = String(opacity);
  },
}).then(() => {
  console.log("completed");
});

停止动画

传入参数key，key可以为任何值，元素、字符串、数字、对象,tweening会寻找key相同的元素，将其移出动画队列，所以确保key的唯一

import tweening, { stop } from "easy-tweening";

const element = document.querySelector(".box");
tweening({
  key: element,
  duration: 3000,
  easing: "easeInOutQuad",
  value: [0, 1],
  onChange(opacity) {
    element.style.opacity = String(opacity);
  },
});

stop(element);

清空动画

import { clear } from "easy-tweening";

clear();

使用许可

MIT