1.1.0 • Published 4 months ago

xiaohe-transition v1.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

github stars npm version npm downloads bundle JSDocs License

小何同学 / github@xiaohe0601 / gitee@xiaohe0601

🎉 特性

  • 🍜 支持非线性动画
  • 🍟 支持中途打断动画
  • 🌭 支持往复播放动画
  • 🧀 支持TypeScript
  • 🍳 支持免费商用
  • 🥗 更多特性等你发掘...

🚁 安装

PNPM

pnpm add xiaohe-transition

YARN

yarn add xiaohe-transition

NPM

npm install xiaohe-transition

🛹 使用

简单使用

import { Transition } from "xiaohe-transition";

const transition = new Transition((value) => {
  console.log("当前值发生变化", value);
});

transition.start({
  start: 0,
  target: 1000
});

// 如果是单页应用,请在合适的时机(如:页面销毁生命周期等)销毁动画,以避免内存泄露
transition.destroy();

重复播放

import { Transition, Repeater } from "xiaohe-transition";

const transition = new Transition({
  start: 0,
  target: 1000
}, (value) => {
  console.log("当前值发生变化", value);
});

// 调用start方法后,动画将会开始无限重复播放
const repeater = new Repeater(transition).start();

// 调用stop方法即可停止动画
repeater.stop();

// 如果是单页应用,请在合适的时机(如:页面销毁生命周期等)销毁动画,以避免内存泄露
repeater.destroy(); // repeater内部会自动调用 transition.destroy(),无需再手动调用

进阶用法

import { Transition, BezierCurvePreset } from "xiaohe-transition";

// 完整配置请参考下方 `类型定义` 中的说明
const transition = new Transition({
  // 持续时间
  duration: 10 * 1000,
  // 预设曲线
  preset: BezierCurvePreset.EASE_OUT,
  // 延迟开始时间
  delay: 500,
  // 帧率
  fps: 60,
  started(instance) {
    console.log("动画开始~");
  },
  paused(instance) {
    console.log("动画暂停~");
  },
  resumed(instance) {
    console.log("动画继续~");
  },
  stopped(instance) {
    console.log("动画停止~");
  },
  completed(instance) {
    console.log("动画完成~");
  }
}, (value, instance) => {
  console.log("当前值发生变化", value);
});

// 启动动画
transition.start({
  start: 0,
  target: 1000
});

setTimeout(() => {
  // 3秒后暂停动画
  transition.pause();

  setTimeout(() => {
    // 再2秒后继续动画
    transition.resume();

    setTimeout(() => {
      // 再3秒后停止动画
      transition.stop();
    }, 3 * 1000);
  }, 2 * 1000);
}, 3 * 1000);
import { Transition, Repeater, RepeatMode } from "xiaohe-transition";

const transition = new Transition({
  start: 0,
  target: 1000
}, (value) => {
  console.log("当前值发生变化", value);
});

// 完整配置请参考下方 `类型定义` 中的说明
const repeater = new Repeater(transition, {
  // 重复次数
  count: 10,
  // 重复模式
  mode: RepeatMode.ALTERNATE,
  started(instance, transition) {
    console.log("动画开始~");
  },
  paused(instance, transition) {
    console.log("动画暂停~");
  },
  resumed(instance, transition) {
    console.log("动画继续~");
  },
  stopped(instance, transition) {
    console.log("动画停止~");
  },
  // 注意!!!Transition的completed回调函数将会被Repeater占用,可使用repeated回调函数替代
  repeated(count, instance, transition) {
    console.log("动画重复~");
    console.log("已重复次数", count);
  },
  completed(instance, transition) {
    console.log("动画完成~");
  }
});

repeater.start();

// 现在应该使用Repeater中的相关方法来替代Transition控制动画
repeater.pause();
repeater.resume();
repeater.stop();

事件

配置项中的 回调函数 均支持 ononce 事件监听,下面以 started 事件举例

// 监听started事件
transition.on("started", (instance) => {
  console.log("动画开始~");
});

// 单次监听started事件,started事件触发一次后将自动取消监听
transition.once("started", (instance) => {
  console.log("动画开始~");
});

// 手动取消监听started事件
const unbind = transition.on("started", (instance) => {
  console.log("动画开始~");
});
// 调用on、once返回的unbind方法即可取消监听
unbind();

// 取消监听所有事件
transition.clearEvents();

类型定义

请查看 jsdocs.io

🛸 链接

  • bezier-easing cubic-bezier implementation for your JavaScript animation easings.

🐶 讨论交流

🏆 开源协议

1.1.0

4 months ago

1.0.8

4 months ago

1.0.7

4 months ago

1.0.6

4 months ago

1.0.5

4 months ago

1.0.4

4 months ago

1.0.3

4 months ago

0.0.19

8 months ago

0.0.18

10 months ago

0.0.17

10 months ago

0.0.16

10 months ago

0.0.15

10 months ago

0.0.14

10 months ago

0.0.12

10 months ago

0.0.11

10 months ago

0.0.10

10 months ago

0.0.9

10 months ago

0.0.8

10 months ago

0.0.7

10 months ago

0.0.6

10 months ago

0.0.5

10 months ago

0.0.4

10 months ago

0.0.3

10 months ago

0.0.2

10 months ago

0.0.1

10 months ago