wip: FontAwesomeIcon

src/components/FontAwesomeIcon/index.vue

@@ -11,7 +11,6 @@
    */
   import { FontAwesomeIconProps } from '@/components/FontAwesomeIcon/props';
   import { computed } from 'vue';
-  import { isObject } from 'lodash-es';
 
   const props = defineProps(FontAwesomeIconProps);
 
@@ -22,24 +21,54 @@
     'fa-border': props.border,
   };
 
+  const singleBeat = props.beat && !props.fade;
+  const singleFade = !props.beat && props.fade;
+  const BeatFade = props.beat && props.fade;
+
   const iconClassObject = [
-    'fa-' + props.mode,
+    `fa-${props.mode}`,
-    'fa-' + props.name,
+    `fa-${props.name}`,
     props.frameSize ? `fa-flip-${props.frameSize}` : '',
     props.sharp ? 'fass' : '',
     props.rotate ? 'fa-rotate-by' : '',
-    props.flip ? `fa-flip-${props.flip}` : '',
+    props.reverse ? `fa-flip-${props.reverse}` : '',
-    props.beat ? `fa-beat` : '',
+    singleBeat ? `fa-beat` : '',
-    props.fade ? `fa-fade` : '',
+    singleFade ? `fa-fade` : '',
-    props.beat && props.fade ? `fa-beat-fade` : '',
+    BeatFade ? `fa-beat-fade` : '',
+    props.bounce ? 'fa-bounce' : '',
+    props.flip ? 'fa-flip' : '',
   ];
-
+  const iconStyleObject = Object.assign(
-  const iconStyleObject = {
+    {
-    '--fa-rotate-angle': `${props.rotate}deg`,
+      '--fa-animation-duration': `${props.duration}s`,
-    '--fa-animation-duration': `${props.duration}s`,
+    },
-    '--fa-beat-scale': `${props.scale}`,
+    props.rotate ? { '--fa-rotate-angle': `${props.rotate}deg` } : {},
-    '--fa-beat-opacity': `${props.opacity}`,
+    singleBeat ? { '--fa-beat-scale': `${props.scale}` } : {},
-  };
+    singleFade ? { '--fa-fade-opacity': `${props.opacity}` } : {},
+    BeatFade
+      ? { '--fa-beat-fade-scale': `${props.scale}`, '--fa-beat-fade-opacity': `${props.opacity}` }
+      : {},
+    props.bounce
+      ? {
+          '--fa-bounce-rebound': props.bounceConfig?.rebound || '-0.125em',
+          '--fa-bounce-height': props.bounceConfig?.height || '-0.5em',
+          '--fa-bounce-start-scale-x': props.bounceConfig?.startScaleX || '1.1',
+          '--fa-bounce-start-scale-y': props.bounceConfig?.startScaleY || '0.9',
+          '--fa-bounce-jump-scale-x': props.bounceConfig?.jumpScaleX || '0.9',
+          '--fa-bounce-jump-scale-y': props.bounceConfig?.jumpScaleY || '1.1',
+          '--fa-bounce-land-scale-x': props.bounceConfig?.landScaleX || '1.05',
+          '--fa-bounce-land-scale-y': props.bounceConfig?.landScaleY || '0.95',
+        }
+      : {},
+    props.flip
+      ? {
+          '--fa-flip-x': props.flipConfig?.x || '0',
+          '--fa-flip-y': props.flipConfig?.y || '1',
+          '--fa-flip-z': props.flipConfig?.z || '0',
+          '--fa-flip-angle': props.flipConfig?.angle || '-180deg',
+        }
+      : {},
+  );
 </script>
 <template>
   <view class="icon-wrap" :style="wrapStyleObject">

src/components/FontAwesomeIcon/props.ts

@@ -68,10 +68,10 @@ export const FontAwesomeIconProps = {
     type: Number,
     default: 0,
   },
-  /** icon flip
+  /** icon reverse
-   * @description 翻转
+   * @description 对称翻转
    */
-  flip: {
+  reverse: {
     type: String,
     validator(value: string) {
       // The value must match one of these strings
@@ -80,7 +80,7 @@ export const FontAwesomeIconProps = {
   },
   /**
    * icon beat
-   * @description 跳动动画
+   * @description 缩放动画
    * @param duration Number 时间 s
    * @param scale Number 比例
    */
@@ -120,4 +120,66 @@ export const FontAwesomeIconProps = {
     type: Number,
     default: 0.6,
   },
+  /**
+   * icon bounce
+   * @description 弹跳动画
+   */
+  bounce: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * icon bounceConfig
+   * @description 弹跳动画属性设置
+   */
+  bounceConfig: {
+    type: Object,
+    default: () => {
+      return {
+        // 设置图标在跳跃后着陆时的反弹量
+        rebound: '-0.125em',
+        // 设置图标弹跳时跳到的最大高度
+        height: '-0.5em',
+        // 设置图标开始反弹时的水平失真（“挤压”）
+        startScaleX: '1.1',
+        // 将图标的水平失真（“挤压”）设置在跳转的顶部
+        startScaleY: '0.9',
+        // 将图标的水平失真（“挤压”）设置在跳转的顶部
+        jumpScaleX: '0.9',
+        // 将图标的垂直失真（“挤压”）设置在跳转的顶部
+        jumpScaleY: '1.1',
+        // 设置跳跃后着陆时图标的水平失真（“挤压”）
+        landScaleX: '1.05',
+        // 设置跳跃后着陆时图标的垂直失真（“挤压”）
+        landScaleY: '0.95',
+      };
+    },
+  },
+  /**
+   * icon flip
+   * @description 翻转动画
+   */
+  flip: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * icon flipConfig
+   * @description 翻转动画属性设置
+   */
+  flipConfig: {
+    type: Object,
+    default: () => {
+      return {
+        // 设置表示旋转轴的矢量的 x 坐标（0~1）
+        x: '0',
+        // 设置矢量的 y 坐标，表示旋转轴（0~1)
+        y: '1',
+        // 设置矢量的 z 坐标，表示旋转轴（0~1)
+        z: '0',
+        // 设置翻转的旋转角度。正角表示顺时针旋转，负角表示逆时针旋转。
+        angle: '-180deg',
+      };
+    },
+  },
 };

src/demo/example/fontAwesomeIcon/index.vue

@@ -33,29 +33,60 @@
     <view>rotate-旋转角度</view>
     <view> <FontAwesomeIcon mode="duotone" name="house" rotate="63" />duotone 63</view>
     <view> <FontAwesomeIcon mode="duotone" name="snowboarding" rotate="58" />duotone 58</view>
-    <view>flip-翻转</view>
+    <view>reverse-对称翻转</view>
     <view> <FontAwesomeIcon mode="duotone" name="snowboarding" />duotone 正常</view>
     <view>
-      <FontAwesomeIcon mode="duotone" name="snowboarding" flip="horizontal" />duotone 水平翻转
+      <FontAwesomeIcon mode="duotone" name="snowboarding" reverse="horizontal" />duotone 水平翻转
     </view>
     <view>
-      <FontAwesomeIcon mode="duotone" name="snowboarding" flip="vertical" />duotone 垂直翻转
+      <FontAwesomeIcon mode="duotone" name="snowboarding" reverse="vertical" />duotone 垂直翻转
     </view>
     <view>
-      <FontAwesomeIcon mode="duotone" name="snowboarding" flip="both" />duotone 垂直水平翻转
+      <FontAwesomeIcon mode="duotone" name="snowboarding" reverse="both" />duotone 垂直水平翻转
     </view>
-    <view>beat-跳动动画</view>
+    <view>beat-缩放动画</view>
     <FontAwesomeIcon name="circle-plus" beat />
     <FontAwesomeIcon name="heart" beat />
     <view>duration-动画持续时间</view>
     <FontAwesomeIcon name="heart" beat duration="1.5" />
-    <view>scale-动画比例</view>
+    <view>scale-缩放比例</view>
     <FontAwesomeIcon name="heart" beat duration="1.5" scale="2.0" />
     <view>fade-淡入淡出动画 </view>
     <FontAwesomeIcon name="heart" fade />
     <view>opacity-透明度值 </view>
     <FontAwesomeIcon name="heart" fade opacity="0.2" />
-    <FontAwesomeIcon name="heart" beat fade opacity="0.68" scale="3.0" />
+    <view>beat+fade-跳动+淡入淡出动画 </view>
+    <FontAwesomeIcon name="heart" beat fade opacity="0.68" duration="1.5" scale="2.0" />
+    <view>bounce-弹跳动画 </view>
+    <FontAwesomeIcon name="basketball" bounce />
+    <FontAwesomeIcon name="volleyball" bounce />
+    <FontAwesomeIcon name="frog" bounce />
+    <FontAwesomeIcon
+      name="envelope"
+      bounce
+      :bounce-config="{
+        rebound: 0,
+        startScaleX: 1,
+        startScaleY: 1,
+        jumpScaleX: 1,
+        jumpScaleY: 1,
+        landScaleX: 1,
+        landScaleY: 1,
+      }"
+    />
+    <view>flip-翻转动画</view>
+    <FontAwesomeIcon name="compact-disc" flip />
+    <FontAwesomeIcon name="camera-rotate" flip />
+    <FontAwesomeIcon name="cassette-tape" flip />
+    <FontAwesomeIcon
+      name="scroll"
+      flip
+      :flip-config="{
+        x: '1',
+        y: '0',
+      }"
+    />
+    <FontAwesomeIcon name="money-check-dollar" flip duration="3" />
   </AppProvider>
 </template>
 <style lang="scss" scoped></style>