анимация человека
This commit is contained in:
parent
754b4c7c05
commit
9937c64224
@ -1,3 +1,3 @@
|
||||
<svg width="231" height="414" viewBox="0 0 231 414" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M52.6304 288.512L34.3361 320.212C31.8969 324.5 28.1648 327.336 23.14 328.72C18.1152 330.105 13.4623 329.566 9.18144 327.103C4.90057 324.641 2.08324 320.892 0.729464 315.857C-0.624315 310.822 -0.0937818 306.148 2.32107 301.835L87.3896 154.363C75.8032 142.419 67.1134 128.789 61.3202 113.475C55.527 98.1616 52.6304 82.3884 52.6304 66.1557C52.6304 58.1925 53.3195 50.1558 54.6977 42.0456C56.0759 33.9354 58.4358 26.0457 61.7776 18.3766C63.607 13.7824 66.961 10.7932 71.8395 9.40881C76.7179 8.02444 81.2915 8.56349 85.5602 11.026C89.8289 13.4884 92.6523 17.1637 94.0304 22.0519C95.4086 26.9401 95.3294 31.8405 93.7926 36.7532C92.2681 41.3473 91.1278 46.0211 90.3716 50.7745C89.6154 55.5279 89.2312 60.3487 89.2191 65.2369C89.2191 81.4695 93.1828 96.7099 101.11 110.958C109.038 125.206 120.319 136.612 134.955 145.175L176.117 169.065C195.021 180.091 208.894 195.943 217.737 216.623C226.579 237.303 231 256.672 231 274.73C231 282.999 230.238 291.195 228.713 299.318C227.189 307.44 224.902 315.324 221.853 322.969C220.023 327.869 216.669 331.011 211.791 332.396C206.912 333.78 202.186 333.241 197.613 330.779C193.344 328.328 190.448 324.653 188.923 319.753C187.399 314.852 187.399 309.799 188.923 304.592C190.448 299.692 191.594 294.865 192.362 290.111C193.131 285.358 193.509 280.537 193.497 275.649C193.497 265.848 192.125 256.353 189.38 247.165C186.636 237.977 182.215 229.401 176.117 221.438L70.01 404.744C67.5708 409.032 63.8388 411.868 58.8139 413.253C53.7891 414.637 49.1362 414.098 44.8553 411.636C40.5745 409.173 37.7572 405.424 36.4034 400.389C35.0496 395.354 35.5801 390.68 37.995 386.368L83.7308 306.889L52.6304 288.512ZM185.264 147.013C175.202 147.013 166.592 143.417 159.433 136.226C152.273 129.034 148.688 120.379 148.676 110.26C148.663 100.14 152.249 91.4909 159.433 84.3118C166.616 77.1327 175.227 73.5308 185.264 73.5063C195.302 73.4818 203.918 77.0837 211.114 84.3118C218.31 91.5399 221.889 100.189 221.853 110.26C221.816 120.33 218.237 128.985 211.114 136.226C203.991 143.466 195.375 147.062 185.264 147.013ZM139.528 55.1298C131.601 55.1298 125.045 52.3733 119.862 46.8603C114.679 41.3473 112.087 34.9155 112.087 27.5649C112.087 19.6017 114.831 13.0167 120.319 7.81005C125.808 2.60335 132.211 0 139.528 0C147.456 0 154.011 2.75649 159.195 8.26946C164.378 13.7824 166.97 20.2142 166.97 27.5649C166.97 35.5281 164.226 42.113 158.737 47.3197C153.249 52.5264 146.846 55.1298 139.528 55.1298Z" fill="white"/>
|
||||
<svg width="255" height="415" viewBox="0 0 255 415" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M111.077 11.4738C115.326 13.9723 118.12 17.6725 119.457 22.5731C120.795 27.4736 120.675 32.3745 119.097 37.2753C117.534 41.8576 116.354 46.5227 115.559 51.2707C114.763 56.0188 114.338 60.8376 114.285 65.7266C114.15 81.9628 117.987 97.2394 125.798 111.556C133.608 125.874 144.798 137.376 159.365 146.063L200.336 170.301C219.152 181.487 232.897 197.458 241.568 218.216C250.24 238.974 254.501 258.384 254.35 276.446C254.281 284.717 253.451 292.909 251.859 301.02C250.266 309.131 247.913 316.998 244.799 324.619C242.929 329.505 239.547 332.62 234.656 333.964C229.765 335.308 225.043 334.729 220.489 332.228C216.24 329.742 213.373 326.042 211.889 321.128C210.406 316.214 210.448 311.159 212.016 305.964C213.582 301.075 214.769 296.257 215.577 291.509C216.385 286.761 216.803 281.942 216.831 277.053C216.913 267.25 215.62 257.742 212.952 248.529C210.284 239.316 205.933 230.701 199.9 222.685L92.2426 405.147C89.7671 409.415 86.0106 412.221 80.9732 413.564C75.9357 414.906 71.2863 414.328 67.025 411.83C62.764 409.331 59.9775 405.558 58.6654 400.511C57.3533 395.463 57.923 390.793 60.3743 386.499L106.781 307.385L75.8273 288.746L57.2655 320.299C54.7901 324.568 51.0335 327.373 45.9961 328.716C42.2553 329.713 38.7288 329.65 35.4161 328.529L14.8132 363.538C16.1073 365.828 16.1803 368.726 14.7501 371.156C12.6159 374.782 7.94566 375.992 4.31928 373.858C0.69312 371.724 -0.515985 367.054 1.61813 363.428C3.04836 360.997 5.61706 359.654 8.24765 359.674L28.8699 324.632C26.3674 322.313 24.639 319.324 23.6874 315.663C22.3753 310.616 22.9451 305.945 25.3964 301.652L111.712 154.857C100.223 142.813 91.6447 129.108 85.9779 113.743C80.3111 98.3777 77.5453 82.5767 77.6806 66.3406C77.7469 58.3758 78.5037 50.3433 79.9497 42.243C81.3958 34.1425 83.8216 26.2705 87.2279 18.6276C89.0961 14.0478 92.4758 11.0865 97.3668 9.74249C102.258 8.39847 106.828 8.97522 111.077 11.4738ZM210.282 74.7983C220.321 74.8574 228.91 78.5316 236.047 85.821C243.184 93.1106 246.693 101.792 246.572 111.864C246.452 121.937 242.799 130.564 235.614 137.747C228.43 144.929 219.782 148.453 209.67 148.32C199.606 148.236 191.023 144.568 183.922 137.316C176.821 130.063 173.307 121.376 173.379 111.254C173.451 101.133 177.109 92.5115 184.354 85.3908C191.599 78.27 200.242 74.7391 210.282 74.7983ZM165.148 0.894766C173.078 0.960825 179.612 3.77303 184.75 9.33038C189.889 14.8877 192.427 21.3425 192.366 28.6947C192.299 36.6595 189.5 43.2231 183.967 48.3852C178.434 53.5471 172.009 56.0977 164.689 56.0368C156.76 55.9707 150.226 53.1585 145.088 47.6012C139.949 42.044 137.411 35.5897 137.472 28.2377C137.538 20.2728 140.338 13.7084 145.871 8.54636C151.403 3.3845 157.829 0.833825 165.148 0.894766Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.7 KiB |
@ -95,3 +95,12 @@ animationPhase >= 2 ? "scale-80" : "scale-100"} ${animationPhase >= 3 ? "-transl
|
||||
}
|
||||
|
||||
export default CourseComplete
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// <svg xmlns="http://www.w3.org/2000/svg" width="292" height="221" viewBox="0 0 292 221" fill="none">
|
||||
// <path d="M26 78.0571C43.5001 101.057 67.9999 122.5 111 129C154 135.5 164 119.557 202.5 138.557C241 157.557 248.5 188.057 252 203.057C255.5 218.057 270 221.057 277.5 220.057C285 219.057 289.5 212.557 291 206.057C292.5 199.557 287.5 159.557 246.5 121.557C205.5 83.5571 174 95.0575 114.5 89.5571C55.0001 84.0568 39.5 24.0576 34 9.55715C28.5001 -4.94333 -1.70972e-05 -2.94326 0 15.5571C1.70972e-05 34.0576 8.49988 55.0571 26 78.0571Z" fill="#F3945B" />
|
||||
// </svg>
|
@ -2,7 +2,7 @@
|
||||
|
||||
import type React from "react"
|
||||
import { useEffect, useState } from "react"
|
||||
import { useIonRouter } from '@ionic/react';
|
||||
// import { useIonRouter } from '@ionic/react';
|
||||
|
||||
const CourseComplete: React.FC = () => {
|
||||
|
||||
@ -25,16 +25,15 @@ const CourseComplete: React.FC = () => {
|
||||
|
||||
|
||||
|
||||
// const router = useIonRouter()
|
||||
|
||||
const router = useIonRouter()
|
||||
// useEffect(() => {
|
||||
// const timer = setTimeout(() => {
|
||||
// router.push("/home", "forward")
|
||||
// }, 3500) // Задержка 3 секунды
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
router.push("/home", "forward")
|
||||
}, 5000) // Задержка 3 секунды
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}, [router])
|
||||
// return () => clearTimeout(timer)
|
||||
// }, [router])
|
||||
|
||||
|
||||
return (
|
||||
@ -49,13 +48,13 @@ const CourseComplete: React.FC = () => {
|
||||
<div className="absolute inset-0 flex items-start justify-center pt-30">
|
||||
{/* тело */}
|
||||
<div className={`absolute left-[37%] transform duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[24%]" : "opacity-0 scale-0 top-[10%]"} `}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="109" height="166" viewBox="0 0 109 166" fill="none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="109" height="160" viewBox="0 0 109 166" fill="none">
|
||||
<rect width="109" height="166" rx="40" fill="#F3945B" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* руки */}
|
||||
<div className={`absolute left-[15%] transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[16%]" : "opacity-0 scale-0 top-[7%]"} ` }
|
||||
<div className={`absolute left-[15%] transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[14%]" : "opacity-0 scale-0 top-[7%]"} ${animationPhase >= 3 ? "opacity-100 rotate-20" : "opacity-100 rotate-0"}`}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="292" height="221" viewBox="0 0 292 221" fill="none">
|
||||
<path d="M26 78.0571C43.5001 101.057 67.9999 122.5 111 129C154 135.5 164 119.557 202.5 138.557C241 157.557 248.5 188.057 252 203.057C255.5 218.057 270 221.057 277.5 220.057C285 219.057 289.5 212.557 291 206.057C292.5 199.557 287.5 159.557 246.5 121.557C205.5 83.5571 174 95.0575 114.5 89.5571C55.0001 84.0568 39.5 24.0576 34 9.55715C28.5001 -4.94333 -1.70972e-05 -2.94326 0 15.5571C1.70972e-05 34.0576 8.49988 55.0571 26 78.0571Z" fill="#F3945B" />
|
||||
@ -63,10 +62,17 @@ const CourseComplete: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* нога 1 */}
|
||||
<div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[34%] left-[37%]" : "opacity-0 scale-0 top-[15%] left-[47%]"} ` }>
|
||||
<div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[34%] left-[37%]" : "opacity-0 scale-0 top-[15%] left-[47%]"} ${animationPhase >= 3 ? "top-[0%] right-[47%] " : "top-[15%] right-[47%] "}`}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="37" height="129" viewBox="0 0 37 129" fill="none">
|
||||
<rect width="37" height="129" rx="18.5" fill="#F3945B" />
|
||||
</svg>
|
||||
<div className="top-[75%] left-[2%] absolute">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="120" viewBox="0 0 35 140" fill="#F3945B">
|
||||
<rect x="0" y="10" width="35" height="30" fill="#F3945B" rx="12" />
|
||||
<rect x="15" y="40" width="7" height="50" fill="#F3945B" />
|
||||
<circle cx="18.5" cy="90" r="8" fill="#F3945B" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* нога 2 */}
|
||||
@ -77,7 +83,7 @@ const CourseComplete: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* голова */}
|
||||
<div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[16%] left-[41%] " : "opacity-0 scale-0 top-[20%] right-[40%] "} ` }>
|
||||
<div className={`absolute transition-all duration-800 delay-300 ${animationPhase >= 1 ? "opacity-100 scale-100 top-[14%] left-[41%] " : "opacity-0 scale-0 top-[20%] right-[40%] "} `}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 75 75" fill="none">
|
||||
<circle cx={37.5} cy={37.5} r={37.5} fill="#F3945B" />
|
||||
</svg>
|
||||
@ -86,9 +92,12 @@ const CourseComplete: React.FC = () => {
|
||||
|
||||
|
||||
{/* мяч */}
|
||||
<div className={`absolute transition-all duration-400 delay-100 ${animationPhase >= 2 ? "opacity-100 scale-100 top-[14%] left-[22%] " : "opacity-0 scale-0 -top-[20%] right-[40%] "} ` }>
|
||||
<div className={`z-50 absolute transition-all duration-600 delay-100 ${animationPhase >= 2 ? "opacity-100 scale-100 top-[14%] left-[22%] " : "opacity-0 scale-0 -top-[20%] right-[40%] "} ${animationPhase >= 3 ? "scale-[90%]" : "scale-100"} {/* ${animationPhase >= 4 ? "scale-[3000%]" : "scale-100"} */}
|
||||
|
||||
` }
|
||||
>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54' fill='none'>
|
||||
<circle cx='27' cy='27' r='27' fill='#F3945B' />
|
||||
<circle cx='27' cy='27' r='27' fill='#FFFFFF' />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@ -100,21 +109,21 @@ const CourseComplete: React.FC = () => {
|
||||
{/* Main Content */}
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="text-center px-8 z-10">
|
||||
{/* App Name */}
|
||||
|
||||
<div
|
||||
className={`transition-opacity duration-1000 delay-300 ${animationPhase >= 1 ? "opacity-100" : "opacity-0"}`}
|
||||
className={`transition-opacity duration-1000 delay-600 ${animationPhase >= 1 ? "opacity-100" : "opacity-0"}`}
|
||||
>
|
||||
<h1 className="text-5xl font-black text-white mb-4 tracking-tight filter drop-shadow-lg">Реабилитация</h1>
|
||||
{/* Line Loader - now appears with subtitle in phase 4, and grows from left to right */}
|
||||
|
||||
<div
|
||||
className="h-1 bg-white/70 rounded-full mx-auto my-2 transition-all duration-500 ease-out"
|
||||
style={{
|
||||
width: animationPhase >= 2 ? '320px' : '0px', // или начальное значение
|
||||
width: animationPhase >= 2 ? '320px' : '0px',
|
||||
maxWidth: '320px',
|
||||
opacity: animationPhase >= 2 ? 1 : 0,
|
||||
}}
|
||||
></div>
|
||||
{/* Subtitle - appears with opacity transition in phase 4 */}
|
||||
|
||||
<p className={`text-white/90 text-xl font-medium tracking-wide transition-opacity duration-1000 ${animationPhase >= 2 ? 'opacity-100' : 'opacity-0'}`}>
|
||||
Восстановление через движение
|
||||
</p>
|
||||
|
@ -1,235 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
// import { useIonRouter } from '@ionic/react';
|
||||
|
||||
export default function Welcome() {
|
||||
const [animationPhase, setAnimationPhase] = useState(0)
|
||||
const [displayedTitle, setDisplayedTitle] = useState("")
|
||||
const [displayedSubtitle, setDisplayedSubtitle] = useState("")
|
||||
const [loaderWidth, setLoaderWidth] = useState(0) // Изначально 0 для анимации слева направо
|
||||
|
||||
const fullTitle = "Реабилитация"
|
||||
const fullSubtitle = "Восстановление через движение"
|
||||
|
||||
useEffect(() => {
|
||||
// Phase 1: App name appears, ball appears (after 0.2s)
|
||||
const timer1 = setTimeout(() => setAnimationPhase(1), 700)
|
||||
// Phase 2: Limbs start growing (after 0.7s)
|
||||
// Limb growth animation is 2s, so it finishes at 0.7s + 2s = 2.7s
|
||||
const timer2 = setTimeout(() => setAnimationPhase(2), 700)
|
||||
// Phase 3: SVG rotates, ball tosses (after 1.7s, when limbs are fully grown)
|
||||
const timer3 = setTimeout(() => setAnimationPhase(3), 1700)
|
||||
// Phase 4: Subtitle and Loader appear (after ball toss finishes)
|
||||
// Ball toss animation is 1.2s with 0.1s delay, so it finishes around 1.7s + 0.1s + 1.2s = 3.0s
|
||||
// Starting Phase 4 at 3.1s ensures ball is completely gone
|
||||
const timer4 = setTimeout(() => setAnimationPhase(4), 3100) // Запускаем фазу 4 после исчезновения мяча
|
||||
// Phase 5: Ball starts bouncing (after subtitle and loader appear, e.g., 3.1s + 1s for subtitle opacity = 4.1s, so start at 4.2s)
|
||||
const timer5 = setTimeout(() => setAnimationPhase(5), 3100)
|
||||
|
||||
return () => {
|
||||
clearTimeout(timer1)
|
||||
clearTimeout(timer2)
|
||||
clearTimeout(timer3)
|
||||
clearTimeout(timer4)
|
||||
clearTimeout(timer5)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (animationPhase >= 1) {
|
||||
setDisplayedTitle(fullTitle) // Заголовок появляется мгновенно
|
||||
}
|
||||
if (animationPhase >= 4) { // Подзаголовок и лоадер появляются в фазе 4
|
||||
setDisplayedSubtitle(fullSubtitle) // Подзаголовок появляется целиком
|
||||
setLoaderWidth(100) // Лоадер анимируется до полной ширины
|
||||
}
|
||||
}, [animationPhase]) // Зависимость от animationPhase
|
||||
|
||||
|
||||
|
||||
// const router = useIonRouter()
|
||||
|
||||
// useEffect(() => {
|
||||
// const timer = setTimeout(() => {
|
||||
// router.push("/home", "forward")
|
||||
// }, 5000) // Задержка 3 секунды
|
||||
|
||||
// return () => clearTimeout(timer)
|
||||
// }, [router])
|
||||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen relative overflow-hidden">
|
||||
{/* Background and particles */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#3ABBC7] to-[#0D212C]">
|
||||
|
||||
{/* SVG with animated figure */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 -10 64 74" /* Adjusted viewBox to prevent clipping */
|
||||
className={`h-[30rem] lg:h-[50rem] w-auto absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-0 ${animationPhase >= 3 ? 'svg-rotate-active' : ''}`}
|
||||
>
|
||||
<defs>
|
||||
<style>{`
|
||||
/* SVG Rotation */
|
||||
@keyframes svgRotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(30deg); }
|
||||
}
|
||||
.svg-rotate-active {
|
||||
animation: svgRotate 0.8s ease-out forwards; /* Faster rotation */
|
||||
}
|
||||
/* Limb growth animation for ARMS (paths) */
|
||||
.arm-limb {
|
||||
stroke-dasharray: var('--length');
|
||||
stroke-dashoffset: var('--length'); /* Initially hidden */
|
||||
}
|
||||
.arm-limb.limb-grow-active {
|
||||
animation: drawLine 0.5s linear forwards; /* 2s linear для синхронизации */
|
||||
}
|
||||
@keyframes drawLine {
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
/* Limb growth animation for LEGS (rects) */
|
||||
.leg-limb {
|
||||
transform-origin: top; /* Рост от верхней части (туловища) */
|
||||
transform: scaleY(0); /* Initially hidden */
|
||||
}
|
||||
.leg-limb.limb-grow-active {
|
||||
animation: growRect 0.4s linear forwards; /* 2s linear для синхронизации */
|
||||
}
|
||||
@keyframes growRect {
|
||||
from {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
to {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
/* Counter-rotation for the tossing arm's group */
|
||||
@keyframes counterRotateArm {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(-5deg); } /* Уменьшен угол наклона руки */
|
||||
}
|
||||
.tossing-arm-counter-rotate {
|
||||
animation: counterRotateArm 0.8s ease-out forwards; /* Faster counter-rotation */
|
||||
transform-origin: 34px 26px;
|
||||
}
|
||||
/* Ball animation */
|
||||
.ball-toss-active {
|
||||
animation: tossBall 1.2s ease-out forwards; /* Увеличена длительность для плавности */
|
||||
animation-delay: 0.1s; /* Небольшая задержка после поворота руки */
|
||||
}
|
||||
@keyframes tossBall {
|
||||
0% { transform: translate(-50%, -50%) scale(1,1); opacity: 0; } /* Начальное положение, центрирование */
|
||||
10% { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* Начальное положение, центрирование */
|
||||
25% { transform: translate(calc(-50% + 30px), calc(-50% - 80px)) scale(1.1); opacity: 1; } /* Бросок вверх и вправо */
|
||||
50% { transform: translate(calc(-50% + 40px), calc(-50% + 150px)) scale(1); opacity: 1; } /* Отскок вниз к ногам (имитация пола) */
|
||||
70% { transform: translate(calc(-50% + 40px), calc(-50% + 150px)) scale(5); opacity: 1; } /* Начинает лететь на пользователя, увеличиваясь */
|
||||
100% { transform: translate(calc(-50% + 40px), calc(-50% + 150px)) scale(200); opacity: 0; } /* Полностью летит на пользователя, исчезает */
|
||||
}
|
||||
/* New: Ball bounce animation */
|
||||
@keyframes bounceBall {
|
||||
0%, 100% { transform: translate(-50%, -50%) translateY(0); }
|
||||
50% { transform: translate(-50%, -52%) translateY(-45px); } /* Adjust bounce height as needed */
|
||||
}
|
||||
.ball-bounce-active {
|
||||
animation: bounceBall 0.8s ease-in-out infinite alternate; /* Smooth bounce, infinite, alternating */
|
||||
}
|
||||
`}</style>
|
||||
</defs>
|
||||
{/* Group with mirror transform for the human figure */}
|
||||
<g transform="translate(64, 0) scale(-1, 1)">
|
||||
{/* Голова */}
|
||||
<circle cx={32} cy={12} r={6} fill="#1A3A4A" />
|
||||
{/* Тело */}
|
||||
<rect x={24} y={20} width={16} height={24} fill="#1A3A4A" rx={2} />
|
||||
{/* Левая рука (смотрит вниз) - THIS IS THE TOSSING ARM AFTER MIRRORING */}
|
||||
{/* Wrapped in a new group for counter-rotation */}
|
||||
|
||||
<g className={`${animationPhase >= 3 ? 'tossing-arm-counter-rotate' : ''}`}>
|
||||
<path
|
||||
d="M34,26 Q51,16 40,3"
|
||||
fill="none"
|
||||
stroke="#1A3A4A"
|
||||
strokeWidth={6}
|
||||
strokeLinecap="round"
|
||||
className={`arm-limb ${animationPhase >= 2 ? 'limb-grow-active' : ''}`} /* Apply active class when phase 2 starts */
|
||||
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Правая рука (волнообразная вверх) - This arm will remain static after growth */}
|
||||
<path
|
||||
d="M26,23 Q16,34 18,32"
|
||||
fill="none"
|
||||
stroke="#1A3A4A"
|
||||
strokeWidth={6}
|
||||
strokeLinecap="round"
|
||||
className={`arm-limb ${animationPhase >= 2 ? 'limb-grow-active' : ''}`} /* Apply active class when phase 2 starts */
|
||||
|
||||
/>
|
||||
{/* Левая нога - длиннее */}
|
||||
<rect
|
||||
x={24}
|
||||
y={40} /* Начало от нижней части туловища */
|
||||
width={6}
|
||||
height={20}
|
||||
rx={3}
|
||||
fill="#1A3A4A"
|
||||
className={`leg-limb ${animationPhase >= 2 ? 'limb-grow-active' : ''}`} /* Apply active class when phase 2 starts */
|
||||
/>
|
||||
{/* Правая нога - длиннее */}
|
||||
<rect
|
||||
x={34}
|
||||
y={40} /* Начало от нижней части туловища */
|
||||
width={6}
|
||||
height={13}
|
||||
rx={3}
|
||||
fill="#1A3A4A"
|
||||
className={`leg-limb ${animationPhase >= 2 ? 'limb-grow-active' : ''}`} /* Apply active class when phase 2 starts */
|
||||
/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
{/* Ball - now a separate div for absolute positioning */}
|
||||
<div
|
||||
className={`absolute rounded-full bg-[#FFA500] w-[2.7rem] h-[2.7rem] z-20 transition-opacity duration-200
|
||||
${animationPhase >= 1 ? 'opacity-100' : 'opacity-0'}
|
||||
${animationPhase >= 3 ? 'ball-toss-active' : ''}
|
||||
${animationPhase >= 5 ? 'ball-bounce-active' : ''}
|
||||
`}
|
||||
style={{
|
||||
// Adjusted initial position using vh/vw for better responsiveness
|
||||
top: 'calc(50% - 20vh)', // Примерно 20% высоты вьюпорта выше центра
|
||||
left: '50%', // Примерно 3.8% ширины вьюпорта левее центра
|
||||
transform: 'translate(-50%, -50%)', // Центрирует сам div относительно его top/left
|
||||
}}
|
||||
/>
|
||||
{/* Main Content */}
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="text-center px-8 z-10">
|
||||
{/* App Name */}
|
||||
<div
|
||||
className={`transition-opacity duration-1000 delay-100 ${animationPhase >= 1 ? "opacity-100" : "opacity-0"}`}
|
||||
>
|
||||
<h1 className="text-5xl font-black text-white mb-4 tracking-tight filter drop-shadow-lg">{displayedTitle}</h1>
|
||||
{/* Line Loader - now appears with subtitle in phase 4, and grows from left to right */}
|
||||
<div
|
||||
className={`h-1 bg-white/70 rounded-full mx-auto my-2 transition-all duration-500 ease-out`}
|
||||
style={{ width: `${loaderWidth}%`, maxWidth: '340px', opacity: animationPhase >= 4 ? 1 : 0 }}
|
||||
></div>
|
||||
{/* Subtitle - appears with opacity transition in phase 4 */}
|
||||
<p className={`text-white/90 text-xl font-medium tracking-wide transition-opacity duration-1000 ${animationPhase >= 4 ? 'opacity-100' : 'opacity-0'}`}>
|
||||
{displayedSubtitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user