vue3.2+gsap+svg创建多个component组件实现日出日落湖面小船动画效果代码
代码语言: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"
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0