@ray-js/lamp-bead-strip 1.0.3-beta-33 → 1.1.0-beta-2

package/README.md

@@ -29,6 +29,8 @@ yarn start:tuya
 
 ### Basic usage
 
+`colors`and `canvasId`are mandatory, otherwise the animation cannot run`canvasId`must ensure page uniqueness. When we input different animation modes`mode`, the component will automatically play the animation.
+
 ```tsx
 import LampBeadStrip from '@ray-js/lamp-bead-strip';
 export default () => (
@@ -44,6 +46,8 @@ export default () => (
 
 ### Pauses
 
+`ready`allows you to set whether the animation of the component plays or pauses.
+
 ```tsx
 import LampBeadStrip from '@ray-js/lamp-bead-strip';
 export default () => (
@@ -57,8 +61,36 @@ export default () => (
 );
 ```
 
+### Customize Scaling Size
+
+Since the components are drawn through canvas, the internal dimensions are fixed. The component internally handles screen scaling logic, which is controlled through the`scale`property. If you want to modify the size of a component, you can customize the`scale`property to achieve your goal. The following use case expects the component size to be`1.1`times larger than before.
+
+> It should be noted that the component only sets the scale once during initialization, so if the scale property is changed or set after initialization, it will be invalid
+
+```tsx
+import LampBeadStrip from '@ray-js/lamp-bead-strip';
+import { getSystemInfoSync } from '@ray-js/ray';
+
+const { windowWidth = 375 } = getSystemInfoSync();
+export default () => {
+  const scale = (windowWidth / 375) * 1.1;
+  return (
+    <LampBeadStrip
+      containerStyle={`height: ${48 * 1.1}rpx;width:${570 * 1.1}rpx;`}
+      mode={16}
+      canvasId="template2"
+      scale={scale}
+      colors={['rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,0,255)']}
+      contentValue={{ expand: 1 }}
+    />
+  );
+};
+```
+
 ### Set the light off color
 
+`closeColor` can set the color of lights that do not have color in the animation, that is, the color of the light beads that turn off the lights in the device. This way, the light strip component can adapt to multiple background colors, preventing the node color that turns off the lights from being the same as the background color.
+
 ```tsx
 import LampBeadStrip from '@ray-js/lamp-bead-strip';
 
@@ -74,6 +106,31 @@ export default () => {
 };
 ```
 
+### Custom Animation（v1.1.0）
+
+`customAnimationList`: Attributes can be used to customize animations. They are a list of animation frames, which is a two-dimensional array. Each internal array consists of 20 colors, equivalent to the colors of 20 lights in the animation frame component. The component will automatically loop through this animation list.  
+`customAnimationChangeTime`: Switching the time of custom animation, the playback speed is controlled by this attribute, representing how much time to switch one stitch, in milliseconds.
+
+```tsx
+import LampBeadStrip from '@ray-js/lamp-bead-strip';
+import React, { useMemo } from 'react';
+
+export default () => {
+  const customAnimationList = useMemo(() => {
+    const colors = ['rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,0,255)'];
+    return colors.map(item => new Array(20).fill(item));
+  }, []);
+
+  return (
+    <LampBeadStrip
+      canvasId="template4"
+      customAnimationList={customAnimationList}
+      customAnimationChangeTime={500}
+    />
+  );
+};
+```
+
 ### Animation Mode
 
 > Phase 1: 6, 1. Gradient, 2. Jump, 3. Breath, 4. Blink, 10. Flowing Water, 11. Rainbow  

package/lib/components/index.rjs

@@ -2,7 +2,7 @@
  * @Author: mjh
  * @Date: 2024-09-02 11:42:04
  * @LastEditors: mjh
- * @LastEditTime: 2024-10-21 14:31:04
+ * @LastEditTime: 2025-01-20 10:05:42
  * @Description: 
  */
 
@@ -20,6 +20,7 @@ export default Render({
   mode: null,
   animationStore: null,
   closeRgb: null,
+  preCustom: null,
   /**
    * @name: 渲染灯带动画
    * @desc: 
@@ -39,6 +40,11 @@ export default Render({
       this.ctx.scale(this.scale, this.scale);
     }
     this.ready = props.ready ?? true
+    // 自定义动画模式
+    if (props.customAnimationList) {
+      this.checkCustomAnimation(props)
+      return
+    }
     // 只有关键属性变化才重置动画
     const isSameContent = `${props.closeColor}${props.mode}${props.colors.length}${props.contentValue.expand}${props.contentValue.segmented}` === `${this.closeRgb}${this.mode}${this.colors.length}${this.contentValue.expand}${this.contentValue.segmented}`
     this.closeRgb = props.closeColor;
@@ -94,6 +100,25 @@ export default Render({
     this.offset += 1;
     if(this.offset === length) this.offset = 0
   },
+  checkCustomAnimation(props) {
+    const isSameContent = this.preCustom ? `${JSON.stringify(props.customAnimationList)}${props.customAnimationChangeTime}` === this.preCustom : false;
+    this.preCustom = `${JSON.stringify(props.customAnimationList)}${props.customAnimationChangeTime}`;
+    // 重置动画
+    if (!isSameContent) {
+      this.offset = 0
+    }
+    this.stopLight();
+    this.drawCustom(props.customAnimationList);
+    if(!this.ready) return
+    this.timer = setInterval(() => {
+      this.drawCustom(props.customAnimationList);
+    }, props.customAnimationChangeTime);
+  },
+  drawCustom(colorList) {
+    this.drawPoint(colorList[this.offset]);
+    this.offset += 1;
+    if(this.offset === colorList.length) this.offset = 0
+  },
   /**
    * @name: 绘制点
    * @desc: 

package/lib/index.js

@@ -1,4 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["standardScale"];
 import React from 'react';
 import LampBeadStripRjs from './components';
 import { getSystemInfoRes } from './utils';
@@ -7,11 +9,15 @@ const {
   windowWidth = 375
 } = getSystemInfoRes();
 const LampBeadStrip = props => {
+  const {
+      standardScale = 1
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
   // 组件缩放能力
 
   return /*#__PURE__*/React.createElement(LampBeadStripRjs, {
-    prop: _objectSpread(_objectSpread({}, props), {}, {
-      scale: props.scale || windowWidth / 375
+    prop: _objectSpread(_objectSpread({}, rest), {}, {
+      scale: rest.scale || windowWidth / 375 * standardScale
     })
   });
 };

package/lib/props.d.ts

@@ -6,6 +6,7 @@ export interface IProps {
      */
     className?: string;
     /**
+     * @description.zh 动画模式 1-16
      * @description.en Animation mode 1-16
      * @default 1
      */
@@ -31,12 +32,14 @@ export interface IProps {
      */
     colors: string[];
     /**
+     * @description.zh 动画速度 1%-100% 对应动画帧刷新间隔 60ms～350ms，速度值越大，间隔越短
      * @description.en The animation speed ranges from 1% to 100%, corresponding to a frame refresh interval of 60ms to 350ms. The larger the speed value, the shorter the interval
      * @default 50
      */
     speed?: number;
     /**
      * @description.zh 是否播放动画
+     * @description.en Whether to play the animation.
      * @default true
      */
     ready?: boolean;
@@ -60,5 +63,26 @@ export interface IProps {
      * @default 'rgb(58,58,58)'
      */
     closeColor?: string;
+    /**
+     * @description.zh 自定义动画列表
+     * @description.en Custom Animation List
+     * @default undefined
+     * @version 1.1.0
+     */
+    customAnimationList?: string[][];
+    /**
+     * @description.zh 自定义动画切换帧时间，单位毫秒
+     * @description.en Custom animation switching frame time, in milliseconds
+     * @default 100
+     * @version 1.1.0
+     */
+    customAnimationChangeTime?: number;
+    /**
+     * @description.zh 标准缩放比例，内部表达式： windowWidth / 375 * standardScale, 目的简化书写
+     * @description.en Standard scaling ratio, internal expression: windowWidth / 375 * standardScale,  Purpose: Simplify Writing
+     * @default 1
+     * @version 1.1.0
+     */
+    standardScale?: number;
 }
 export declare const defaultProps: IProps;

package/lib/props.js

@@ -2,7 +2,7 @@
  * @Author: mjh
  * @Date: 2024-09-12 09:55:13
  * @LastEditors: mjh
- * @LastEditTime: 2024-12-13 09:52:28
+ * @LastEditTime: 2025-01-20 10:37:05
  * @Description:
  */
 
@@ -14,5 +14,7 @@ export const defaultProps = {
   colors: [],
   contentValue: {},
   closeColor: 'rgb(58,58,58)',
-  className: ''
+  className: '',
+  customAnimationChangeTime: 100,
+  standardScale: 1
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-bead-strip",
-  "version": "1.0.3-beta-33",
+  "version": "1.1.0-beta-2",
   "description": "动画灯珠条带",
   "main": "lib/index",
   "files": [
@@ -17,14 +17,14 @@
   ],
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
-    "build": "ray build --type=component",
+    "build": "patch-package && ray build --type=component",
     "watch": "ray start --type=component --output ./example/src/lib",
-    "build:tuya": "ray build ./example -t tuya",
+    "build:tuya": "ray build ./example",
     "build:wechat": "ray build ./example --target=wechat",
     "build:web": "ray build ./example --target=web",
     "build:native": "ray build ./example --target=native",
     "start:native": "ray start ./example -t native --verbose",
-    "start:tuya": "ray start ./example -t tuya",
+    "start:tuya": "ray start ./example",
     "start:wechat": "ray start ./example -t wechat --verbose",
     "start:web": "ray start ./example -t web",
     "prepublishOnly": "yarn build",
@@ -37,9 +37,9 @@
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
-    "@ray-js/cli": "^1.5.47",
-    "@ray-js/panel-sdk": "^1.13.1",
-    "@ray-js/ray": "^1.5.47",
+    "@ray-js/cli": "^1.4.9",
+    "@ray-js/panel-sdk": "^1.12.1",
+    "@ray-js/ray": "^1.4.9",
     "core-js": "^3.19.1",
     "eslint-config-tuya-panel": "^0.4.2",
     "husky": "^1.2.0",