vue3.2+gsap+svg创建多个component组件实现日出日落湖面小船动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：vue3.2+gsap+svg创建多个component组件实现日出日落湖面小船动画效果代码，使用了vue3中的component组件创建方法来控制场景中的太阳，船只、云朵、背景色等组件实现了动画展现效果。

代码标签： vue gsap component svg 湖面日出日落夜晚景色小船

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vue-slider-component/theme/antd.css">
  

<style>
body {
  font-family: sans-serif;
  margin: 0;
  background-color: #1f2937;
  color: rgb(229, 231, 235)
}

svg {
  max-height: 90vh;
  max-width: calc(90vh / 900 * 1600);
}

.boat-enter-active {
  transition: transform 2s ease-out;
}

.boat-leave-active {
  transition: transform 3s ease-in;
}

.boat-enter-from {
  transform: translateX(-350px);
}

.boat-leave-to {
  transform: translateX(1400px);
}

.cloud-enter-active {
  transition: all 3s ease-out;
}

.cloud-leave-active {
  transition: all 3s ease-in;
}

.cloud-enter-from {
  opacity: 0;
  transform: translateX(-200px);
}

.cloud-leave-to {
  opacity: 0;
  transform: translateX(200px);
}

.controls-enter-active,
.controls-leave-active {
  transition: transform 0.7s;
}

.controls--0.controls-enter-from,
.controls--0.controls-leave-to {
  transform: translateX(-100vw);
}

.controls--1.controls-enter-from,
.controls--1.controls-leave-to {
  transform: translateX(100vw);
}

a { color: inherit; }
.absolute { position: absolute; }
.relative { position: relative; }
.top-0 { top: 0px; }
.inset-x-0 { left: 0px; right: 0px; }
.w-full { width: 100%; }
.h-24 { height: 6rem; }
.mt-5 { margin-top: 1.25rem; }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
.flex { display: flex; }
.justify-center { justify-content: center; }
.items-end { align-items: flex-end; }
.text-center { text-align: center; }
.bg-bgMain { background-color: rgb(31, 41, 55); }
.opacity-50 { opacity: 0.5; }
.button {
  border-radius: 0.375rem;
  border: 2px rgb(75, 85, 99) solid;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: button;
  cursor: pointer;
}
.button:hover {
  background-color: rgb(75, 85, 99);
}
</style>


</head>

<body translate="no" >
  <div id="app">
  <div class="text-center">
    <svg viewBox="0 0 1600 900" class="w-full">
      <mask id="waterMask">
        <rect fill="white" x="0" y="550" width="1600" height="350" />
      </mask>

      <Stars :time="time" />

      <Moon :time="time" />

      <Sun :time="time" />
      <Mountains :time="time" />

      <Clouds :cloud-count="cloudCount" :time="time" />

      <rect :fill="waterColor.hex()" x="0" y="550" width="1600" height="350" />

      <g opacity="0.3" mask="url(#waterMask)">
        <g transform="translate(0 1100) scale(1 -1)">
          <Sun :time="time" />
          <Mountains :time="time" />
        </g>
      </g>

      <transition name="boat">
        <g v-if="boatVisible">
          <Boat :fill="boatColor.hex()" />
          <g transform="translate(0 1380) scale(1 -1)">
            <Boat :fill="boatShadowColor.hex()" />
          </g>
        </g>
      </transition>

      <fg-mountains :time="time" />

      <g opacity="0.3" transform="translate(0 1573) scale(1 -1)">
        <fg-mountains :time="time" :right-only="true" />
      </g>
    </svg>

    <div class="relative h-24 mt-5">
      <transition name="controls">
        <div
          v-if="controlSection === 0"
          class="absolute inset-x-0 top-0 space-x-4 controls--0"
        >
          <button class="button bg-bgMain" @click="boatVisible = !boatVisible">
            Toggle boat
          </button>
          <button class="button bg-bgMain" @click="cloudCount++">
            Add cloud
          </button>
          <button class="button bg-bgMain" @click="cloudCount--">
            Remove cloud
          </button>
          <button class="button bg-bgMain" @click="controlSection++">
            →
          </button>
        </div>

        <div
          v-else-if="controlSection === 1"
          class="absolute inset-x-0 top-0 flex items-end justify-center space-x-4 controls--1"
        >
          <button class="button bg-bgMain" @click="controlSection--">
            ←
          </button>
          <div class="w-72">
            <input v-model="time" type="range" min="14" max="20" />
<!--             <vue-slider
              v-model="time"
              :min="14"
              :max="20"
              :interval="1 / 60"
              :duration="0"
              :contained="true"
              tooltip="always"
              :tooltip-formatter="numToTime"
            /> -->
          </div>
          <button class="button bg-bgMain" @click="goToTime(14)">Day</button>
          <button class="button bg-bgMain" @click="goToTime(18)">Dusk</button>
          <button class="button bg-bgMain" @click="goToTime(20)">Night</button>
        </div>
      </transition>
    </div>
    
    
  </div>
</div>

<script type="x-template" id="boat">
  <path
    fill="orange"
    d="M 232 690 H 320 L 336 670 H 216 M 232 658 H 282 V 582.8 M 294 658 H 320 L 294 610"
  />
</script>

<script type="x-template" id="clouds">
  <transition-group name="cloud">
    <g v-for="c of clouds" :key="c.id">
      <path
        :fill="cloudColor.hex()"
        :transform="`translate(${c.x} ${c.y}) scale(${c.scaleX} ${c.scaleY})`"
        d="M 0 0 C 8 -11 28 -13.2 32 -13.2 C 46 -13.2 52 -24.2 74 -24.2 C 92 -24.2 94 -13.2 104 -13.2 S 124 -6.6 130 0"
      />
    </g>
  </transition-group>
</script>

<script type="x-template" id="fgMountains">
  <path
    v-if="!rightOnly"
    :fill="fgColor.hex()"
    d="M -940 900 C -844 836 -604 823.2 -556 823.2 C -388 823.2 -316 759.2 -102 755 C 100 766 146 859 297 836 S 548 861.6 620 900"
  />
  <path
    v-if="!rightOnly"
    :fill="bgColor.hex()"
    d="M -900 900 C -820 788 -620 765.6 -580 765.6 C -440 765.6 -380 653.6 -182 766 C 21 677 40 765.6 140 765.6 S 340 832.8 360 900"
  />

  <path
    :fill="fgColor.hex()"
    d="M 2200 786.5 C 2144.2 730.7 2004.9 719.6 1633 728 C 1595 728 1577 686 1479 732 C 1384 773 1396 764 1361 769 S 1270 768 1243 786"
  />
  <path
    :fill="bgColor.hex()"
    d="M 2200 786.5 C 2144.2 730.7 2004.9 719.6 1977 719.6 C 1879.4 719.6 1837.6 663.8 1713.3 660.2 C 1596 669.8 1569.3 750.8 1481.6 730.7 S 1335.8 753 1294 786.5"
  />
</script>

<script type="x-template" id="mountains">
  <path
    :fill="bgColor.hex()"
    d="M -600 550 C -520 470 -320 454 -280 454 C -140 454 -80 374 140 374 C 320 374 340 454 440 454 S 640 502 700 550"
  />
  <path
    :fill="fgColor.hex()"
    d="M -1020 550 C -924 486 -684 473.2 -636 473.2 C -468 473.2 -396 409.2 -182 405 C 20 416 66 509 217 486 .........完整代码请登录后点击上方下载按钮下载查看