feat: 更换spin动画 (#2925)

* feat: 更换spin动画

* fix: modify the loading animation style of button

---------

Co-authored-by: zhangyumei.0319 <zhangyumei.0319@bytedance.com>

Author: niuxi-dev

packages/semi-foundation/button/iconButton.scss

@@ -4,6 +4,30 @@
 $module: #{$prefix}-button;
 
 .#{$module} {
+    @keyframes #{$prefix}-animation-rotate {
+        from {
+            transform: rotate(0);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes #{$prefix}-animation-circle {
+        0% {
+            stroke-dasharray: 1, 220;
+            stroke-dashoffset: 0;
+        }
+        50% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -68px;
+        }
+        100% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -218px;
+        }
+    }
+
     &.#{$module}-with-icon {
         display: inline-flex;
         align-items: center;
@@ -24,8 +48,12 @@ $module: #{$prefix}-button;
             &>svg {
                 width: 16px;
                 height: 16px;
-                animation: .6s linear infinite #{$prefix}-animation-rotate;
+                animation: 1200ms linear infinite #{$prefix}-animation-rotate;
                 animation-fill-mode: forwards;
+
+                & > circle {
+                    animation: 2500ms ease-in-out infinite #{$prefix}-animation-circle;
+                }
             }
         }
     }

packages/semi-foundation/spin/animation.scss

@@ -1,2 +1,3 @@
-$animation_duration-spin_wrapper-spin: 600ms; // 加载图标容器旋转一周时长
-$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
+$animation_duration-spin_wrapper-spin: 1200ms; // 加载图标容器旋转一周时长
+$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长
+$animation_duration-spin_wrapper-spin-circle: 2500ms; // 加载图标弹性运动一周时长

packages/semi-foundation/spin/spin.scss

@@ -18,6 +18,21 @@ $module: #{$prefix}-spin;
         }
     }
 
+    @keyframes #{$prefix}-animation-circle {
+        0% {
+            stroke-dasharray: 1, 220;
+            stroke-dashoffset: 0;
+        }
+        50% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -68px;
+        }
+        100% {
+            stroke-dasharray: 150, 220;
+            stroke-dashoffset: -218px;
+        }
+    }
+
     &-wrapper {
         text-align: center;
         position: absolute;
@@ -27,10 +42,15 @@ $module: #{$prefix}-spin;
         color: $color-spin-bg;
 
         & > svg {
+            display: inline;
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
             animation-fill-mode: forwards;
             vertical-align: top;
             @include size($width-spin_middle);
+
+            & > circle {
+                animation: $animation_duration-spin_wrapper-spin-circle ease-in-out infinite #{$prefix}-animation-circle;
+            }
         }
     }
 

packages/semi-ui/spin/icon.tsx

@@ -1,8 +1,5 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
-import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
-
-let _id = -1;
 
 export interface IconProps {
     id?: number;
@@ -13,43 +10,28 @@ export interface IconProps {
 }
 
 function Icon(props: IconProps = {}) {
-    const { id: propsId, className, ...rest } = props;
-    let _propsId = propsId;
-    if (isNullOrUndefined(_propsId)) {
-        _id++;
-        _propsId = _id;
-    }
-    const id = `linearGradient-${_propsId}`;
+    const { id, className, ...rest } = props;
     return (
         <svg
             {...rest}
             className={className}
-            width="48"
-            height="48"
-            viewBox="0 0 36 36"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden
-            data-icon="spin"
+            width="100%" 
+            height="100%" 
+            viewBox="0 0 100 100"
         >
-            <defs>
-                <linearGradient x1="0%" y1="100%" x2="100%" y2="100%" id={id}>
-                    <stop stopColor="currentColor" stopOpacity="0" offset="0%" />
-                    <stop stopColor="currentColor" stopOpacity="0.50" offset="39.9430698%" />
-                    <stop stopColor="currentColor" offset="100%" />
-                </linearGradient>
-            </defs>
-            <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-                <rect fillOpacity="0.01" fill="none" x="0" y="0" width="36" height="36" />
-                <path
-                    d="M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951"
-                    stroke={`url(#${id})`}
-                    strokeWidth="4"
-                    strokeLinecap="round"
-                />
-            </g>
+            <circle 
+                cx="50" 
+                cy="50" 
+                r="35" 
+                stroke="currentColor"
+                strokeWidth="11" 
+                strokeLinecap="round" 
+                strokeMiterlimit="10" 
+                fill="none"
+            >
+            </circle>
         </svg>
     );
 }
 
-export default Icon;
+export default Icon;