From 19bcf0b07c4df16babd472be67ba9bad13b71862 Mon Sep 17 00:00:00 2001
From: Huang <596417202@qq.com>
Date: Fri, 30 Sep 2022 11:54:14 +0800
Subject: [PATCH] wip-FontAwesomeIcon spin

---
 src/components/FontAwesomeIcon/index.vue   | 10 +++++
 src/components/FontAwesomeIcon/props.ts    | 51 ++++++++++++++++++++++
 src/demo/example/fontAwesomeIcon/index.vue | 14 ++++++
 3 files changed, 75 insertions(+)

diff --git a/src/components/FontAwesomeIcon/index.vue b/src/components/FontAwesomeIcon/index.vue
index 44ff4f6..b8998b2 100644
--- a/src/components/FontAwesomeIcon/index.vue
+++ b/src/components/FontAwesomeIcon/index.vue
@@ -38,6 +38,9 @@
     props.bounce ? 'fa-bounce' : '',
     props.flip ? 'fa-flip' : '',
     props.shake ? 'fa-shake' : '',
+    props.spin ? 'fa-spin' : '',
+    props.spinReverse ? 'fa-spin-reverse' : '',
+    props.spinPulse ? 'fa-spin-pulse' : '',
   ];
   const iconStyleObject = Object.assign(
     {
@@ -69,6 +72,13 @@
           '--fa-flip-angle': props.flipConfig?.angle || '-180deg',
         }
       : {},
+    props.spin
+      ? {
+          '--fa-animation-delay': props.spinDelay,
+          '--fa-animation-iteration-count': props.spinIterationCount,
+          '--fa-animation-timing': props.spinTiming,
+        }
+      : {},
   );
 </script>
 <template>
diff --git a/src/components/FontAwesomeIcon/props.ts b/src/components/FontAwesomeIcon/props.ts
index 4eabd98..4cf51e1 100644
--- a/src/components/FontAwesomeIcon/props.ts
+++ b/src/components/FontAwesomeIcon/props.ts
@@ -191,4 +191,55 @@ export const FontAwesomeIconProps = {
     type: Boolean,
     default: false,
   },
+  /**
+   * icon spin
+   * @description 顺时针旋转动画
+   */
+  spin: {
+    type: [Boolean, String],
+    default: false,
+  },
+  /**
+   * icon spinReverse
+   * @description 逆时针旋转动画
+   */
+  spinReverse: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * icon spinPulse
+   * @description 以8个节拍顺时针旋转动画
+   */
+  spinPulse: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * icon spinDelay
+   * @description 旋转动画延迟时间
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction
+   */
+  spinDelay: {
+    type: String,
+    default: '0s',
+  },
+  /**
+   * icon spinIterationCount
+   * @description 旋转动画迭代次数
+   */
+  spinIterationCount: {
+    type: [String, Number],
+    default: 'infinite',
+  },
+  /**
+   * icon spinTiming
+   * @description 旋转动画在帧中的进度
+   * @example linear(默认线性), ease-in,ease-out,ease-in-out,step-start,step-end, steps(4, jump-start),cubic-bezier(0.1, -0.6, 0.2, 0);
+   * @link https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-functionhttps://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
+   */
+  spinTiming: {
+    type: String,
+    default: 'linear',
+  },
 };
diff --git a/src/demo/example/fontAwesomeIcon/index.vue b/src/demo/example/fontAwesomeIcon/index.vue
index e153e06..e5de989 100644
--- a/src/demo/example/fontAwesomeIcon/index.vue
+++ b/src/demo/example/fontAwesomeIcon/index.vue
@@ -93,6 +93,20 @@
     <FontAwesomeIcon name="bell" shake />
     <FontAwesomeIcon name="stopwatch" shake />
     <FontAwesomeIcon name="bomb" shake />
+    <view>spin-旋转动画</view>
+    <FontAwesomeIcon name="sync" spin duration="2" />
+    <FontAwesomeIcon name="circle-notch" spin duration="1.5" />
+    <FontAwesomeIcon name="cog" spin duration="2" />
+    <FontAwesomeIcon name="cog" spin spin-reverse duration="15" />
+    <FontAwesomeIcon name="spinner" spin spin-pulse spinDelay="5s" duration="2" />
+    <FontAwesomeIcon
+      name="spinner"
+      spin
+      spin-pulse
+      spin-reverse
+      spinIterationCount="3"
+      duration="2"
+    />
   </AppProvider>
 </template>
 <style lang="scss" scoped></style>