vue3+gasp实现✨星之卡比输入框✨

soon_liu2024-03-06 16:08

前言

在vue3中使用gasp去实现一个星之卡比的输入框，实现对输入框中的内容进行正则判断，根据正则结果实现不同的动画效果。

本组件是根据gasp官网的案例进行修改copy的有兴趣的话可以自己去对应的官网看看（ps:官网的是tsx的版本的，我这改成了vue3.2的setup语法糖组件）codepen.io/collection/...

效果图

技术栈

技术栈 官网
vue3 cn.vuejs.org/
gasp gsap.com/

代码结构

一、 星之卡比外观svg的绘制

外观没啥好说的直接复制就行了

html 复制代码 
//KirbyComponent.vue
 <template>
  <div class="kirby-wrap">
    <svg id="kirby" class="kirby" viewBox="0 0 200 200">
      <use ref="star" href="#star" class="kirby-star-spit" />
      <defs>
        <path
          ref="bodySwallow"
          d="M167.58,120.58c0,18-6,30.75-62.29,29.58C49,149,43,138.58,43,120.58S70.89,85,105.29,85 S167.58,102.59,167.58,120.58z"
        ></path>
        <path
          id="star"
          class="kirby-star"
          d="M119.43,124.74l4.63-5.32a4.08,4.08,0,0,0-2.39-6.7l-5.23-1a.9.9,0,0,1-.56-.39l-4.67-7.69a4.28,4.28,0,0,0-7.27,0l-4.68,7.69a.85.85,0,0,1-.56.39l-5.23,1a4.09,4.09,0,0,0-2.39,6.7l4.63,5.32a.77.77,0,0,1,.18.72l-1.51,6a4.19,4.19,0,0,0,5.82,4.73l7-3a.89.89,0,0,1,.68,0l7,3a4.19,4.19,0,0,0,5.82-4.73l-1.51-6A.82.82,0,0,1,119.43,124.74Z"
        ></path>
      </defs>
      <g id="legLeft" ref="legRight">
        <ellipse class="kirby-foot" cx="90" cy="141.5" rx="23" ry="26"></ellipse>
        <ellipse class="kirby-stroke" cx="85" cy="141.5" rx="23" ry="26"></ellipse>
      </g>
      <g
        id="legRight"
        data-svg-origin="102 97.5"
        transform="matrix(1,0,0,1,0,0)"
        style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
      >
        <ellipse class="kirby-foot" cx="138" cy="134.5" rx="23" ry="26"></ellipse>
        <ellipse class="kirby-stroke" cx="138" cy="129.5" rx="23" ry="26"></ellipse>
      </g>
      <g
        id="armLeft"
        ref="armLeft"
        data-svg-origin="100 97.5"
        transform="matrix(1,0,0,1,0,0)"
        style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
      >
        <circle id="armLeft-2" class="kirby-body" cx="51.5" cy="76" r="20.5"></circle>
        <circle class="kirby-stroke" cx="50.5" cy="82" r="20.5"></circle>
      </g>
      <g
        id="body"
        ref="body"
        data-svg-origin="43 153"
        transform="matrix(1,0,0,1,0,0)"
        style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
      >
        <path
          class="kirby-body"
          id="bodyFill"
          ref="bodyFill"
          d="M159,95.5 C159,127.25637 133.25637,153 101.5,153 69.74363,153 44,127.25637 44,95.5 44,63.74363 69.74363,38 101.5,38 133.25637,38 159,63.74363 159,95.5 z"
        ></path>
        <path
          class="kirby-stroke"
          id="bodyStroke"
          ref="bodyStroke"
          d="M158,91.5 C158,123.25637 132.25637,149 100.5,149 68.74363,149 43,123.25637 43,91.5 43,59.74363 68.74363,34 100.5,34 132.25637,34 158,59.74363 158,91.5 z"
        ></path>
      </g>
      <g
        id="armRight"
        ref="armRight"
        data-svg-origin="101 97.49999618530273"
        transform="matrix(1,0,0,1,0,0)"
        style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
      >
        <path class="kirby-body" d="M141,58.73A20.5,20.5,0,1,1,154.68,94.5"></path>
        <path class="kirby-stroke" d="M136,58.73A20.5,20.5,0,1,1,149.68,94.5"></path>
      </g>
      <g
        id="face"
        ref="face"
        data-svg-origin="72 125.12000274658203"
        transform="matrix(1,0,0,1,0,0)"
        style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
      >
        <path
          id="eyeRight"
          ref="eyeRight"
          class="kirby-eye"
          d="M84,84.53c0,5.8-1.57,9.47-3.5,9.47S77,90.33,77,84.53,78.57,73,80.5,73,84,78.73,84,84.53Z"
          data-svg-origin="80.5 90"
          transform="matrix(1,0,0,1,0,0)"
          style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
        ></path>
        <path
          id="eyeLeft"
          ref="eyeLeft"
          class="kirby-eye"
          d="M68,84.53c0,5.8-1.57,9.47-3.5,9.47S61,90.33,61,84.53,62.57,73,64.5,73,68,78.73,68,84.53Z"
          data-svg-origin="64.5 90"
          transform="matrix(1,0,0,1,0,0)"
          style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
        ></path>
        <path
          id="eyeRightClosed"
          ref="eyeRightClosed"
          class="kirby-stroke"
          d="M80.69,125.12c.37-1.41,1.89-3.8,4-6.35a22.84,22.84,0,0,1,5.61-5.14"
          data-svg-origin="85.49500274658203 125.12000274658203"
          transform="matrix(1,0,0,0,0,125.12)"
          style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
        ></path>
        <path
          id="eyeLeftClosed"
          ref="eyeLeftClosed"
          class="kirby-stroke"
          d="M55.05,113.61c1.33.61,3.42,2.52,5.56,5.07a23.08,23.08,0,0,1,4.09,6.42"
          data-svg-origin="59.87499809265137 125.0999984741211"
          transform="matrix(1,0,0,0,0,125.1)"
          style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
        ></path>
        <g ref="cheeks">
          <path
            id="cheekRight"
            class="kirby-blush kirby-stroke"
            d="M93,92.94A22.41,22.41,0,0,1,101.66,89l1.09,5.41s2.74-2.94,8.66-3.93"
          ></path>
          <path
            id="cheekLeft"
            class="kirby-blush kirby-blush-small kirby-stroke"
            d="M47,92.94A11,11,0,0,1,51.19,89l.52,5.41a8,8,0,0,1,4.19-3.93"
          ></path>
        </g>
      </g>
      <path
        id="mouth"
        ref="mouth"
        class="kirby-stroke"
        d="M77,98c0,1.93-2.12,3.5-4.5,3.5S68,99.93,68,98"
      ></path>
      <g
        id="mouthOpen"
        ref="mouthOpen"
        class="kirby-mouth-open"
        data-svg-origin="71 103"
        transform="matrix(0,0,0,0,71,103)"
        style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
      >
        <path
          class="kirby-stroke kirby-mouth-open-inner"
          d="M94,105.69c0,14.36-11,23.31-22,23.31s-18-9-18-23.31S61,77,72,77,94,91.33,94,105.69Z"
        ></path>
        <path
          class="kirby-stroke kirby-mouth-open-tongue"
          d="M72,129a22,22,0,0,0,18.91-11.18C90,109.51,82.8,101.07,74,101.07c-9.39,0-17,9.6-17,18.41,0,.11,0,.21,0,.32A16.16,16.16,0,0,0,72,129Z"
        ></path>
      </g>
      <g
        id="mouthFull"
        ref="mouthFull"
        class="kirby-mouth-full"
        data-svg-origin="73.31500244140625 101.76000213623047"
        transform="matrix(0,0,0,0,73.315,101.76)"
        style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
      >
        <path
          class="kirby-stroke"
          d="M68.45,101.5a6.42,6.42,0,0,1,4-1,7.1,7.1,0,0,1,4,1"
        ></path>
        <path
          class="kirby-stroke kirby-mouth-cheek"
          d="M78.07,106.19a5.17,5.17,0,0,1-1.2-4.75,5.63,5.63,0,0,1,2.76-4.11"
        ></path>
        <path
          class="kirby-stroke kirby-mouth-cheek"
          d="M67,99a4,4,0,0,1,1.5,2.76,4.31,4.31,0,0,1-.46,3.15"
        ></path>
      </g>
      <path
        id="mouthFrown"
        ref="mouthFrown"
        class="kirby-stroke"
        d="M70,133.5a2.2,2.2,0,0,1,2-1,2.4,2.4,0,0,1,2,1"
        data-svg-origin="72 132.99735260009766"
        transform="matrix(1,0,0,0,0,132.99735)"
        style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
      ></path>
      <g
        id="hat"
        ref="hat"
        data-svg-origin="0 0"
        transform="matrix(0,0,0,0,0,0)"
        style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
      ></g>
      <g
        id="envelope"
        ref="envelope"
        data-svg-origin="164.17000579833984 54"
        transform="matrix(0,0,0,0,164.17001,64)"
        style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
      >
        <rect
          class="kirby-envelope"
          x="130.99"
          y="9"
          width="67.5"
          height="45"
          rx="10"
        ></rect>
        <rect
          class="kirby-stroke"
          x="129.85"
          y="3"
          width="67.5"
          height="45"
          rx="10"
        ></rect>
        <polyline class="kirby-stroke" points="131.85 10 163.6 31.5 195.35 10"></polyline>
        <path
          class="kirby-envelope-star kirby-stroke"
          ref="envelopeStar"
          d="M170,31l2.48-2.93a2.26,2.26,0,0,0-1.28-3.68l-2.8-.56a.46.46,0,0,1-.3-.22l-2.51-4.23a2.26,2.26,0,0,0-3.89,0l-2.51,4.23a.46.46,0,0,1-.3.22l-2.8.56a2.26,2.26,0,0,0-1.28,3.68L157.25,31a.45.45,0,0,1,.1.4l-.81,3.32a2.26,2.26,0,0,0,3.12,2.6l3.76-1.67a.48.48,0,0,1,.37,0l3.76,1.67a2.26,2.26,0,0,0,3.12-2.6l-.81-3.32A.45.45,0,0,1,170,31Z"
          data-svg-origin="163.64500427246094 27.894429206848145"
          transform="matrix(0,0,0,0,163.645,27.89443)"
          style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px"
        ></path>
      </g>
    </svg>
  </div>
 </template>
 
 <script></script>
  
<style lang="scss">
    $black: #87213c;
    $white: #fff;

    $primary-color: #f9dde3;
    $primary-color-tint: #fcf2f5;
    $secondary-color: #ff2961;
    $accent-color: #fae798;

    $mail-color: #326dcc;
    $star-sparkly-color: #b8d7ff;

    $primary-font: 'Fredoka One', sans-serif;

    :root {
            --black: #{$black};
            --white: #{$white};
            --primary-color: #{$primary-color};
            --primary-color-tint: #{$primary-color-tint};
            --secondary-color: #{$secondary-color};
            --accent-color: #{$accent-color};
            --mail-color: #{$mail-color};
            --star-color: #{$accent-color};
            --star-sparkly-color: #{$star-sparkly-color};
    }

    @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

    * { box-sizing: border-box; }

    body {
            display: grid;
            place-items: center;
            min-height: 100vh;
            background-color: var(--primary-color-tint);
            font-size: 16px;
            line-height: 1;
            font-family: $primary-font;
    }

    .container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            align-items: center;
            width: 400px;
            max-width: 400px;
    }

    .input-text {
            position: absolute;
            z-index: 5;
            width: 17rem;
            font-size: 1.25rem;
            line-height: 1.5;
            color: var(--black);
            transform: translate(1rem, 0.625rem);
            overflow: hidden;

            &-letter {
                    display: inline-block;
                    transform-origin: center bottom;
            }
    }

    .input-wrap {
            position: relative;
    }

    .cloudy {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 150%;
            transform: translate(-50%, -50%);

            &-poofs {
                    fill: var(--white);
            }
    }

    .fade {
            &-enter-active,
            &-leave-active {
                    transition: 0.3s;
            }

            &-enter-from,
            &-leave-to {
                    opacity: 0;
            }
    }

    .dreamy-input {
            --offset-top: 0.1875rem;
            --offset-left: -0.125rem;
            --control-height: 3.125rem;

            position: relative;

            &::after {
                    content: '';
                    position: absolute;
                    top: var(--offset-top);
                    left: var(--offset-left);
                    height: 100%;
                    width: 100%;
                    border: 3px solid var(--black);
                    pointer-events: none;
                    transition: border 0.5s ease-in-out;
            }

            &::after,
            &-control {
                    border-radius: var(--control-height);
            }

            &-control {
                    width: 15.625rem;
                    height: var(--control-height);
                    padding: 0 calc(1rem + var(--control-height)) 0 1rem;
                    border: 0;
                    background-color: var(--primary-color);
                    font-family: $primary-font;
                    font-size: 1.25rem;
                    color: var(--black);
                    caret-color: var(--secondary-color);
                    transition: background-color 0.5s ease-in-out;

                    &:focus {
                            outline: none;
                    }

                    &:disabled {
                            background-color: var(--primary-color-tint);
                    }
            }

            &:focus-within {
                    &::after {
                            border-color: var(--secondary-color);
                    }
            }

            &-label,
            &-error {
                    position: absolute;
                    left: 1rem;
                    font-size: 0.75rem;
                    letter-spacing: 0.05em;
            }

            &-label {
                    top: -0.75rem;
                    color: var(--black);
            }

            &-error {
                    bottom: -1.5rem;
                    color: var(--secondary-color);
            }

            &-button {
                    display: grid;
                    place-items: center;
                    position: absolute;
                    top: calc(var(--offset-top) + 3px);
                    right: 0;
                    height: var(--control-height);
                    width: var(--control-height);
                    padding: 0;
                    border: 0;
                    background-color: transparent;
                    color: var(--white);
                    cursor: pointer;
                    transition: 0.4s ease-in-out;

                    &-star {
                            fill: currentColor;
                            stroke: var(--star-stroke, transparent);
                            stroke-width: 3px;
                    }

                    &-svg {
                            width: 40%;
                            overflow: visible;
                    }

                    &:focus {
                            outline: none;
                            color: var(--secondary-color);
                    }

                    &:hover {
                            --star-stroke: var(--black);
                            transform: scale(1.2);
                            color: var(--accent-color);
                    }
            }

            &.disabled {
                    &::after {
                            border-color: var(--primary-color);
                    }

                    .dreamy-input-button {
                            color: var(--primary-color);
                    }
            }
    }
    </style>

    <style lang="scss" scoped>
    .kirby {
      position: relative;
      z-index: 5;
      display: inline-block;
      height: 120px;
      width: 120px;
      overflow: visible;
    }
    .kirby-stroke {
      stroke: var(--black);
      stroke-width: 3px;
      stroke-miterlimit: 10;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
    .kirby-body {
      fill: var(--primary-color);
    }
    .kirby-mouth-open-tongue,
    .kirby-foot {
      fill: var(--secondary-color);
    }
    .kirby-hat-dark,
    .kirby-mouth-open-inner,
    .kirby-eye {
      fill: var(--black);
    }
    .kirby-blush {
      stroke: var(--secondary-color);
    }
    .kirby-blush-small {
      stroke-width: 2.5px;
    }
    .kirby-star {
      stroke-width: 3px;
      stroke: currentColor;
      fill: var(--star-color);
    }
    .kirby-star-splashy {
      color: transparent;
    }
    .kirby-star-spit {
      color: var(--black);
    }
    .kirby-hat-band {
      fill: var(--accent-color);
    }
    .kirby-hat {
      fill: var(--mail-color);
    }
    .kirby-envelope {
      fill: var(--white);
    }
    .kirby-envelope-star {
      fill: var(--primary-color);
    }
</style>
二、引入gasp插件以及配置获取节点的ref
js 复制代码 
//KirbyComponent.vue
import { ref, watch, type Ref, onMounted } from 'vue'
import { gsap } from 'gsap'
import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'
//gasp的额外插件需要用此方法注册
gsap.registerPlugin(MorphSVGPlugin)
/**接收父级组件传递过来的参数用来执行对应的动画 */
const props = defineProps({
  swallow: Boolean,
  spit: Boolean
})
const emits = defineEmits(['animationdone'])
//用于获取svg节点
const bodyPathFill: Ref<morphSVGType> = ref(void 0);
const bodyPathStroke: Ref<morphSVGType> = ref(void 0);
const starIsVisible = ref(0);
const starPosition: Ref<positionType> = ref(null);
const bodySwallow = ref(null) as any
const mouth = ref(null)
const mouthOpen = ref(null)
const face = ref(null)
const armLeft = ref(null)
const armRight = ref(null)
const legRight = ref(null)
const mouthFull = ref(null)
const body = ref(null)
const envelope = ref(null)
const envelopeStar = ref(null)
const eyeLeft = ref(null)
const eyeRight = ref(null)
const eyeLeftClosed = ref(null)
const eyeRightClosed = ref(null)
const hat = ref(null)
const star = ref(null)
const mouthFrown = ref(null)
const cheeks = ref(null)
const bodyFill: any = ref(null)
const bodyStroke: any = ref(null)
三、动画方法

所有的关于星之卡比的动画都在这里了（不包含输入框文字的动画），gasp的具体属性以及方法可以去官网看看文档，这边不做详细解释了

js 复制代码 
//KirbyComponent.vue
**吸取数据动画 */
function animateInhale() {
  const tlInhale = gsap.timeline()

  const delay = 0.1
  const tlMouth = gsap.timeline()
  tlMouth
    .to(mouth.value, {
      duration: delay,
      scale: 0
    })
    .to(mouthOpen.value, {
      duration: 0.5,
      scale: 1
    })

  const kirbyFace = gsap.to(face.value, {
    delay,
    duration: 0.5,
    rotation: 5,
    y: -20
  })

  const kirbyArmLeft = gsap.to(armLeft.value, {
    delay,
    duration: 0.7,
    rotation: 80
  })

  const kirbyArmRight = gsap.to(armRight.value, {
    delay,
    duration: 0.7,
    rotation: -15
  })

  const kirbyLegRight = gsap.to(legRight.value, {
    delay: delay + 1,
    duration: 1,
    rotation: -15
  })

  tlInhale.add(tlMouth, 0)
  tlInhale.add(kirbyFace, 0)
  tlInhale.add(kirbyArmLeft, 0)
  tlInhale.add(kirbyArmRight, 0)
  tlInhale.add(kirbyLegRight, 0)
  return tlInhale
}
/**身体吸取数据动画 */
function animatePuffed() {
  const tlPuffed = gsap.timeline()

  const tlMouth = gsap.timeline()
  tlMouth
    .to(mouthOpen.value, {
      duration: 0.2,
      scale: 0
    })
    .to(mouthFull.value, {
      duration: 0.1,
      scale: 1,
      y: {
        duration: 0,
        value: 0
      } as any
    })

  const kirbyFace = gsap.to(face.value, {
    duration: 0.5,
    rotate: 0,
    y: 0
  })

  const kirbyBody = gsap.to(body.value, {
    duration: 1.5,
    ease: 'elastic',
    scale: 1.1
  })

  const kirbyArmLeft = gsap.to(armLeft.value, {
    duration: 0.3,
    rotate: 0
  })

  const kirbyArmRight = gsap.to(armRight.value, {
    duration: 1.5,
    ease: 'elastic',
    rotation: 0,
    x: 10
  })

  const kirbyLegRight = gsap.to(legRight.value, {
    duration: 0.6,
    rotation: 0,
    y: 10
  })

  tlPuffed.add(tlMouth, 0)
  tlPuffed.add(kirbyFace, 0)
  tlPuffed.add(kirbyBody, 0)
  tlPuffed.add(kirbyArmLeft, 0)
  tlPuffed.add(kirbyArmRight, 0)
  tlPuffed.add(kirbyLegRight, 0)
  return tlPuffed
}
/**吞下数据动画 */
function animateSwallow() {
  const tlSwallow = gsap.timeline()
  const tlEyes = gsap.timeline()
  const tlMouth = gsap.timeline()
  const dur = {
    duration: 0.8,
    ease: 'elastic'
  }

  tlEyes
    .to([eyeLeft.value, eyeRight.value], {
      duration: 0.1,
      scaleY: 0,
      y: 20
    })
    .to([eyeLeftClosed.value, eyeRightClosed.value], {
      duration: 0.1,
      scaleY: 1,
      y: 0
    })

  tlMouth
    .to(mouthFull.value, {
      duration: 0.1,
      scaleY: 0,
      y: 35
    })
    .to(mouthFrown.value, {
      duration: 0.1,
      scaleY: 1,
      y: {
        duration: 0,
        value: 0
      } as any,
      onComplete: () => {
        starIsVisible.value = 2
      }
    })

  const kirbyCheeks = gsap.to(cheeks.value, {
    ...dur,
    y: 40
  })

  const kirbyBody = gsap.to(body.value, {
    ...dur,
    scale: 1
  })

  const bodyStroke = gsap.to(['#bodyStroke', '#bodyFill'], {
    ...dur,
    morphSVG: bodySwallow.value
  })

  const kirbyArmLeft = gsap.to(armLeft.value, {
    ...dur,
    rotation: 70,
    y: 50
  })

  const kirbyArmRight = gsap.to(armRight.value, {
    ...dur,
    rotation: -50,
    x: 0,
    y: 50
  })

  tlSwallow.add(tlEyes, 0)
  tlSwallow.add(tlMouth, 0)
  tlSwallow.add(kirbyCheeks, 0)
  tlSwallow.add(kirbyBody, 0)
  tlSwallow.add(bodyStroke, 0)
  tlSwallow.add(kirbyArmLeft, 0)
  tlSwallow.add(kirbyArmRight, 0)
  return tlSwallow
}
/**邮件出现上升动画 */
function animatePowerUp() {
  const tlPowerUp = gsap.timeline()

  const delay = 0.6
  const tlEnvelope = gsap.timeline()

  animateReset()

  const kirbyLegRight = gsap.to(legRight.value, {
    delay: delay + 1,
    duration: 1,
    rotation: -15
  })

  const kirbyHat = gsap.to(hat.value, {
    onStart: () => {
      starPosition.value = {
        x: -10,
        y: -85
      }
      starIsVisible.value = 6
    },
    startAt: {
      opacity: 1,
      scale: 0,
      y: 0
    },
    delay,
    duration: 0.6,
    ease: 'elastic',
    scale: 1
  })

  tlEnvelope
    .to(envelope.value, {
      startAt: {
        opacity: 1,
        scale: 0,
        y: 10
      },
      delay: delay + 0.3,
      duration: 0.6,
      ease: 'elastic',
      scale: 1
    })
    .to(envelopeStar.value, {
      startAt: {
        rotation: 500
      },
      duration: 1,
      rotation: 0,
      scale: 1
    })
    .to(envelope.value, {
      delay: 1,
      duration: 0.2,
      scaleY: 0.7
    })
    .to(envelope.value, {
      duration: 0.1,
      scaleY: 1,
      y: -5
    })
    .to(envelope.value, {
      duration: 1.5,
      ease: 'power2.inOut',
      opacity: 0,
      y: -110
    })
    .to(hat.value, {
      delay: 0.5,
      duration: 0.3,
      opacity: 0,
      scale: 0.7,
      y: -20
    })
    .to(legRight.value, {
      duration: 0.6,
      rotation: 0
    })

  tlPowerUp.add(kirbyLegRight, 0)
  tlPowerUp.add(kirbyHat, 0)
  tlPowerUp.add(tlEnvelope, 0)
  return tlPowerUp
}
/**重置动画 */
function animateReset() {
  const tlEyes = gsap.timeline()
  const tlMouth = gsap.timeline()
  const dur = {
    delay: 0.2,
    duration: 1,
    ease: 'elastic'
  }
  tlEyes
    .to([eyeLeftClosed.value, eyeRightClosed.value], {
      delay: 0.2,
      duration: 0.1,
      scaleY: 0,
      y: -20
    })
    .to([eyeLeft.value, eyeRight.value], {
      duration: 0.2,
      scaleY: 1,
      y: {
        duration: 0.1,
        value: 0
      } as any
    })

  tlMouth
    .to(mouthFrown.value, {
      delay: 0.2,
      duration: 0.1,
      scaleY: 0,
      y: -35
    })
    .to(mouth.value, {
      duration: 0.1,
      scale: 1
    })

  gsap.to(cheeks.value, {
    ...dur,
    y: 0
  })

  gsap.to('#bodyStroke', {
    ...dur,
    morphSVG: bodyPathStroke.value
  })

  gsap.to('#bodyFill', {
    ...dur,
    morphSVG: bodyPathFill.value
  })

  gsap.to(armLeft.value, {
    ...dur,
    rotation: 0,
    y: 0
  })

  gsap.to(armRight.value, {
    ...dur,
    rotation: 0,
    y: 0
  })

  gsap.to(legRight.value, {
    y: 0
  })
}

function animateStar(el: gsap.TweenTarget, done: () => void) {
  const tl = gsap.timeline({
    onComplete: () => {
      starIsVisible.value = 0
      done()
    }
  })

  gsap.set(el, {
    scale: 0,
    transformOrigin: 'center center'
  })

  if (starIsVisible.value > 2) {
    gsap.set(el, {
      ...starPosition.value
    })

    tl.to(el, {
      delay: 'random(0, 0.5)',
      duration: 'random(0.7, 1.1)',
      opacity: 0,
      rotation: 'random(360, 720)',
      scale: 'random(0.3, 0.6)',
      x: `random(${starPosition.value!.x - 60}, ${starPosition.value!.x + 60})`,
      y: `random(${starPosition.value!.y - 60}, ${starPosition.value!.y + 60})`
    })
  } else {
    tl.to(el, {
      delay: 'random(0, 0.5)',
      duration: 0.7,
      rotation: 500,
      scale: 1,
      x: 'random(-120, 120)',
      y: 'random(-120, -50)'
    }).to(el, {
      duration: 1,
      ease: 'elastic',
      opacity: 0,
      scale: 2
    })
  }
}
/**吐出星星动画 */
function animateSpit() {
  const tlSpit = gsap.timeline()

  const tlMouth = gsap.timeline()

  tlMouth
    .to(mouthFull.value, {
      duration: 0.05,
      scaleY: 0
    })
    .to(mouthOpen.value, {
      duration: 0.4,
      scale: 0.3
    })
    .to(star.value, {
      startAt: {
        opacity: 1,
        rotation: 0,
        scale: 0,
        transformOrigin: 'center center',
        x: -40,
        y: -20
      },
      delay: -0.2,
      duration: 1,
      ease: 'power2.inOut',
      rotation: 720,
      scale: 1,
      x: -350
    })
    .to(star.value, {
      duration: 0.2,
      scaleX: 0.9,
      transformOrigin: 'left center'
    })
    .to(star.value, {
      onStart: () => {
        starPosition.value = {
          x: -350,
          y: -20
        }
        starIsVisible.value = 6
      },
      duration: 0.2,
      opacity: 0,
      scaleX: 1,
      transformOrigin: 'left center'
    })
    .to(
      mouthOpen.value,
      {
        duration: 0.1,
        scale: 0
      },
      '-=1'
    )
    .to(
      mouth.value,
      {
        duration: 0.1,
        scale: 1
      },
      '-=0.9'
    )

  const kirbyBody = gsap.to(body.value, {
    duration: 0.2,
    scale: 1
  })

  const kirbyArmRight = gsap.to(armRight.value, {
    duration: 0.7,
    x: 0
  })

  const kirbyLegRight = gsap.to(legRight.value, {
    duration: 0.6,
    rotation: 0,
    y: 0
  })

  tlSpit.add(tlMouth, 0)
  tlSpit.add(kirbyBody, 0)
  tlSpit.add(kirbyArmRight, 0)
  tlSpit.add(kirbyLegRight, 0)
  return tlSpit
}
/**添加样式方法，style中配置了就可以不执行这个方法 */
function styleInject(css: string, ref?: { insertAt?: any } | undefined) {
  if (ref === void 0) ref = {}
  const insertAt = ref.insertAt

  if (!css || typeof document === 'undefined') {
    return
  }

  const head = document.head || document.getElementsByTagName('head')[0]
  const style = document.createElement('style') as any
  style.type = 'text/css'

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild)
    } else {
      head.appendChild(style)
    }
  } else {
    head.appendChild(style)
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css
  } else {
    style.appendChild(document.createTextNode(css))
  }
}
四、组件初始化以及对是否符合正则的对应动画执行方法

在onMounted钩子里面初始化星之卡比的外观

js 复制代码 
//KirbyComponent.vue
onMounted(() => {
  bodyPathFill.value = MorphSVGPlugin.convertToPath(bodyFill.value) as any
  bodyPathStroke.value = MorphSVGPlugin.convertToPath(bodyStroke.value) as any

  gsap.set(mouthOpen.value, {
    transformOrigin: '17px 26px',
    scale: 0
  })

  gsap.set(mouthFull.value, {
    transformOrigin: 'center center',
    scale: 0
  })

  gsap.set(mouthFrown.value, {
    transformOrigin: 'center center',
    scaleY: 0
  })

  gsap.set(eyeLeft.value, {
    transformOrigin: 'center 17px'
  })

  gsap.set(eyeRight.value, {
    transformOrigin: 'center 17px'
  })

  gsap.set(eyeLeftClosed.value, {
    transformOrigin: 'center bottom',
    scaleY: 0
  })

  gsap.set(eyeRightClosed.value, {
    transformOrigin: 'center bottom',
    scaleY: 0
  })

  gsap.set(face.value, {
    transformOrigin: '25px bottom'
  })

  gsap.set(armLeft.value, {
    transformOrigin: '70px 42px'
  })

  gsap.set(armRight.value, {
    transformOrigin: '-35px 44px'
  })

  gsap.set(legRight.value, {
    transformOrigin: '-13px -6px'
  })

  gsap.set(body.value, {
    transformOrigin: 'left bottom'
  })

  gsap.set(bodyStroke.value, {
    transformOrigin: 'center bottom'
  })

  gsap.set(bodyFill.value, {
    transformOrigin: 'center bottom'
  })

  gsap.set(hat.value, {
    scale: 0,
    transformOrigin: 'center bottom'
  })

  gsap.set(envelope.value, {
    scale: 0,
    transformOrigin: 'center bottom',
    y: 10
  })

  gsap.set(envelopeStar.value, {
    scale: 0,
    transformOrigin: 'center center'
  })

  gsap.set(star.value, {
    scale: 0,
    transformOrigin: 'center center'
  })
})

监听props中的值，根据值去动态执行相应的动画

js 复制代码 
//设置接收props的值
const props = defineProps({
  swallow: Boolean,
  spit: Boolean
})

//动画结束向父组件传递结束信息
const emits = defineEmits(['animationdone'])

//监听props中的值，去执行对应方法
watch(() => props.swallow, (newValue) => {
  if (newValue) {
    aswallow()
  }
})

watch(() => props.spit, (newValue) => {
  if (newValue) {
    aspit()
  }
})


//正则匹配为true时的动画
function aswallow(): any {
  if (props.swallow) {
    animateInhale()
      .then(animatePuffed as any)
      .then(animateSwallow)
      .then(animatePowerUp)
      .then(() => {
        emits('animationdone')
      })
  }
}

//正则匹配为false时的动画
function aspit(): any {
  if (props.spit) {
    console.log(2)
    animateInhale()
      .then(animatePuffed)
      .then(animateSpit)
      .then(() => {
        emits('animationdone')
      })
  }
}
五、输入框外观
html 复制代码 
//KirbyView.vue
<template>
	<main class="container">
		<div class="input-wrap">
			<svg 
				class="cloudy"
				viewBox="0 0 277 145"
			>
				<path 
					class="cloudy-poofs"
					d="M218,20c-0.74,0-1.47,0.03-2.2,0.06C204.99,7.77,189.16,0,171.5,0c-12.22,0-23.58,3.72-33,10.09 C129.08,3.72,117.72,0,105.5,0C87.84,0,72.01,7.77,61.2,20.06C60.47,20.03,59.74,20,59,20C26.42,20,0,46.42,0,79 c0,32.58,26.42,59,59,59c5.26,0,10.36-0.7,15.21-1.99C83.28,141.7,94,145,105.5,145c12.22,0,23.58-3.72,33-10.09 c9.42,6.37,20.78,10.09,33,10.09c11.5,0,22.22-3.3,31.29-8.99c4.85,1.29,9.95,1.99,15.21,1.99c32.58,0,59-26.42,59-59 C277,46.42,250.58,20,218,20z"
				/>
			</svg>
			<div 
				v-if="emailText"
				class="input-text"
			>
				<span 
					v-for="(letter, index) in emailText" 
					:key="index"
					class="input-text-letter"
				>{{ letter }}</span>
			</div>
			<div 
				:class="{ disabled: emailIsDisabled }"
				class="dreamy-input"
			>
				<label 
					class="dreamy-input-label"
					for="dreamyInput"
				>Email</label>
				<input 
					id="dreamyInput"
					v-model="emailValue"
					:aria-describedby="isNotValid ? 'dreamyInputErr' : undefined"
					:disabled="emailIsDisabled"
					autocomplete="off"
					class="dreamy-input-control"
					type="email"
					@keydown.enter="submitMail"
				>
				<transition name="fade">
					<span 
						v-if="isNotValid"
						id="dreamyInputErr"
						class="dreamy-input-error"
					>
						Please enter a valid email.
					</span>
				</transition>
				<button
					aria-label="Subscribe"
					class="dreamy-input-button"
					@click="submitMail"
				>
					<svg 
						class="dreamy-input-button-svg"
						viewBox="0 0 35 35"
					>
						<path 
							class="dreamy-input-button-star" 
							d="M29.36,23.14l4.63-5.32c2.08-2.39,0.77-6.08-2.39-6.7l-5.23-1.02c-0.23-0.05-0.44-0.19-0.56-0.39l-4.67-7.7 c-1.64-2.69-5.64-2.69-7.27,0l-4.67,7.7c-0.12,0.2-0.33,0.34-0.56,0.39L3.4,11.13c-3.16,0.62-4.47,4.31-2.39,6.7l4.63,5.32 c0.17,0.2,0.24,0.47,0.18,0.73L4.31,29.9c-0.83,3.32,2.61,6.12,5.82,4.74l7.03-3.03c0.22-0.09,0.47-0.09,0.68,0l7.03,3.03 c3.21,1.38,6.65-1.42,5.82-4.74l-1.51-6.04C29.12,23.61,29.18,23.34,29.36,23.14z"
						/>
					</svg>
				</button>
			</div>
		</div>
		<Kirby 
			:swallow="isValid"
			:spit="isNotValid"
			@animationdone="reset"
		/>
	</main>
</template>

<style lang="scss">
$black: #87213c;
$white: #fff;

$primary-color: #f9dde3;
$primary-color-tint: #fcf2f5;
$secondary-color: #ff2961;
$accent-color: #fae798;

$mail-color: #326dcc;
$star-sparkly-color: #b8d7ff;

$primary-font: 'Fredoka One', sans-serif;

:root {
	--black: #{$black};
	--white: #{$white};
	--primary-color: #{$primary-color};
	--primary-color-tint: #{$primary-color-tint};
	--secondary-color: #{$secondary-color};
	--accent-color: #{$accent-color};
	--mail-color: #{$mail-color};
	--star-color: #{$accent-color};
	--star-sparkly-color: #{$star-sparkly-color};
}
	
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
	
* { box-sizing: border-box; }

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	background-color: var(--primary-color-tint);
	font-size: 16px;
	line-height: 1;
	font-family: $primary-font;
}

.container {
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: center;
	width: 400px;
	max-width: 400px;
}

.input-text {
	position: absolute;
	z-index: 5;
	width: 17rem;
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--black);
	transform: translate(1rem, 0.625rem);
	overflow: hidden;

	&-letter {
		display: inline-block;
		transform-origin: center bottom;
	}
}

.input-wrap {
	position: relative;
}

.cloudy {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150%;
	transform: translate(-50%, -50%);

	&-poofs {
		fill: var(--white);
	}
}

.fade {
	&-enter-active,
	&-leave-active {
		transition: 0.3s;
	}

	&-enter-from,
	&-leave-to {
		opacity: 0;
	}
}
	
.dreamy-input {
	--offset-top: 0.1875rem;
	--offset-left: -0.125rem;
	--control-height: 3.125rem;

	position: relative;

	&::after {
		content: '';
		position: absolute;
		top: var(--offset-top);
		left: var(--offset-left);
		height: 100%;
		width: 100%;
		border: 3px solid var(--black);
		pointer-events: none;
		transition: border 0.5s ease-in-out;
	}

	&::after,
	&-control {
		border-radius: var(--control-height);
	}

	&-control {
		width: 15.625rem;
		height: var(--control-height);
		padding: 0 calc(1rem + var(--control-height)) 0 1rem;
		border: 0;
		background-color: var(--primary-color);
		font-family: $primary-font;
		font-size: 1.25rem;
		color: var(--black);
		caret-color: var(--secondary-color);
		transition: background-color 0.5s ease-in-out;

		&:focus {
			outline: none;
		}

		&:disabled {
			background-color: var(--primary-color-tint);
		}
	}

	&:focus-within {
		&::after {
			border-color: var(--secondary-color);
		}
	}

	&-label,
	&-error {
		position: absolute;
		left: 1rem;
		font-size: 0.75rem;
		letter-spacing: 0.05em;
	}

	&-label {
		top: -0.75rem;
		color: var(--black);
	}

	&-error {
		bottom: -1.5rem;
		color: var(--secondary-color);
	}

	&-button {
		display: grid;
		place-items: center;
		position: absolute;
		top: calc(var(--offset-top) + 3px);
		right: 0;
		height: var(--control-height);
		width: var(--control-height);
		padding: 0;
		border: 0;
		background-color: transparent;
		color: var(--white);
		cursor: pointer;
		transition: 0.4s ease-in-out;

		&-star {
			fill: currentColor;
			stroke: var(--star-stroke, transparent);
			stroke-width: 3px;
		}

		&-svg {
			width: 40%;
			overflow: visible;
		}

		&:focus {
			outline: none;
			color: var(--secondary-color);
		}

		&:hover {
			--star-stroke: var(--black);
			transform: scale(1.2);
			color: var(--accent-color);
		}
	}

	&.disabled {
		&::after {
			border-color: var(--primary-color);
		}

		.dreamy-input-button {
			color: var(--primary-color);
		}
	}
}
</style>

<style lang="scss" scoped>
.kirby {
  position: relative;
  z-index: 5;
  display: inline-block;
  height: 120px;
  width: 120px;
  overflow: visible;
}
.kirby-stroke {
  stroke: var(--black);
  stroke-width: 3px;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.kirby-body {
  fill: var(--primary-color);
}
.kirby-mouth-open-tongue,
.kirby-foot {
  fill: var(--secondary-color);
}
.kirby-hat-dark,
.kirby-mouth-open-inner,
.kirby-eye {
  fill: var(--black);
}
.kirby-blush {
  stroke: var(--secondary-color);
}
.kirby-blush-small {
  stroke-width: 2.5px;
}
.kirby-star {
  stroke-width: 3px;
  stroke: currentColor;
  fill: var(--star-color);
}
.kirby-star-splashy {
  color: transparent;
}
.kirby-star-spit {
  color: var(--black);
}
.kirby-hat-band {
  fill: var(--accent-color);
}
.kirby-hat {
  fill: var(--mail-color);
}
.kirby-envelope {
  fill: var(--white);
}
.kirby-envelope-star {
  fill: var(--primary-color);
}
</style>
六、配置输入框节点以及输入框文字移动动画
js 复制代码 
//KirbyView.vue
import { ref,nextTick  } from 'vue';
import Kirby from '@/components/kirby/KirbyComponent.vue';
// import Kirby from '../components/kirby/kirby';
//引入gasp插件
import { gsap } from 'gsap'
//配置输入框节点
const emailValue = ref('');
const emailIsDisabled = ref(false);
const emailText = ref('');
const isValid = ref(false);
const isNotValid = ref(false);
//输入框判断方法
function submitMail() {
    if (emailValue.value) {
        const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        isValid.value = emailRegex.test(emailValue.value);
        isNotValid.value = !isValid.value;
        emailText.value = emailValue.value.length > 15 ?
        emailValue.value.slice(0, 15) + '...' :
        emailValue.value;
        emailValue.value = '';
        emailIsDisabled.value = true;
        nextTick(animateText);
        }
    }
 //输入框文字吸入效果
function animateText() {
    const tlJiggle = gsap.timeline({ 
        delay: 1, 
        defaults: {
            duration: 0.1
        }
});

tlJiggle
    .to('.input-text-letter', {
            y: 'random(-6, 4)'
    })
    .to('.input-text-letter', {
            y: 'random(-6, 4)'
    })
    .to('.input-text-letter', {
            y: 'random(-6, 4)'
    })
    .to('.input-text-letter', {
            y: 'random(-6, 4)'
    })
    .to('.input-text-letter', {
            y: 0,
            duration: 0.1
    })
    .to('.input-text-letter', {
        delay: 0,
        duration: 0.5,
        ease: 'expo.in',
        x: 300,
        stagger: {
            amount: 0.3,
            from: 'end'
        }
    });
}
//重置动画flag
function reset() {
    emailIsDisabled.value = false;
    isValid.value = false;
    isNotValid.value = false;
    emailText.value = '';
}

代码地址

gitee:gitee.com/liu_soon/vu...

npm install

npm run dev

运行成功之后打开：http://localhost:5173/Kirby

结语

这个主要是学习gasp动画的，了解这篇文章能够较快的入门gasp这个技术。最主要的是这个输入框好看，而且适合用在博客上。

相关推荐
小远yyds17 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果36 分钟前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长40 分钟前
基于vue框架的的流浪宠物救助系统25128（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
数据库·vue.js·宠物
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目（五）
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨1 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解