Merge pull request #742 from thundersdata-frontend/feat/lego

feat: 用动画替代动态背景图

.changeset/wild-foxes-share.md

@@ -0,0 +1,5 @@
+---
+'@td-design/lego': minor
+---
+
+feat: 用css动画替代动态背景图

packages/lego/src/circular-solid-pie/index.less

@@ -0,0 +1,32 @@
+@prefix: .td-lego-circular-solid-pie;
+
+@{prefix}-bg {
+  animation: innerLoading 8s linear infinite;
+}
+@{prefix}-outer-image {
+  animation: outerLoading 5s linear infinite;
+}
+@{prefix}-inner-image {
+  animation: innerLoading 3s linear infinite;
+}
+@keyframes innerLoading {
+  /*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
+  0% {
+    /*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes outerLoading {
+  /*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
+  0% {
+    /*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}

packages/lego/src/circular-solid-pie/index.tsx

@@ -7,14 +7,19 @@ import { GraphicComponent, GraphicComponentOption, TooltipComponent, TooltipComp
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 import { merge } from 'lodash-es';
 
-import imgPieBg from '../assets/img_circle_bg.webp';
+import bg from '../assets/bg.png';
+import innerBg from '../assets/inner.png';
+import outerBg from '../assets/outer.png';
 import useBaseChartConfig from '../hooks/useBaseChartConfig';
 import useBasePieConfig from '../hooks/useBasePieConfig';
 import useChartLoop from '../hooks/useChartLoop';
 import useNodeBoundingRect from '../hooks/useNodeBoundingRect';
 import useStyle from '../hooks/useStyle';
 import useTheme from '../hooks/useTheme';
 import createLinearGradient from '../utils/createLinearGradient';
+import './index.less';
+
+const prefixName = 'td-lego-circular-solid-pie';
 
 type ECOption = echarts.ComposeOption<PieSeriesOption | TooltipComponentOption | GraphicComponentOption>;
 
@@ -233,6 +238,19 @@ export default forwardRef<ReactEcharts, CircularSolidPieProps>(
       config
     );
 
+    const imageStyle: React.CSSProperties = {
+      position: 'absolute',
+      top: '60%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      width: proportion > 1.67 ? 'auto' : '100%',
+      height: proportion > 1.67 ? '100%' : 'auto',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      ...imgStyle,
+    };
+
     return (
       <div
         style={{
@@ -245,18 +263,16 @@ export default forwardRef<ReactEcharts, CircularSolidPieProps>(
         }}
         ref={divRef}
       >
-        <img
-          src={imgPieBg}
-          style={{
-            position: 'absolute',
-            top: '59%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: proportion > 1.67 ? 'auto' : '100%',
-            height: proportion > 1.67 ? '100%' : 'auto',
-            ...imgStyle,
-          }}
-        />
+        <div style={imageStyle}>
+          <img src={bg} className={`${prefixName}-bg`} />
+        </div>
+        <div style={imageStyle}>
+          <img src={outerBg} className={`${prefixName}-outer-image`} />
+        </div>
+        <div style={imageStyle}>
+          <img src={innerBg} className={`${prefixName}-inner-image`} />
+        </div>
+
         <ReactEcharts
           ref={echartsRef}
           style={{ width: modifiedStyle.width ?? '95%', height: modifiedStyle.height ?? '90%' }}

packages/lego/src/data-show/index.less

@@ -6,9 +6,10 @@
   position: relative;
   flex: 1;
   overflow: hidden;
-  background-image: url('../assets/other_datashow_bg.webp');
+  background-image: url('../assets/other_datashow_bg.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
+  animation: breathe 2s linear infinite;
 
   @{prefix}-data-wrap {
     position: absolute;
@@ -37,3 +38,43 @@
     text-align: center;
   }
 }
+
+@{prefix}-title-wrap:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 156px;
+  height: 65px;
+  content: '';
+  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.15) 50%, transparent 60%);
+  background-size: 300% 100%;
+  animation: shine 15s linear infinite;
+}
+
+@keyframes shine {
+  0% {
+    background-position-x: 400%;
+  }
+
+  50% {
+    background-position-x: 0%;
+  }
+
+  100% {
+    background-position-x: -400%;
+  }
+}
+
+@keyframes breathe {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    filter: brightness(150%) saturate(140%);
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

packages/lego/src/img-pie/index.less

@@ -0,0 +1,24 @@
+@prefix: .td-lego-img-pie;
+
+@{prefix}-image {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@{prefix}-bg {
+  width: 252px;
+  animation: bgLoading 10s linear infinite;
+}
+
+@keyframes bgLoading {
+  /*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
+  0% {
+    /*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

packages/lego/src/img-pie/index.tsx

@@ -7,8 +7,9 @@ import { GraphicComponent, GraphicComponentOption, TooltipComponent, TooltipComp
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 import { merge } from 'lodash-es';
 
-import imgPieBg from '../assets/img_pie_bg.webp';
+import bg from '../assets/bg.png';
 import imgPieGraphic from '../assets/img_pie_graphic.png';
+import imgPieBg from '../assets/pie.png';
 import useBaseChartConfig from '../hooks/useBaseChartConfig';
 import useBasePieConfig from '../hooks/useBasePieConfig';
 import useEchartsRef from '../hooks/useEchartsRef';
@@ -17,6 +18,9 @@ import { useRAF } from '../hooks/useRAF';
 import useStyle from '../hooks/useStyle';
 import useTheme from '../hooks/useTheme';
 import createLinearGradient from '../utils/createLinearGradient';
+import './index.less';
+
+const prefixName = 'td-lego-img-pie';
 
 type ECOption = echarts.ComposeOption<PieSeriesOption | TooltipComponentOption | GraphicComponentOption>;
 
@@ -248,16 +252,21 @@ export default forwardRef<ReactEcharts, ImgPieProps>(
       >
         <img
           src={imgPieBg}
+          className={`${prefixName}-image`}
           style={{
-            position: 'absolute',
+            ...imgStyle,
             width: proportion > 1.25 ? 'auto' : '90%',
             height: proportion > 1.25 ? '90%' : 'auto',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            ...imgStyle,
           }}
         />
+        <div
+          className={`${prefixName}-image`}
+          style={{
+            ...imgStyle,
+          }}
+        >
+          <img src={bg} className={`${prefixName}-bg`} />
+        </div>
         <ReactEcharts
           ref={echartsRef}
           style={{ width: modifiedStyle.width, height: modifiedStyle.height }}

packages/lego/src/img-rose-pie/index.less

@@ -0,0 +1,32 @@
+@prefix: .td-lego-img-rose-pie;
+
+@{prefix}-bg {
+  animation: innerLoading 8s linear infinite;
+}
+@{prefix}-outer-image {
+  animation: outerLoading 5s linear infinite;
+}
+@{prefix}-inner-image {
+  animation: innerLoading 3s linear infinite;
+}
+@keyframes innerLoading {
+  /*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
+  0% {
+    /*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes outerLoading {
+  /*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
+  0% {
+    /*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}

packages/lego/src/img-rose-pie/index.tsx

@@ -8,16 +8,21 @@ import { GraphicComponent, GraphicComponentOption, TooltipComponent, TooltipComp
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 import { merge } from 'lodash-es';
 
+import bg from '../assets/bg.png';
 import imgPieGraphic from '../assets/img_pie_graphic.png';
-import imgRosePieBg from '../assets/img_rose_pie_bg.webp';
 import imgRosePieGraphic from '../assets/img_rose_pie_graphic.png';
+import innerBg from '../assets/inner.png';
+import outerBg from '../assets/outer.png';
 import useBaseChartConfig from '../hooks/useBaseChartConfig';
 import useBasePieConfig from '../hooks/useBasePieConfig';
 import useChartLoop from '../hooks/useChartLoop';
 import useNodeBoundingRect from '../hooks/useNodeBoundingRect';
 import useStyle from '../hooks/useStyle';
 import useTheme from '../hooks/useTheme';
 import createLinearGradient from '../utils/createLinearGradient';
+import './index.less';
+
+const prefixName = 'td-lego-img-rose-pie';
 
 type ECOption = echarts.ComposeOption<PieSeriesOption | TooltipComponentOption | GraphicComponentOption>;
 
@@ -160,6 +165,18 @@ export default forwardRef<ReactEcharts, ImgRosePieProps>(
       },
       config
     );
+    const imageStyle: React.CSSProperties = {
+      position: 'absolute',
+      top: '54%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      width: proportion > 1.67 ? 'auto' : '100%',
+      height: proportion > 1.67 ? '100%' : 'auto',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      ...imgStyle,
+    };
 
     return (
       <div
@@ -173,18 +190,16 @@ export default forwardRef<ReactEcharts, ImgRosePieProps>(
         }}
         ref={divRef}
       >
-        {/* 透明圆环 */}
-        <img
-          src={imgRosePieBg}
-          style={{
-            position: 'absolute',
-            height: '100%',
-            top: '54%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            ...imgStyle,
-          }}
-        />
+        {/* 旋转背景 图 */}
+        <div style={imageStyle}>
+          <img src={bg} className={`${prefixName}-bg`} />
+        </div>
+        <div style={imageStyle}>
+          <img src={outerBg} className={`${prefixName}-outer-image`} />
+        </div>
+        <div style={imageStyle}>
+          <img src={innerBg} className={`${prefixName}-inner-image`} />
+        </div>
         {/* 大圆 */}
         <img
           src={imgPieGraphic}