@ray-js/lamp-bead-strip 1.0.1-beta-1

package/README.md

@@ -0,0 +1,131 @@
+English | [简体中文](./README-zh_CN.md)
+
+# @ray-js/lamp-bead-strip
+
+[![latest](https://img.shields.io/npm/v/@ray-js/lamp-bead-strip/latest.svg)](https://www.npmjs.com/package/@ray-js/lamp-bead-strip) [![download](https://img.shields.io/npm/dt/@ray-js/lamp-bead-strip.svg)](https://www.npmjs.com/package/@ray-js/lamp-bead-strip)
+
+> Animated LED strip
+
+Directly using `canvas` to draw animation effects, and internally preventing duplicate rendering, achieving simultaneous rendering of multiple animations on low-end machine pages without stuttering.
+
+## Installation
+
+```sh
+$ npm install @ray-js/lamp-bead-strip
+# or
+$ yarn add @ray-js/lamp-bead-strip
+```
+
+## Develop
+
+```sh
+# watch compile component code
+yarn watch
+# watch compile demo
+yarn start:tuya
+```
+
+## Usage
+
+### 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 () => (
+  <LampBeadStrip
+    canvasId="diy-scene"
+    speed={80}
+    mode={10}
+    colors={['rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,0,255)']}
+    contentValue={{ segmented: 1 }}
+  />
+);
+```
+
+### 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 () => (
+  <LampBeadStrip
+    canvasId="diy-scene1"
+    mode={2}
+    ready={false}
+    colors={['rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,0,255)']}
+    contentValue={{ segmented: 1, direction: 1 }}
+  />
+);
+```
+
+### 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';
+
+export default () => {
+  return (
+    <LampBeadStrip
+      mode={16}
+      canvasId="template3"
+      closeColor="rgba(255,255,255,.6)"
+      colors={['rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,0,255)']}
+    />
+  );
+};
+```
+
+### Animation Mode
+
+> Phase 1: 6, 1. Gradient, 2. Jump, 3. Breath, 4. Blink, 10. Flowing Water, 11. Rainbow  
+> Phase 2 10, 5 shooting stars, 6 accumulation, 7 falling, 8 chasing light, 9 drifting, 12 flashing, 13 rebounding, 14 shuttling, 15 chaotic flashing, 16 opening and closing
+
+| Animation mode value | description                    | Contains control types contentValue                                                                    |
+| -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------ |
+| 1                    | （Phase 1）Gradient            | segmented（intact 0/subsection 1）                                                                     |
+| 2                    | （Phase 1）Jump                | segmented（intact 0/subsection 1）                                                                     |
+| 3                    | （Phase 1）Breath              | segmented（intact 0/subsection 1）                                                                     |
+| 4                    | （Phase 1）Blink               | segmented（intact 0/subsection 1）                                                                     |
+| 10                   | （Phase 1）Flowing Water       | direction（Clockwise 0/anti-clockwise 1）                                                              |
+| 11                   | （Phase 1）Rainbow             | direction（Clockwise 0/anti-clockwise 1）                                                              |
+| 5                    | （Phase 2）shooting stars      | direction（Clockwise 0/anti-clockwise 1） expand（shooting-stars 0/meteor-shower 1/Colorful-meteor 2） |
+| 6                    | （Phase 2）accumulation        | direction（Clockwise 0/anti-clockwise 1） segmented（intact 0/subsection 1）                           |
+| 7                    | （Phase 2）falling             | direction（Clockwise 0/anti-clockwise 1） segmented（intact 0/subsection 1）                           |
+| 8                    | （Phase 2）chasing light       | direction（Clockwise 0/anti-clockwise 1）                                                              |
+| 9                    | （Phase 2）drifting            | direction（Clockwise 0/anti-clockwise 1）                                                              |
+| 12                   | （Phase 2）flashing            | segmented（intact 0/subsection 1）                                                                     |
+| 13                   | （Phase 2）rebounding          | expand（rebound 0/Colorful rebound 1）                                                                 |
+| 14                   | （Phase 2）shuttling           | -                                                                                                      |
+| 15                   | （Phase 2）chaotic flashing    | -                                                                                                      |
+| 16                   | （Phase 2）opening and closing | expand（Same Time 0/staggered 1）                                                                      |

package/lib/components/index.js

@@ -0,0 +1,58 @@
+/*
+ * @Author: mjh
+ * @Date: 2024-09-02 11:42:04
+ * @LastEditors: mjh
+ * @LastEditTime: 2024-10-16 17:37:37
+ * @Description:
+ */
+import Render from './index.rjs';
+// eslint-disable-next-line no-undef
+Component({
+  properties: {
+    /** {
+      scale: Number,
+      mode: String,
+      ready: Boolean,
+      colors: Array,
+      canvasId: String,
+      contentValue: Object,
+      containerStyle: String,
+      canvasStyle: String,
+      closeColor: String
+    } */
+    prop: Object
+  },
+  data() {
+    return {
+      pre: {},
+      isReady: false
+    };
+  },
+  lifetimes: {
+    attached() {
+      this.render = new Render(this);
+    },
+    ready() {
+      if (!this.render) {
+        this.render = new Render(this);
+      }
+      this.pre = this.data.prop;
+      this.render.renderLight(this.data.prop);
+      this.isReady = true;
+    },
+    detached() {
+      this.render.stopLight();
+    }
+  },
+  observers: {
+    prop(res) {
+      // canvas元素加载完成后再渲染
+      if (!this.isReady || JSON.stringify(res) === JSON.stringify(this.pre || {})) {
+        return;
+      }
+      this.render.renderLight(res);
+      this.pre = res;
+    }
+  },
+  methods: {}
+});

package/lib/components/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/lib/components/index.rjs

@@ -0,0 +1,151 @@
+/*
+ * @Author: mjh
+ * @Date: 2024-09-02 11:42:04
+ * @LastEditors: mjh
+ * @LastEditTime: 2024-10-21 14:31:04
+ * @Description: 
+ */
+
+import { topList } from './utils'
+import modeOption from './mode/index'
+export default Render({
+  ctx: null,
+  offset: 0,
+  scale: 1,
+  timer: null,
+  colors: [],
+  contentValue: {},
+  speed: 50,
+  ready: true,
+  mode: null,
+  animationStore: null,
+  closeRgb: null,
+  /**
+   * @name: 渲染灯带动画
+   * @desc: 
+   * @param {*} props
+   * @return {*}
+   */  
+  async renderLight(props) {
+    this.scale = props.scale || 1;
+    if (!props.canvasId) {
+      console.log('canvasId 是必传项！');
+      return
+    }
+    // 初始化记录和缩放 canvas
+    if(!this.ctx) {
+      const canvas5 = await getCanvasById('ray-lamp-bead-strip-canvasId-' + props.canvasId);
+      this.ctx = canvas5.getContext('2d');
+      this.ctx.scale(this.scale, this.scale);
+    }
+    this.ready = props.ready ?? true
+    // 只有关键属性变化才重置动画
+    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;
+    this.mode = props.mode;
+    this.colors = props.colors;
+    this.contentValue = props.contentValue || {};
+    this.speed = props.speed || 50; 
+    // 获取对应模式的动画方法
+    const currFun = modeOption[this.mode];
+    const isSafe = this.errorCheck(currFun, props)
+    if(!isSafe) return
+    this.animationStore = modeOption[this.mode](props.colors, props.contentValue, this.closeRgb)
+    this.startLight(!isSameContent)
+  },
+  /**
+   * @name: 开始动画
+   * @desc: 
+   * @param {*} init 是否重置动画
+   * @return {*}
+   */
+  startLight(init) {
+    // 重置动画
+    if (init) {
+      this.offset = 0
+    }
+    this.stopLight();
+    this.draw();
+    // 动画更新时间
+    const speed = this.speed < 30 ? 200 + (30 - this.speed) * 5 : 6000 / this.speed;
+    if(!this.ready) return
+    this.timer = setInterval(() => {
+      this.draw();
+    },speed);
+  },
+  /**
+   * @name: 暂停动画
+   * @desc: 
+   * @return {*}
+   */
+  async stopLight() {
+    if (!this.timer) return;
+    clearInterval(this.timer);
+    this.timer = null;
+  },
+  /**
+   * @name: 绘制动画
+   * @desc: 
+   * @return {*}
+   */
+  draw() {
+    const { colorList, length } = this.animationStore
+    this.drawPoint(colorList[this.offset]);
+    this.offset += 1;
+    if(this.offset === length) this.offset = 0
+  },
+  /**
+   * @name: 绘制点
+   * @desc: 
+   * @param {*} colorList 颜色列表
+   * @return {*}
+   */  
+  drawPoint(colorList) {
+    if(!colorList) return;
+    this.ctx.globalCompositeOperation = 'destination-over';
+    // clear canvas
+    this.ctx.clearRect(0, 0, this.ctx.canvas.clientWidth, this.ctx.canvas.clientHeight);
+    let startTop = (8.75 + 4.5)
+    colorList.forEach((_, index) => {
+      const color = colorList[index]
+      const topMid = topList[index]
+      startTop -= topMid
+      //开始绘制
+      this.ctx.beginPath();
+      this.ctx.arc(
+        (4.5 + 14.45 * index),
+        startTop,
+        4.5,
+        0,
+        2*Math.PI);
+      this.ctx.fillStyle = color;
+      this.ctx.fill();
+    })
+  },
+  /**
+   * @name: 异常错误检测
+   * @desc: 
+   * @param {*} currFun 动画方法
+   * @param {*} props 入参
+   * @return {*}
+   */
+  errorCheck(currFun, props) {
+    if (!currFun) {
+      console.error('错误的动画mode类型！');
+      return false
+    }
+    if (!props.colors?.length) {
+      console.error('未传入颜色列表！');
+      return false
+    }
+    if (props.colors.some(item => typeof item === 'string' ? !item.startsWith('rgb(') : true)) {
+      console.error('颜色必须是rgb！');
+      return false
+    }
+    if (props.speed > 100 || props.speed < 1) {
+      console.error('错误的speed值，其范围为1～100！');
+      return false
+    }
+    return true
+  }
+});

package/lib/components/index.tyml

@@ -0,0 +1,11 @@
+<view 
+    class="ray-lamp-bead-strip {{prop.className}}" 
+    style="{{prop.containerStyle}}"
+>
+    <canvas 
+        type="2d" 
+        class="ray-lamp-bead-strip-canvas"
+        canvas-id="ray-lamp-bead-strip-canvasId-{{prop.canvasId}}" 
+        style="{{prop.canvasStyle}}"
+    ></canvas>
+</view>

package/lib/components/index.tyss

@@ -0,0 +1,9 @@
+.ray-lamp-bead-strip {
+  height: 48rpx;
+  width:570rpx;
+}
+
+.ray-lamp-bead-strip-canvas {
+  width: 100%;
+  height: 100%;
+}

package/lib/components/mode/index.js

@@ -0,0 +1,52 @@
+/** 一期 */
+import mode1 from './mode1';
+import mode2 from './mode2';
+import mode3 from './mode3';
+import mode4 from './mode4';
+import mode10 from './mode10';
+import mode11 from './mode11';
+/** 二期 */
+import mode5 from './mode5';
+import mode6 from './mode6';
+import mode7 from './mode7';
+import mode8 from './mode8';
+import mode9 from './mode9';
+import mode12 from './mode12';
+import mode13 from './mode13';
+import mode14 from './mode14';
+import mode15 from './mode15';
+import mode16 from './mode16';
+export default {
+  /** 渐变 */
+  1: mode1,
+  /** 跳变 */
+  2: mode2,
+  /** 呼吸 */
+  3: mode3,
+  /** 闪烁 */
+  4: mode4,
+  /** 流水 */
+  10: mode10,
+  /** 彩虹 */
+  11: mode11,
+  /** 流星 */
+  5: mode5,
+  /** 堆积 */
+  6: mode6,
+  /** 飘落 */
+  7: mode7,
+  /** 追光 */
+  8: mode8,
+  /** 飘动 */
+  9: mode9,
+  /** 闪现 */
+  12: mode12,
+  /** 反弹 */
+  13: mode13,
+  /** 穿梭 */
+  14: mode14,
+  /** 乱闪 */
+  15: mode15,
+  /** 开合 */
+  16: mode16
+};

package/lib/components/mode/mode1.js

@@ -0,0 +1,29 @@
+import { generateGradientColors, getListByIndex, arrayFill } from '../utils';
+
+/** 渐变 */
+const mode = (colors, option) => {
+  const {
+    segmented
+  } = option || {};
+  let allColor = [];
+  colors.forEach((element, index) => {
+    const afterColor = colors[index + 1] || colors[0];
+    const colorList = generateGradientColors([element, afterColor], 10);
+    allColor = [...allColor, ...colorList];
+  });
+  if (!segmented) {
+    const colorList = allColor.map(item => arrayFill(20, item));
+    return {
+      colorList,
+      length: colorList.length
+    };
+  }
+  const colorList = allColor.map((_, index) => {
+    return [...arrayFill(4, allColor[index]), ...arrayFill(4, getListByIndex(allColor, index + 10)), ...arrayFill(4, getListByIndex(allColor, index + 20)), ...arrayFill(4, getListByIndex(allColor, index + 30)), ...arrayFill(4, getListByIndex(allColor, index + 40))];
+  });
+  return {
+    colorList,
+    length: colorList.length
+  };
+};
+export default mode;

package/lib/components/mode/mode10.js

@@ -0,0 +1,45 @@
+/*
+ * @Author: mjh
+ * @Date: 2024-10-21 14:23:12
+ * @LastEditors: mjh
+ * @LastEditTime: 2024-10-21 14:24:06
+ * @Description:
+ */
+import { arrayFill } from '../utils';
+
+/** 流水 */
+const mode = (colors, option) => {
+  const {
+    direction
+  } = option || {};
+  let numList = [];
+  switch (colors.length) {
+    case 2:
+      numList = arrayFill(colors.length, 15);
+      break;
+    case 3:
+      numList = arrayFill(colors.length, 10);
+      break;
+    case 4:
+    case 5:
+      numList = arrayFill(colors.length, 6);
+      break;
+    case 6:
+    case 7:
+    case 8:
+      numList = arrayFill(colors.length, 5);
+      break;
+    default:
+      break;
+  }
+  const allColor = numList.map((item, index) => arrayFill(item, colors[index])).flat(1);
+  const colorList = allColor.map((_, index) => {
+    const list = [...allColor.slice(index), ...allColor.slice(0, index)];
+    return direction ? list : list.reverse();
+  });
+  return {
+    colorList,
+    length: colorList.length
+  };
+};
+export default mode;

package/lib/components/mode/mode11.js

@@ -0,0 +1,45 @@
+/*
+ * @Author: mjh
+ * @Date: 2024-10-21 14:23:12
+ * @LastEditors: mjh
+ * @LastEditTime: 2024-10-21 14:24:33
+ * @Description:
+ */
+import { arrayFill } from '../utils';
+
+/** 彩虹 */
+const mode = (colors, option) => {
+  const {
+    direction
+  } = option || {};
+  let colorList = colors;
+  switch (colors.length) {
+    case 2:
+    case 4:
+    case 6:
+    case 8:
+      colorList = arrayFill(5, colors).flat(1);
+      break;
+    case 3:
+    case 7:
+      colorList = arrayFill(10, colors).flat(1);
+      break;
+    case 5:
+      colorList = arrayFill(2, colors).flat(1);
+      break;
+    default:
+      break;
+  }
+  const allColor = colorList.map(item => arrayFill(4, item)).flat(1);
+  const colorAnimation = allColor.map((_, index) => {
+    const endIndex = index + 20;
+    const endColor = endIndex > allColor.length - 1 ? allColor.slice(0, endIndex - allColor.length + 1) : [];
+    const list = [...allColor.slice(index, index + 20), ...endColor];
+    return direction ? list : list.reverse();
+  });
+  return {
+    colorList: colorAnimation,
+    length: colorAnimation.length
+  };
+};
+export default mode;

package/lib/components/mode/mode12.js

@@ -0,0 +1,80 @@
+/*
+ * @Author: mjh
+ * @Date: 2024-10-21 14:23:12
+ * @LastEditors: mjh
+ * @LastEditTime: 2024-10-21 14:27:13
+ * @Description:
+ */
+import { arrayFill, splitArray } from '../utils';
+
+/** 闪现 */
+const mode = (colors, option, closeRgb) => {
+  const {
+    segmented
+  } = option || {};
+  const closeColors = arrayFill(4, closeRgb);
+  // 全段
+  if (!segmented) {
+    const colorAnimation = colors.map(item => {
+      let partCheckList = arrayFill(5, false);
+      const partColors = arrayFill(4, item);
+      const fillColors = arrayFill(6, '').map((_, index) => {
+        if (index) {
+          const currIndexList = [];
+          partCheckList.forEach((check, ind) => {
+            !check && currIndexList.push(ind);
+          });
+          const checkIndex = Math.ceil(Math.random() * (currIndexList.length - 1));
+          partCheckList[currIndexList[checkIndex]] = true;
+        }
+        const list = partCheckList.map(part => part ? partColors : closeColors).flat(1);
+        return arrayFill(2, list);
+      }).flat(1);
+      fillColors.push(...arrayFill(3, arrayFill(20, item)));
+      return fillColors;
+    }).flat(1);
+    return {
+      colorList: colorAnimation,
+      length: colorAnimation.length
+    };
+  }
+  // 分段
+  let colorList = colors;
+  switch (colors.length) {
+    case 2:
+    case 3:
+    case 4:
+    case 6:
+    case 7:
+    case 8:
+      colorList = arrayFill(5, colors).flat(1);
+      break;
+    case 5:
+      break;
+    default:
+      break;
+  }
+  const splitColorList = splitArray(colorList, 5);
+  const colorAnimation = splitColorList.map(colorItemList => {
+    let partCheckList = arrayFill(5, false);
+    const fillColors = arrayFill(6, '').map((_, index) => {
+      if (index) {
+        const currIndexList = [];
+        partCheckList.forEach((item, ind) => {
+          !item && currIndexList.push(ind);
+        });
+        const checkIndex = Math.ceil(Math.random() * (currIndexList.length - 1));
+        partCheckList[currIndexList[checkIndex]] = true;
+      }
+      const list = partCheckList.map((item, indexs) => item ? arrayFill(4, colorItemList[indexs]) : closeColors).flat(1);
+      return arrayFill(3, list);
+    }).flat(1);
+    fillColors.push(...arrayFill(4, fillColors[fillColors.length - 1]));
+    return fillColors;
+  }).flat(1);
+  return {
+    colorList: colorAnimation,
+    length: colorAnimation.length
+  };
+};
+export default mode;

package/lib/components/mode/mode13.js

@@ -0,0 +1,35 @@
+/*
+ * @Author: mjh
+ * @Date: 2024-10-21 14:23:12
+ * @LastEditors: mjh
+ * @LastEditTime: 2024-10-21 14:27:45
+ * @Description:
+ */
+import { arrayFill, generateGradientColors } from '../utils';
+
+/** 反弹 */
+const mode = (colors, option, closeRgb) => {
+  const {
+    expand
+  } = option || {};
+  const closeColors = arrayFill(20, closeRgb);
+  const colorList = colors % 2 === 0 ? colors : arrayFill(2, colors).flat(1);
+  let direction = 'right';
+  let isFirst = true;
+  const colorAnimation = colorList.map((item, index) => {
+    const currColors = !expand ? arrayFill(5, item) : generateGradientColors([item, colorList[index + 1] || colorList[0]], 5);
+    const colorRoadList = arrayFill(isFirst ? 16 : 15, '').map((_, ind) => {
+      const currList = [...closeColors];
+      currList.splice(isFirst ? ind : ind + 1, 5, ...currColors);
+      return direction === 'right' ? currList : currList.reverse();
+    });
+    isFirst = false;
+    direction = direction === 'right' ? 'left' : 'right';
+    return colorRoadList;
+  }).flat(1);
+  return {
+    colorList: colorAnimation,
+    length: colorAnimation.length
+  };
+};
+export default mode;