xiaohe-transition - npm Package Compare versions

Comparing version 0.0.19 to 1.0.3

package.json

 {
   "name": "xiaohe-transition",
-  "version": "0.0.19",
+  "type": "module",
+  "version": "1.0.3",
+  "packageManager": "pnpm@8.12.1",
   "description": "🏀 一个简单易用的贝塞尔曲线过渡动画工具",
+  "author": "xiaohe0601 <[e-mail]>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/xiaohe0601",
+  "homepage": "https://github.com/xiaohe0601/xiaohe-transition#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xiaohe0601/xiaohe-transition.git"
+  },
+  "bugs": "https://github.com/xiaohe0601/xiaohe-transition/issues",
+  "keywords": [],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build:rollup": "rollup --config rollup.config.ts --configPlugin typescript",
-    "release": "pnpm run build:rollup && npm publish"
+    "build": "unbuild",
+    "dev": "unbuild --stub",
+    "lint": "eslint .",
+    "prepublishOnly": "nr build",
+    "release": "bumpp && npm publish",
+    "start": "esno src/index.ts",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit",
+    "prepare": "simple-git-hooks"
   },
@@ -13,60 +54,24 @@ "dependencies": {
   "devDependencies": {
-    "@babel/core": "^7.22.6",
-    "@babel/plugin-transform-runtime": "^7.22.6",
-    "@babel/preset-env": "^7.22.6",
-    "@babel/preset-typescript": "^7.22.5",
-    "@babel/runtime": "^7.22.6",
-    "@rollup/plugin-commonjs": "^25.0.3",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.2",
-    "@types/glob": "^8.1.0",
-    "@types/node": "^20.3.3",
-    "glob": "^10.3.3",
-    "rollup": "^3.26.3",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-ts": "^3.2.0",
-    "tslib": "^2.6.0",
-    "typescript": "^5.1.6"
+    "@antfu/eslint-config": "^2.6.0",
+    "@antfu/ni": "^0.21.12",
+    "@antfu/utils": "^0.7.7",
+    "@types/node": "^20.10.5",
+    "bumpp": "^9.2.1",
+    "eslint": "^8.56.0",
+    "esno": "^4.0.0",
+    "lint-staged": "^15.2.0",
+    "pnpm": "^8.12.1",
+    "rimraf": "^5.0.5",
+    "simple-git-hooks": "^2.9.0",
+    "typescript": "^5.3.3",
+    "unbuild": "^2.0.0",
+    "vite": "^5.0.10",
+    "vitest": "^1.1.0"
   },
-  "main": "./lib/cjs/index.js",
-  "module": "./lib/esm/index.js",
-  "types": "./lib/esm/index.d.ts",
-  "exports": {
-    "import": "./lib/esm/index.js",
-    "require": "./lib/cjs/index.js",
-    "types": "./lib/esm/index.d.ts"
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged"
   },
-  "files": [
-    "lib/**/*.*"
-  ],
-  "sideEffects": false,
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ],
-  "homepage": "https://github.com/xiaohe0601/xiaohe-transition",
-  "bugs": "https://github.com/xiaohe0601/xiaohe-transition/issues",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/xiaohe0601/xiaohe-transition.git"
-  },
-  "author": {
-    "name": "小何同学 (xiaohe0601)",
-    "email": "[e-mail]",
-    "url": "https://github.com/xiaohe0601"
-  },
-  "keywords": [
-    "typescript",
-    "xiaohe",
-    "transition",
-    "animation",
-    "bezier",
-    "cubic-bezier",
-    "easing",
-    "timing",
-    "timing-function"
-  ]
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
 }

README.md

@@ -8,7 +8,8 @@ <div align="center">
 
-![GitHub stars](https://img.shields.io/github/stars/xiaohe0601/xiaohe-transition?logo=GitHub&style=flat-square)
-![GitHub forks](https://img.shields.io/github/forks/xiaohe0601/xiaohe-transition?logo=GitHub&style=flat-square)
-![GitHub watchers](https://img.shields.io/github/watchers/xiaohe0601/xiaohe-transition?logo=GitHub&style=flat-square)
-![GitHub release](https://img.shields.io/github/v/release/xiaohe0601/xiaohe-transition?logo=GitHub&style=flat-square)
-![GitHub license](https://img.shields.io/github/license/xiaohe0601/xiaohe-transition?style=flat-square)
+[![github stars][github-stars-src]][github-stars-href]
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![bundle][bundle-src]][bundle-href]
+[![JSDocs][jsdocs-src]][jsdocs-href]
+[![License][license-src]][license-href]
 
@@ -20,11 +21,6 @@ 小何同学 / [github@xiaohe0601](https://github.com/xiaohe0601) / [gitee@xiaohe0601](https://gitee.com/xiaohe0601)
 - 🍜 支持非线性动画
-
 - 🍟 支持中途打断动画
-
 - 🌭 支持往复播放动画
-
 - 🧀 支持TypeScript
-
 - 🍳 支持免费商用
-
 - 🥗 更多特性等你发掘...
@@ -34,18 +30,20 @@
 
-#### yarn
+#### NPM
 
-``` bash
+``` shell
+pnpm add xiaohe-transition
+```
+
+``` shell
 yarn add xiaohe-transition
 ```
 
-#### npm
-
-``` npm
+``` shell
 npm install xiaohe-transition
 ```
 
-#### cdn
+#### CDN
 
 ``` html
-<script src="https://cdn.jsdelivr.net/npm/xiaohe-transition/lib/cjs/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/xiaohe-transition/dist/index.cjs"></script>
 ```
@@ -57,6 +55,6 @@
 
-``` javascript
-import XhTransition from "xiaohe-transition";
+``` typescript
+import { Transition } from "xiaohe-transition";
 
-const transition = new XhTransition((value) => {
+const transition = new Transition((value) => {
   console.log("当前值发生变化", value);
@@ -71,37 +69,38 @@ });
 // 如果是单页应用，请在合适的时机（如：页面销毁生命周期等）销毁动画，以避免内存泄露
-// @since 0.0.17
 transition.destroy();
-
-// 0.0.17 之前的版本调用 transition.stop() 即可
-// transition.stop();
 ```
 
-#### 简单使用 (CDN)
+#### 重复播放
 
-``` javascript
-const transition = new xh_transition.XhTransition((value) => {
-  console.log("当前值发生变化", value);
-});
+``` typescript
+import { Transition, Repeater } from "xiaohe-transition";
 
-transition.start({
+const transition = new Transition({
   start: 0,
   target: 1000
+}, (value) => {
+  console.log("当前值发生变化", value);
 });
-```
 
-#### 重复播放
+// 调用start方法后，动画将会开始无限重复播放
+const repeater = new Repeater(transition).start();
 
-> 请查看 [XhTransitionRepeater](./docs/repeater.md) 文档
+// 调用stop方法即可停止动画
+repeater.stop();
 
+// 如果是单页应用，请在合适的时机（如：页面销毁生命周期等）销毁动画，以避免内存泄露
+repeater.destroy(); // repeater内部会自动调用 transition.destroy()，无需再手动调用
+```
+
 #### 进阶用法
 
-``` javascript
-import XhTransition, { XhTransitionPresetBezier } from "xiaohe-transition";
+``` typescript
+import { Transition, BezierCurvePreset } from "xiaohe-transition";
 
 // 完整配置请参考下方 `类型定义` 中的说明
-const transition = new XhTransition({
+const transition = new Transition({
   // 持续时间
   duration: 10 * 1000,
   // 预设曲线
-  preset: XhTransitionPresetBezier.easeOut,
+  preset: BezierCurvePreset.EASE_OUT,
   // 延迟开始时间
@@ -123,3 +122,2 @@ delay: 500,
   },
-  // @since 0.0.10
   completed(instance) {
@@ -154,7 +152,53 @@ console.log("动画完成~");
 
+``` typescript
+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();
+```
+
 #### 事件
 
-> 从 `0.0.17` 开始，配置项中的 `回调函数` 均支持 `on`、`once` 事件监听，下面以 `started` 事件举例
+> 配置项中的 `回调函数` 均支持 `on`、`once` 事件监听，下面以 `started` 事件举例
 
-``` javascript
+``` typescript
 // 监听started事件
@@ -181,237 +225,6 @@ transition.on("started", (instance) => {
 
-#### 应用场景
+#### 类型定义
 
-> 为方便起见，应用场景示例以 `Vue` 举例，但并不局限于 `Vue` 使用
+> 请查看 [jsdocs.io](https://www.jsdocs.io/package/xiaohe-transition)
 
-> 注：以下效果展示GIF图片经过压缩抽帧处理，看似卡顿实际很流畅
-
-##### Div内部滚动动画
-
-[查看示例代码](./demo/DivScrollDemo.vue)
-
-<img src="./demo/div-scroll-demo.gif" width="500" />
-
-##### 数字变化效果
-
-[查看示例代码](./demo/CountToDemo.vue)
-
-<img src="./demo/count-to-demo.gif" width="500" />
-
-##### 更多示例
-
-更多应用场景示例正在赶来的路上...
-
-### 🕹️ 构造函数
-
-``` typescript
-constructor(callback: XhTransitionValueCallback);
-
-constructor(options: IXhTransitionOptions, callback: XhTransitionValueCallback);
-```
-
-### 🎮 实例方法
-
-#### 获取或更新配置项
-
-``` typescript
-// @since 0.0.11
-options(options?: IXhTransitionOptions): IXhTransitionOptions;
-```
-
-#### 获取运行状态
-
-``` typescript
-status(): XhTransitionWorkStatus;
-```
-
-#### 获取当前时间进度
-
-``` typescript
-// @since 0.0.10
-// 取值范围: 0 ~ 1
-progress(): number;
-```
-
-#### 获取当前值
-
-> 请保证该方法在XhTransition#start之后调用
-
-``` typescript
-// @since 0.0.10
-value(): number;
-```
-
-#### 启动动画
-
-> 该方法可以接收一个配置项，除了上方介绍的 `start` 和 `target` 属性外，亦支持 `IXhTransitionOptions` 中的所有属性，将会采用 `Object.assign` 与原配置合并
-
-``` typescript
-// @since 0.0.11 返回过渡动画实例
-start(options: IXhTransitionOptions): XhTransition;
-```
-
-#### 暂停动画
-
-``` typescript
-// @since 0.0.11 返回过渡动画实例
-pause(): XhTransition;
-```
-
-#### 继续动画
-
-``` typescript
-// @since 0.0.11 返回过渡动画实例
-resume(): XhTransition;
-```
-
-#### 停止动画
-
-``` typescript
-// @since 0.0.11 返回过渡动画实例
-stop(): XhTransition;
-```
-
-### 🚀 类型定义
-
-#### 配置项
-
-``` typescript
-interface IXhTransitionOptions extends IXhTransitionEvents {
-  /**
-   * 起始值
-   */
-  readonly start?: number;
-  /**
-   * 目标值
-   */
-  readonly target?: number;
-  /**
-   * 动画时长 (单位: ms)
-   */
-  readonly duration?: number; // 默认值: 300
-  /**
-   * 预设曲线
-   */
-  readonly preset?: XhTransitionPresetBezier; // 默认值: XhTransitionPresetBezier.linear
-  /**
-   * 自定义曲线 (优先级高于 preset)
-   */
-  readonly bezier?: XhTransitionBezier;
-  /**
-   * 延迟开始时间 (单位: ms)
-   */
-  readonly delay?: number; // 默认值: 0
-  /**
-   * 帧率 (即每秒回调多少次, 若为-1则使用requestAnimationFrame自动处理)
-   */
-  readonly fps?: number; // 默认值: -1 (当不支持requestAnimationFrame时为默认值为30)
-}
-
-/**
- * 过渡动画事件
- *
- * @since 0.0.17
- */
-interface IXhTransitionEvents {
-  /**
-   * 动画开始
-   */
-  readonly started?: XhTransitionCommonCallback;
-  /**
-   * 动画暂停
-   */
-  readonly paused?: XhTransitionCommonCallback;
-  /**
-   * 动画继续
-   */
-  readonly resumed?: XhTransitionCommonCallback;
-  /**
-   * 动画停止
-   */
-  readonly stopped?: XhTransitionCommonCallback;
-  /**
-   * 动画完成
-   *
-   * @since 0.0.10
-   */
-  readonly completed?: XhTransitionCommonCallback;
-}
-```
-
-#### 曲线配置
-
-``` typescript
-type XhTransitionBezier = [x1: number, y1: number, x2: number, y2: number];
-```
-
-#### 预设曲线
-
-``` typescript
-enum XhTransitionPresetBezier {
-  /**
-   * 以相同速度开始至结束
-   */
-  linear = "linear",
-  /**
-   * 慢速开始, 然后变快, 然后慢速结束
-   */
-  ease = "ease",
-  /**
-   * 慢速开始
-   */
-  easeIn = "ease-in",
-  /**
-   * 慢速结束
-   */
-  easeOut = "ease-out",
-  /**
-   * 慢速开始和结束
-   */
-  easeInOut = "ease-in-out"
-}
-
-type XhTransitionPresetBezierConfigType = { readonly [key in XhTransitionPresetBezier]: XhTransitionBezier };
-
-const XhTransitionPresetBezierConfig: XhTransitionPresetBezierConfigType = {
-  [XhTransitionPresetBezier.linear]: [0, 0, 1, 1],
-  [XhTransitionPresetBezier.ease]: [0.25, 0.1, 0.25, 1],
-  [XhTransitionPresetBezier.easeIn]: [0.42, 0, 1, 1],
-  [XhTransitionPresetBezier.easeOut]: [0, 0, 0.58, 1],
-  [XhTransitionPresetBezier.easeInOut]: [0.42, 0, 0.58, 1]
-};
-```
-
-#### 回调函数
-
-##### 通用回调函数
-
-``` typescript
-type XhTransitionCommonCallback = (instance: XhTransition) => void;
-```
-
-##### 值变化回调函数
-
-``` typescript
-type XhTransitionValueCallback = (value: number, instance: XhTransition) => void;
-```
-
-#### 运行状态
-
-``` typescript
-enum XhTransitionWorkStatus {
-  /**
-   * 空闲 (未开始或已停止)
-   */
-  free = "free",
-  /**
-   * 运行中
-   */
-  working = "working",
-  /**
-   * 已暂停
-   */
-  paused = "paused"
-}
-```
-
 ### 🛸 链接
@@ -421,4 +234,2 @@
 
-- [nanoevents](https://github.com/ai/nanoevents) Simple and tiny event emitter library for JavaScript.
-
 ### 🐶 讨论交流
@@ -434,2 +245,17 @@
 
-- MIT [LICENSE](./LICENSE)
+- MIT [LICENSE](./LICENSE)
+
+<!-- Badges -->
+
+[github-stars-src]: https://img.shields.io/github/stars/xiaohe0601/xiaohe-transition?style=flat&colorA=080f12&colorB=1fa669&logo=GitHub
+[github-stars-href]: https://github.com/xiaohe0601/xiaohe-transition
+[npm-version-src]: https://img.shields.io/npm/v/xiaohe-transition?style=flat&colorA=080f12&colorB=1fa669
+[npm-version-href]: https://npmjs.com/package/xiaohe-transition
+[npm-downloads-src]: https://img.shields.io/npm/dm/xiaohe-transition?style=flat&colorA=080f12&colorB=1fa669
+[npm-downloads-href]: https://npmjs.com/package/xiaohe-transition
+[bundle-src]: https://img.shields.io/bundlephobia/minzip/xiaohe-transition?style=flat&colorA=080f12&colorB=1fa669&label=minzip
+[bundle-href]: https://bundlephobia.com/result?p=xiaohe-transition
+[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
+[jsdocs-href]: https://www.jsdocs.io/package/xiaohe-transition
+[license-src]: https://img.shields.io/github/license/xiaohe0601/xiaohe-transition.svg?style=flat&colorA=080f12&colorB=1fa669
+[license-href]: https://github.com/xiaohe0601/xiaohe-transition/blob/main/LICENSE

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76054

increased by70.16%

Dev dependency count

15

decreased by-6.25%

Lines of code

1826

increased by110.61%

Number of low quality alerts

0

decreased by-100%

Is type module

Yes

Worsened metrics

Number of package files

8

decreased by-63.64%

Number of lines in readme file

251

decreased by-40.94%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes