enr 2.0.6 → 2.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/components/ThemeContext/index.cjs.js +12 -14
  2. package/components/ThemeContext/index.es.js +1 -3
  3. package/customHooks/useRipples/class-event-action.cjs.js +1 -1
  4. package/customHooks/useRipples/class-event-action.d.ts +1 -1
  5. package/customHooks/useRipples/class-event-action.es.js +1 -1
  6. package/customHooks/useRipples/class-render-action.cjs.js +31 -26
  7. package/customHooks/useRipples/class-render-action.d.ts +3 -1
  8. package/customHooks/useRipples/class-render-action.es.js +31 -26
  9. package/customHooks/useRipples/class-render-data.cjs.js +49 -2
  10. package/customHooks/useRipples/class-render-data.d.ts +23 -2
  11. package/customHooks/useRipples/class-render-data.es.js +49 -2
  12. package/customHooks/useRipples/class-ripple.cjs.js +2 -2
  13. package/customHooks/useRipples/class-ripple.d.ts +1 -1
  14. package/customHooks/useRipples/class-ripple.es.js +2 -2
  15. package/customHooks/useRipples/types.d.ts +1 -1
  16. package/package.json +2 -2
  17. package/shared/dist/es/index.cjs.js +288 -0
  18. package/shared/dist/es/index.es.js +275 -0
  19. package/shared/dist/es/log-production.cjs.js +49 -2
  20. package/shared/dist/es/log-production.es.js +48 -1
  21. package/shared/dist/es/cookie.cjs.js +0 -80
  22. package/shared/dist/es/cookie.es.js +0 -78
  23. package/shared/dist/es/node_modules/.pnpm/@qqi_log@1.1.4/node_modules/@qqi/log/es/virtual-dog.cjs.js +0 -52
  24. package/shared/dist/es/node_modules/.pnpm/@qqi_log@1.1.4/node_modules/@qqi/log/es/virtual-dog.es.js +0 -50
  25. package/shared/dist/es/storage-store.cjs.js +0 -32
  26. package/shared/dist/es/storage-store.es.js +0 -30
  27. package/shared/dist/es/storage.cjs.js +0 -102
  28. package/shared/dist/es/storage.es.js +0 -92
  29. package/shared/dist/es/sys.cjs.js +0 -84
  30. package/shared/dist/es/sys.es.js +0 -82
@@ -3,9 +3,7 @@
3
3
 
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
  var react = require('react');
6
- var storageStore = require('../../shared/dist/es/storage-store.cjs.js');
7
- var sys = require('../../shared/dist/es/sys.cjs.js');
8
- var cookie = require('../../shared/dist/es/cookie.cjs.js');
6
+ var index = require('../../shared/dist/es/index.cjs.js');
9
7
 
10
8
  /** 用于判断是否正确放置的 */
11
9
  const defaultCall = () => {
@@ -64,13 +62,13 @@ function ThemeColorModeProvider({ children, initialTheme }) {
64
62
  */
65
63
  const autoChange = (newColorMode) => {
66
64
  // 这是当前的
67
- const _auto = !storageStore.storageStore.theme;
65
+ const _auto = !index.storageStore.theme;
68
66
  if (_auto) {
69
- cookie.manageCookie.deleteItem('theme');
70
- storageStore.storageStore.theme = '';
67
+ index.manageCookie.deleteItem('theme');
68
+ index.storageStore.theme = '';
71
69
  }
72
70
  else
73
- cookie.manageCookie.setItem({
71
+ index.manageCookie.setItem({
74
72
  keyItem: 'theme',
75
73
  value: newColorMode,
76
74
  }); // 将值同步到 cookie ,以防止水合有误
@@ -85,7 +83,7 @@ function ThemeColorModeProvider({ children, initialTheme }) {
85
83
  if (['light', 'dark'].indexOf(newColorMode) < 0) {
86
84
  return colorMode;
87
85
  }
88
- storageStore.storageStore.theme = newColorMode; // 将新的主题色值类型保存到本地
86
+ index.storageStore.theme = newColorMode; // 将新的主题色值类型保存到本地
89
87
  // 设置新的值触发响应,新旧值不一致,自动触发 colorMode 更改的副作用 useEffect
90
88
  if (newColorMode !== colorMode)
91
89
  setColorMode(newColorMode);
@@ -97,16 +95,16 @@ function ThemeColorModeProvider({ children, initialTheme }) {
97
95
  /** 移除指定,设置为跟随系统 */
98
96
  const clear = () => {
99
97
  setAuto(true); // 设置为跟随系统
100
- setColorMode(sys.sysInfo.isDark ? 'dark' : 'light'); // 设置新的值
101
- storageStore.storageStore.theme = ''; // 移除本地的值
102
- cookie.manageCookie.deleteItem('theme'); // 移除本地的 cookie
98
+ setColorMode(index.sysInfo.isDark ? 'dark' : 'light'); // 设置新的值
99
+ index.storageStore.theme = ''; // 移除本地的值
100
+ index.manageCookie.deleteItem('theme'); // 移除本地的 cookie
103
101
  };
104
102
  react.useEffect(() => {
105
103
  /** 本地储存的值 */
106
- const storageOldColorMode = storageStore.storageStore.theme;
104
+ const storageOldColorMode = index.storageStore.theme;
107
105
  setAuto(!storageOldColorMode);
108
106
  /** 当前设备是否处于暗黑模式 */
109
- const systemPrefersDark = sys.sysInfo.isDark;
107
+ const systemPrefersDark = index.sysInfo.isDark;
110
108
  // 有旧值存在
111
109
  if (storageOldColorMode)
112
110
  setSpecifiedColorMode(storageOldColorMode);
@@ -121,7 +119,7 @@ function ThemeColorModeProvider({ children, initialTheme }) {
121
119
  * 如果本地没有储存值,则认为是系统默认值,接受系统暗黑模式事件
122
120
  * @param e
123
121
  */
124
- const handleSystemChange = (e) => !storageStore.storageStore.theme && setColorMode(e.matches ? 'dark' : 'light');
122
+ const handleSystemChange = (e) => !index.storageStore.theme && setColorMode(e.matches ? 'dark' : 'light');
125
123
  mediaQuery.addEventListener('change', handleSystemChange); // 监听
126
124
  return () => mediaQuery.removeEventListener('change', handleSystemChange);
127
125
  }, []);
@@ -1,9 +1,7 @@
1
1
  'use client';
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
  import { createContext, useState, useEffect, useContext } from 'react';
4
- import { storageStore } from '../../shared/dist/es/storage-store.es.js';
5
- import { sysInfo } from '../../shared/dist/es/sys.es.js';
6
- import { manageCookie } from '../../shared/dist/es/cookie.es.js';
4
+ import { storageStore, sysInfo, manageCookie } from '../../shared/dist/es/index.es.js';
7
5
 
8
6
  /** 用于判断是否正确放置的 */
9
7
  const defaultCall = () => {
@@ -10,7 +10,7 @@ var aJsTools = require('a-js-tools');
10
10
  * @copyright 2026 ©️ MrMudBean
11
11
  * @since 2026-01-23 01:23
12
12
  * @version 2.0.0-alpha.0
13
- * @lastModified 2026-03-25 20:27
13
+ * @lastModified 2026-03-26 18:09
14
14
  */
15
15
  /**
16
16
  * 执行动作
@@ -6,7 +6,7 @@
6
6
  * @copyright 2026 ©️ MrMudBean
7
7
  * @since 2026-01-23 01:23
8
8
  * @version 2.0.0-alpha.0
9
- * @lastModified 2026-03-25 20:27
9
+ * @lastModified 2026-03-26 18:09
10
10
  */
11
11
  import type { BuildBackground } from './class-build-background';
12
12
  import type { ElementEnvironment } from './class-element-environment';
@@ -8,7 +8,7 @@ import { debounce, getRandomInt } from 'a-js-tools';
8
8
  * @copyright 2026 ©️ MrMudBean
9
9
  * @since 2026-01-23 01:23
10
10
  * @version 2.0.0-alpha.0
11
- * @lastModified 2026-03-25 20:27
11
+ * @lastModified 2026-03-26 18:09
12
12
  */
13
13
  /**
14
14
  * 执行动作
@@ -11,7 +11,7 @@ var tools = require('./tools.cjs.js');
11
11
  * @copyright 2026 ©️ MrMudBean
12
12
  * @since 2026-01-22 12:07
13
13
  * @version 2.0.0-alpha.0
14
- * @lastModified 2026-03-25 20:27
14
+ * @lastModified 2026-03-27 11:42
15
15
  */
16
16
  /**
17
17
  * ## 渲染执行类
@@ -82,31 +82,13 @@ class RenderAction {
82
82
  if (aTypeOfJs.isEmptyArray(toBeList)) {
83
83
  return this.exitFade('由于缺少当前渲染背景,退出');
84
84
  }
85
- if (renderData.drawProgress === 0) ;
85
+ if (renderData.currentProgress === 0) ;
86
86
  // 进度完成则结束当前的进度
87
- if (renderData.drawProgress > 1000) {
88
- this.options.firstRun = false; // 已经经历过一次渐变,之后不再缓慢渐变
89
- buildBackground.lastDrawImage = toBeList.shift(); // 更新最后渲染的纹理图
90
- this.rippleGl.bindImage(); // 渲染到背景图
91
- // 尚有未执行完毕的
92
- if (aTypeOfJs.isEmptyArray(toBeList)) {
93
- const { lastUseStyle } = this.elementMeta;
94
- // 没有设置背景色或是背景图
95
- if ((aTypeOfJs.isNull(options.imgUrl) ||
96
- aTypeOfJs.isBusinessEmptyString(options.imgUrl) ||
97
- aTypeOfJs.isZero(options.imgUrl.length)) &&
98
- tools.isNoneBackGroundColor(lastUseStyle.backgroundColor) &&
99
- tools.isNoneBackgroundImage(lastUseStyle.backgroundImage)) {
100
- // 因为此时渲染为空,需要手动添加一个默认渲染
101
- buildBackground.setTransparentTexture(false); // 是否 false,将下次循环执行权交回 `runFade()` 方法
102
- }
103
- }
104
- // 启用下一轮的循环
105
- return this.exitFade('当前执行完毕,开启下次执行');
87
+ if (renderData.isEnd()) {
88
+ this.fadeEnd();
89
+ return; // 结束当前的渐变
106
90
  }
107
- renderData.drawProgress += options.firstRun
108
- ? options.firstDrawProgressStep
109
- : options.drawProgressStep;
91
+ renderData.dPAdd();
110
92
  const canvas = document.createElement('canvas');
111
93
  const ctx = canvas.getContext('2d');
112
94
  /**
@@ -126,7 +108,7 @@ class RenderAction {
126
108
  {
127
109
  // ctx.globalAlpha = 1 - drawProgress;
128
110
  ctx.drawImage(this.buildBackground.lastDrawImage.resource, 0, 0, width, height); // 绘制上一次的图案
129
- ctx.globalAlpha = renderData.drawProgress / 1000; // 设置透明度
111
+ ctx.globalAlpha = renderData.currentTransparency; // 设置透明度
130
112
  /**
131
113
  * bug: 2508021258(1)
132
114
  *
@@ -159,8 +141,31 @@ class RenderAction {
159
141
  if (toBeList.length > 1) {
160
142
  buildBackground.lastDrawImage = currentDrawImage;
161
143
  toBeList.shift(); // 直接丢弃第一个
162
- renderData.drawProgress = 0;
144
+ renderData.resetDP();
145
+ }
146
+ }
147
+ /** 渐变结束 */
148
+ fadeEnd() {
149
+ const { buildBackground, options } = this;
150
+ const { toBeList } = buildBackground;
151
+ this.options.firstRun = false; // 已经经历过一次渐变,之后不再缓慢渐变
152
+ buildBackground.lastDrawImage = toBeList.shift(); // 更新最后渲染的纹理图
153
+ this.rippleGl.bindImage(); // 渲染到背景图
154
+ // 尚有未执行完毕的
155
+ if (aTypeOfJs.isEmptyArray(toBeList)) {
156
+ const { lastUseStyle } = this.elementMeta;
157
+ // 没有设置背景色或是背景图
158
+ if ((aTypeOfJs.isNull(options.imgUrl) ||
159
+ aTypeOfJs.isBusinessEmptyString(options.imgUrl) ||
160
+ aTypeOfJs.isZero(options.imgUrl.length)) &&
161
+ tools.isNoneBackGroundColor(lastUseStyle.backgroundColor) &&
162
+ tools.isNoneBackgroundImage(lastUseStyle.backgroundImage)) {
163
+ // 因为此时渲染为空,需要手动添加一个默认渲染
164
+ buildBackground.setTransparentTexture(false); // 是否 false,将下次循环执行权交回 `runFade()` 方法
165
+ }
163
166
  }
167
+ // 启用下一轮的循环
168
+ return this.exitFade('当前执行完毕,开启下次执行');
164
169
  }
165
170
  /**
166
171
  * 退出当前的渐变执行
@@ -6,7 +6,7 @@
6
6
  * @copyright 2026 ©️ MrMudBean
7
7
  * @since 2026-01-22 12:07
8
8
  * @version 2.0.0-alpha.0
9
- * @lastModified 2026-03-25 20:27
9
+ * @lastModified 2026-03-27 11:42
10
10
  */
11
11
  import type { BuildBackground } from './class-build-background';
12
12
  import type { ElementEnvironment } from './class-element-environment';
@@ -47,6 +47,8 @@ export declare class RenderAction {
47
47
  * 因为第一个背景图出现的总是那么的突兀。现在对第一个渐变判定并单独处理
48
48
  */
49
49
  fade(): void;
50
+ /** 渐变结束 */
51
+ private fadeEnd;
50
52
  /**
51
53
  * 退出当前的渐变执行
52
54
  * @param message
@@ -9,7 +9,7 @@ import { isNoneBackGroundColor, isNoneBackgroundImage, translateBackgroundPositi
9
9
  * @copyright 2026 ©️ MrMudBean
10
10
  * @since 2026-01-22 12:07
11
11
  * @version 2.0.0-alpha.0
12
- * @lastModified 2026-03-25 20:27
12
+ * @lastModified 2026-03-27 11:42
13
13
  */
14
14
  /**
15
15
  * ## 渲染执行类
@@ -80,31 +80,13 @@ class RenderAction {
80
80
  if (isEmptyArray(toBeList)) {
81
81
  return this.exitFade('由于缺少当前渲染背景,退出');
82
82
  }
83
- if (renderData.drawProgress === 0) ;
83
+ if (renderData.currentProgress === 0) ;
84
84
  // 进度完成则结束当前的进度
85
- if (renderData.drawProgress > 1000) {
86
- this.options.firstRun = false; // 已经经历过一次渐变,之后不再缓慢渐变
87
- buildBackground.lastDrawImage = toBeList.shift(); // 更新最后渲染的纹理图
88
- this.rippleGl.bindImage(); // 渲染到背景图
89
- // 尚有未执行完毕的
90
- if (isEmptyArray(toBeList)) {
91
- const { lastUseStyle } = this.elementMeta;
92
- // 没有设置背景色或是背景图
93
- if ((isNull(options.imgUrl) ||
94
- isBusinessEmptyString(options.imgUrl) ||
95
- isZero(options.imgUrl.length)) &&
96
- isNoneBackGroundColor(lastUseStyle.backgroundColor) &&
97
- isNoneBackgroundImage(lastUseStyle.backgroundImage)) {
98
- // 因为此时渲染为空,需要手动添加一个默认渲染
99
- buildBackground.setTransparentTexture(false); // 是否 false,将下次循环执行权交回 `runFade()` 方法
100
- }
101
- }
102
- // 启用下一轮的循环
103
- return this.exitFade('当前执行完毕,开启下次执行');
85
+ if (renderData.isEnd()) {
86
+ this.fadeEnd();
87
+ return; // 结束当前的渐变
104
88
  }
105
- renderData.drawProgress += options.firstRun
106
- ? options.firstDrawProgressStep
107
- : options.drawProgressStep;
89
+ renderData.dPAdd();
108
90
  const canvas = document.createElement('canvas');
109
91
  const ctx = canvas.getContext('2d');
110
92
  /**
@@ -124,7 +106,7 @@ class RenderAction {
124
106
  {
125
107
  // ctx.globalAlpha = 1 - drawProgress;
126
108
  ctx.drawImage(this.buildBackground.lastDrawImage.resource, 0, 0, width, height); // 绘制上一次的图案
127
- ctx.globalAlpha = renderData.drawProgress / 1000; // 设置透明度
109
+ ctx.globalAlpha = renderData.currentTransparency; // 设置透明度
128
110
  /**
129
111
  * bug: 2508021258(1)
130
112
  *
@@ -157,8 +139,31 @@ class RenderAction {
157
139
  if (toBeList.length > 1) {
158
140
  buildBackground.lastDrawImage = currentDrawImage;
159
141
  toBeList.shift(); // 直接丢弃第一个
160
- renderData.drawProgress = 0;
142
+ renderData.resetDP();
143
+ }
144
+ }
145
+ /** 渐变结束 */
146
+ fadeEnd() {
147
+ const { buildBackground, options } = this;
148
+ const { toBeList } = buildBackground;
149
+ this.options.firstRun = false; // 已经经历过一次渐变,之后不再缓慢渐变
150
+ buildBackground.lastDrawImage = toBeList.shift(); // 更新最后渲染的纹理图
151
+ this.rippleGl.bindImage(); // 渲染到背景图
152
+ // 尚有未执行完毕的
153
+ if (isEmptyArray(toBeList)) {
154
+ const { lastUseStyle } = this.elementMeta;
155
+ // 没有设置背景色或是背景图
156
+ if ((isNull(options.imgUrl) ||
157
+ isBusinessEmptyString(options.imgUrl) ||
158
+ isZero(options.imgUrl.length)) &&
159
+ isNoneBackGroundColor(lastUseStyle.backgroundColor) &&
160
+ isNoneBackgroundImage(lastUseStyle.backgroundImage)) {
161
+ // 因为此时渲染为空,需要手动添加一个默认渲染
162
+ buildBackground.setTransparentTexture(false); // 是否 false,将下次循环执行权交回 `runFade()` 方法
163
+ }
161
164
  }
165
+ // 启用下一轮的循环
166
+ return this.exitFade('当前执行完毕,开启下次执行');
162
167
  }
163
168
  /**
164
169
  * 退出当前的渐变执行
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ var aJsTools = require('a-js-tools');
4
+
3
5
  /**
4
6
  * @module @enr/class-render-data
5
7
  * @file class-render-data.ts
@@ -8,13 +10,15 @@
8
10
  * @copyright 2026 ©️ MrMudBean
9
11
  * @since 2026-01-22 02:56
10
12
  * @version 2.0.0-alpha.0
11
- * @lastModified 2026-03-25 20:27
13
+ * @lastModified 2026-03-27 12:02
12
14
  */
13
15
  /**
14
16
  * ## 原始数据类
15
17
  * 记录了除参数数据外的运行数据
16
18
  */
17
19
  class RenderData {
20
+ options;
21
+ elementMeta;
18
22
  /**
19
23
  * 上一次雨滴滴落的时间
20
24
  *
@@ -35,6 +39,14 @@ class RenderData {
35
39
  drawProgress = 0;
36
40
  /** 是否处于绘制过渡状态 */
37
41
  isTransitioning = false;
42
+ /** 缓慢开始 */
43
+ easeIn = aJsTools.createBezier(0.9, 0.4, 0.4, 1.0);
44
+ /** 快速开始 */
45
+ fastIn = aJsTools.createBezier(0.2, 0.9, 0.3, 1.0);
46
+ constructor(options, elementMeta) {
47
+ this.options = options;
48
+ this.elementMeta = elementMeta;
49
+ }
38
50
  /**
39
51
  * ## 执行渐变
40
52
  * **非实际工作执行更新**,仅更新变量状态,在 requestAnimationFrame 中判定这些变量执行
@@ -44,9 +56,44 @@ class RenderData {
44
56
  //如果当前正处于渐变过程,直接退出,让渐变自己处理当前的状态
45
57
  if (this.isTransitioning)
46
58
  return;
47
- this.drawProgress = 0;
59
+ this.resetDP();
48
60
  this.isTransitioning = true;
49
61
  }
62
+ /** 重置进度 */
63
+ resetDP() {
64
+ if (this.drawProgress > 100 && this.options.firstRun) {
65
+ this.options.firstRun = false;
66
+ }
67
+ this.drawProgress = 0;
68
+ }
69
+ /** 进度增加 */
70
+ dPAdd() {
71
+ const { options } = this;
72
+ const { firstRun, drawProgressStep } = options;
73
+ this.drawProgress += firstRun ? drawProgressStep / 1.5 : drawProgressStep;
74
+ }
75
+ /** 是否结束 */
76
+ isEnd() {
77
+ return this.drawProgress > 1000;
78
+ }
79
+ /** 查看当前进度 */
80
+ get currentProgress() {
81
+ return this.drawProgress / 1000;
82
+ }
83
+ /**
84
+ * ## 当前应当渲染的透明度
85
+ */
86
+ get currentTransparency() {
87
+ /**
88
+ * 首次运行时判定是否是暗黑模式,时则采用缓进模式
89
+ */
90
+ const now = this.options.firstRun
91
+ ? this.elementMeta.isDark
92
+ ? this.easeIn(this.currentProgress)
93
+ : this.fastIn(this.currentProgress)
94
+ : this.currentProgress;
95
+ return now;
96
+ }
50
97
  /** 销毁 */
51
98
  destroy() {
52
99
  if (this.animationFrameId)
@@ -6,13 +6,17 @@
6
6
  * @copyright 2026 ©️ MrMudBean
7
7
  * @since 2026-01-22 02:56
8
8
  * @version 2.0.0-alpha.0
9
- * @lastModified 2026-03-25 20:27
9
+ * @lastModified 2026-03-27 12:02
10
10
  */
11
+ import type { RippleParam } from './class-param';
12
+ import type { ElementMeta } from './class-html-element-meta';
11
13
  /**
12
14
  * ## 原始数据类
13
15
  * 记录了除参数数据外的运行数据
14
16
  */
15
17
  export declare class RenderData {
18
+ private readonly options;
19
+ private readonly elementMeta;
16
20
  /**
17
21
  * 上一次雨滴滴落的时间
18
22
  *
@@ -35,15 +39,32 @@ export declare class RenderData {
35
39
  /** 缺省背景图时的 id */
36
40
  transparentId: number;
37
41
  /** 绘制进度 (千分制)*/
38
- drawProgress: number;
42
+ private drawProgress;
39
43
  /** 是否处于绘制过渡状态 */
40
44
  isTransitioning: boolean;
45
+ /** 缓慢开始 */
46
+ easeIn: (t: number) => number;
47
+ /** 快速开始 */
48
+ fastIn: (t: number) => number;
49
+ constructor(options: RippleParam, elementMeta: ElementMeta);
41
50
  /**
42
51
  * ## 执行渐变
43
52
  * **非实际工作执行更新**,仅更新变量状态,在 requestAnimationFrame 中判定这些变量执行
44
53
  * 本来想以强制归 0 的方式让动画更流畅,但是这里(曾尝试在逆向渐变开始前直接归 0)归 0 又导致了渐变的不连贯,甚至是直接变白的效果
45
54
  */
46
55
  run(): void;
56
+ /** 重置进度 */
57
+ resetDP(): void;
58
+ /** 进度增加 */
59
+ dPAdd(): void;
60
+ /** 是否结束 */
61
+ isEnd(): boolean;
62
+ /** 查看当前进度 */
63
+ get currentProgress(): number;
64
+ /**
65
+ * ## 当前应当渲染的透明度
66
+ */
67
+ get currentTransparency(): number;
47
68
  /** 销毁 */
48
69
  destroy(): void;
49
70
  }
@@ -1,3 +1,5 @@
1
+ import { createBezier } from 'a-js-tools';
2
+
1
3
  /**
2
4
  * @module @enr/class-render-data
3
5
  * @file class-render-data.ts
@@ -6,13 +8,15 @@
6
8
  * @copyright 2026 ©️ MrMudBean
7
9
  * @since 2026-01-22 02:56
8
10
  * @version 2.0.0-alpha.0
9
- * @lastModified 2026-03-25 20:27
11
+ * @lastModified 2026-03-27 12:02
10
12
  */
11
13
  /**
12
14
  * ## 原始数据类
13
15
  * 记录了除参数数据外的运行数据
14
16
  */
15
17
  class RenderData {
18
+ options;
19
+ elementMeta;
16
20
  /**
17
21
  * 上一次雨滴滴落的时间
18
22
  *
@@ -33,6 +37,14 @@ class RenderData {
33
37
  drawProgress = 0;
34
38
  /** 是否处于绘制过渡状态 */
35
39
  isTransitioning = false;
40
+ /** 缓慢开始 */
41
+ easeIn = createBezier(0.9, 0.4, 0.4, 1.0);
42
+ /** 快速开始 */
43
+ fastIn = createBezier(0.2, 0.9, 0.3, 1.0);
44
+ constructor(options, elementMeta) {
45
+ this.options = options;
46
+ this.elementMeta = elementMeta;
47
+ }
36
48
  /**
37
49
  * ## 执行渐变
38
50
  * **非实际工作执行更新**,仅更新变量状态,在 requestAnimationFrame 中判定这些变量执行
@@ -42,9 +54,44 @@ class RenderData {
42
54
  //如果当前正处于渐变过程,直接退出,让渐变自己处理当前的状态
43
55
  if (this.isTransitioning)
44
56
  return;
45
- this.drawProgress = 0;
57
+ this.resetDP();
46
58
  this.isTransitioning = true;
47
59
  }
60
+ /** 重置进度 */
61
+ resetDP() {
62
+ if (this.drawProgress > 100 && this.options.firstRun) {
63
+ this.options.firstRun = false;
64
+ }
65
+ this.drawProgress = 0;
66
+ }
67
+ /** 进度增加 */
68
+ dPAdd() {
69
+ const { options } = this;
70
+ const { firstRun, drawProgressStep } = options;
71
+ this.drawProgress += firstRun ? drawProgressStep / 1.5 : drawProgressStep;
72
+ }
73
+ /** 是否结束 */
74
+ isEnd() {
75
+ return this.drawProgress > 1000;
76
+ }
77
+ /** 查看当前进度 */
78
+ get currentProgress() {
79
+ return this.drawProgress / 1000;
80
+ }
81
+ /**
82
+ * ## 当前应当渲染的透明度
83
+ */
84
+ get currentTransparency() {
85
+ /**
86
+ * 首次运行时判定是否是暗黑模式,时则采用缓进模式
87
+ */
88
+ const now = this.options.firstRun
89
+ ? this.elementMeta.isDark
90
+ ? this.easeIn(this.currentProgress)
91
+ : this.fastIn(this.currentProgress)
92
+ : this.currentProgress;
93
+ return now;
94
+ }
48
95
  /** 销毁 */
49
96
  destroy() {
50
97
  if (this.animationFrameId)
@@ -19,7 +19,7 @@ var dataDefault = require('./data-default.cjs.js');
19
19
  * @copyright 2026 ©️ MrMudBean
20
20
  * @since 2026-01-22 03:03
21
21
  * @version 2.0.0-alpha.0
22
- * @lastModified 2026-03-25 20:26
22
+ * @lastModified 2026-03-26 18:32
23
23
  */
24
24
  /**
25
25
  * ## 水波动涟漪的效果
@@ -82,7 +82,7 @@ class Ripples {
82
82
  });
83
83
  this.elementMeta = new classHtmlElementMeta.ElementMeta(this.options, this.element, this.state);
84
84
  /** 初始化带 this 指向的重加载回调 */
85
- this.renderData = new classRenderData.RenderData(); // 数据初始化
85
+ this.renderData = new classRenderData.RenderData(this.options, this.elementMeta); // 数据初始化
86
86
  this.buildBackground = new classBuildBackground.BuildBackground(this.options, this.elementMeta, this.renderData);
87
87
  this.gl = new classWebgl.RippleGl(this.element, this.options, this.elementMeta, this.buildBackground);
88
88
  {
@@ -6,7 +6,7 @@
6
6
  * @copyright 2026 ©️ MrMudBean
7
7
  * @since 2026-01-22 03:03
8
8
  * @version 2.0.0-alpha.0
9
- * @lastModified 2026-03-25 20:26
9
+ * @lastModified 2026-03-26 18:32
10
10
  */
11
11
  import { RippleParam } from './class-param';
12
12
  import type { RipplesOptions } from './types';
@@ -17,7 +17,7 @@ import { defaultData } from './data-default.es.js';
17
17
  * @copyright 2026 ©️ MrMudBean
18
18
  * @since 2026-01-22 03:03
19
19
  * @version 2.0.0-alpha.0
20
- * @lastModified 2026-03-25 20:26
20
+ * @lastModified 2026-03-26 18:32
21
21
  */
22
22
  /**
23
23
  * ## 水波动涟漪的效果
@@ -80,7 +80,7 @@ class Ripples {
80
80
  });
81
81
  this.elementMeta = new ElementMeta(this.options, this.element, this.state);
82
82
  /** 初始化带 this 指向的重加载回调 */
83
- this.renderData = new RenderData(); // 数据初始化
83
+ this.renderData = new RenderData(this.options, this.elementMeta); // 数据初始化
84
84
  this.buildBackground = new BuildBackground(this.options, this.elementMeta, this.renderData);
85
85
  this.gl = new RippleGl(this.element, this.options, this.elementMeta, this.buildBackground);
86
86
  {
@@ -3,7 +3,7 @@
3
3
  * @file types.ts
4
4
  * @since 周二 12/17/2024
5
5
  * @description BackgroundRipples 的类型声明文件
6
- * @lastModified 2026-02-07 08:06
6
+ * @lastModified 2026-03-26 17:34
7
7
  */
8
8
  /**
9
9
  * ## 图片源
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "type": "module",
3
3
  "name": "enr",
4
- "version": "2.0.6",
4
+ "version": "2.0.7",
5
5
  "description": "一个简单的 ui",
6
6
  "peerDependencies": {
7
7
  "react": "^19.1.0",
@@ -11,7 +11,7 @@
11
11
  "@babel/runtime": "^7.29.2",
12
12
  "@qqi/state": "^0.0.0",
13
13
  "a-element-inline-style": "^1.0.2",
14
- "a-js-tools": "^2.0.2",
14
+ "a-js-tools": "^2.0.3",
15
15
  "a-type-of-js": "^2.0.1",
16
16
  "styled-component": "^2.6.0",
17
17
  "xcn": "^1.1.2"