| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Pokemon Sprite Expression Animator</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| padding: 20px; |
| } |
| |
| .container { |
| max-width: 1400px; |
| margin: 0 auto; |
| background: rgba(255, 255, 255, 0.95); |
| border-radius: 20px; |
| padding: 30px; |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); |
| } |
| |
| h1 { |
| text-align: center; |
| color: #333; |
| font-size: 2.5em; |
| margin-bottom: 10px; |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); |
| } |
| |
| .subtitle { |
| text-align: center; |
| color: #666; |
| margin-bottom: 30px; |
| font-size: 1.1em; |
| } |
| |
| .upload-section { |
| background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); |
| padding: 25px; |
| border-radius: 15px; |
| margin-bottom: 30px; |
| text-align: center; |
| border: 3px dashed #ff6b35; |
| } |
| |
| .file-input { |
| margin: 15px 0; |
| } |
| |
| .file-input input[type="file"] { |
| display: none; |
| } |
| |
| .file-label { |
| display: inline-block; |
| padding: 12px 25px; |
| background: #ff6b35; |
| color: white; |
| border-radius: 25px; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| font-weight: bold; |
| } |
| |
| .file-label:hover { |
| background: #e55a2b; |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(229, 90, 43, 0.3); |
| } |
| |
| .animation-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| gap: 25px; |
| margin-top: 30px; |
| } |
| |
| .animation-card { |
| background: white; |
| border-radius: 15px; |
| padding: 20px; |
| text-align: center; |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| transition: all 0.3s ease; |
| border: 2px solid transparent; |
| } |
| |
| .animation-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); |
| border-color: #667eea; |
| } |
| |
| .animation-title { |
| font-size: 1.2em; |
| color: #333; |
| margin-bottom: 15px; |
| font-weight: bold; |
| } |
| |
| .sprite-container { |
| width: 120px; |
| height: 120px; |
| margin: 0 auto 20px; |
| background: #f0f0f0; |
| border-radius: 10px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| overflow: visible; |
| border: 2px solid #ddd; |
| position: relative; |
| } |
| |
| .sprite { |
| max-width: 100%; |
| max-height: 100%; |
| image-rendering: pixelated; |
| } |
| |
| .demo-sprite { |
| width: 80px; |
| height: 80px; |
| background: linear-gradient(45deg, #ff6b6b, #4ecdc4); |
| border-radius: 50%; |
| position: relative; |
| } |
| |
| .demo-sprite::before { |
| content: '🎮'; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| font-size: 2em; |
| } |
| |
| .apply-btn { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: white; |
| border: none; |
| padding: 10px 20px; |
| border-radius: 25px; |
| cursor: pointer; |
| font-weight: bold; |
| transition: all 0.3s ease; |
| width: 100%; |
| } |
| |
| .apply-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); |
| } |
| |
| .apply-btn:disabled { |
| background: #ccc; |
| cursor: not-allowed; |
| transform: none; |
| box-shadow: none; |
| } |
| |
| |
| .idle-bounce { |
| animation: idleBounce 2s ease-in-out infinite; |
| } |
| |
| .happy-bounce { |
| animation: happyBounce 0.6s ease-in-out infinite; |
| } |
| |
| .excited-shake { |
| animation: excitedShake 0.5s ease-in-out infinite; |
| } |
| |
| .sad-droop { |
| animation: sadDroop 3s ease-in-out infinite; |
| } |
| |
| .angry-shake { |
| animation: angryShake 0.3s ease-in-out infinite; |
| } |
| |
| .confused-tilt { |
| animation: confusedTilt 2s ease-in-out infinite; |
| } |
| |
| .sleepy-sway { |
| animation: sleepySway 4s ease-in-out infinite; |
| } |
| |
| .alert-pulse { |
| animation: alertPulse 1s ease-in-out infinite; |
| } |
| |
| .hurt-flash { |
| animation: hurtFlash 0.8s ease-in-out infinite; |
| } |
| |
| .victory-spin { |
| animation: victorySpin 1.5s ease-in-out infinite; |
| } |
| |
| .charging-glow { |
| animation: chargingGlow 1.2s ease-in-out infinite; |
| } |
| |
| .dizzy-wobble { |
| animation: dizzyWobble 1s ease-in-out infinite; |
| } |
| |
| .attack-lunge { |
| animation: attackLunge 1.5s ease-in-out infinite; |
| } |
| |
| .defend-crouch { |
| animation: defendCrouch 2s ease-in-out infinite; |
| } |
| |
| .love-hearts { |
| animation: loveHearts 2s ease-in-out infinite; |
| } |
| |
| .fear-tremble { |
| animation: fearTremble 0.4s ease-in-out infinite; |
| } |
| |
| .evolving-glow { |
| animation: evolvingGlow 2s ease-in-out infinite; |
| } |
| |
| .fainting-fall { |
| animation: faintingFall 3s ease-in-out infinite; |
| } |
| |
| .turn-left { |
| animation: turnLeft 2s ease-in-out infinite; |
| } |
| |
| .turn-right { |
| animation: turnRight 2s ease-in-out infinite; |
| } |
| |
| .look-around { |
| animation: lookAround 4s ease-in-out infinite; |
| } |
| |
| .confetti-effect { |
| animation: confettiSpin 2s ease-in-out infinite; |
| } |
| |
| .hearts-float { |
| animation: heartsFloat 3s ease-in-out infinite; |
| } |
| |
| .lightning-strike { |
| animation: lightningStrike 1.5s ease-in-out infinite; |
| } |
| |
| .sparkle-magic { |
| animation: sparkleMagic 2s ease-in-out infinite; |
| } |
| |
| .fire-burst { |
| animation: fireBurst 1.8s ease-in-out infinite; |
| } |
| |
| .ice-crystals { |
| animation: iceCrystals 2.5s ease-in-out infinite; |
| } |
| |
| .poison-bubbles { |
| animation: poisonBubbles 3s ease-in-out infinite; |
| } |
| |
| .healing-aura { |
| animation: healingAura 2.8s ease-in-out infinite; |
| } |
| |
| |
| .particles { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| overflow: visible; |
| } |
| |
| .particle { |
| position: absolute; |
| border-radius: 50%; |
| } |
| |
| .confetti-particle { |
| width: 6px; |
| height: 6px; |
| animation: confettifall 2s linear infinite; |
| } |
| |
| .heart-particle { |
| width: 12px; |
| height: 12px; |
| animation: heartFloat 3s ease-in-out infinite; |
| color: #ff69b4; |
| } |
| |
| .heart-particle::before { |
| content: '💖'; |
| font-size: 12px; |
| } |
| |
| .lightning-particle { |
| width: 2px; |
| height: 20px; |
| background: linear-gradient(to bottom, #ffff00, #4169e1); |
| animation: lightningFlash 0.3s ease-in-out infinite; |
| border-radius: 1px; |
| } |
| |
| .sparkle-particle { |
| width: 4px; |
| height: 4px; |
| background: #ffd700; |
| animation: sparkleShine 1.5s ease-in-out infinite; |
| box-shadow: 0 0 6px #ffd700; |
| } |
| |
| .fire-particle { |
| width: 8px; |
| height: 8px; |
| background: radial-gradient(circle, #ff4500, #ff8c00); |
| animation: fireRise 1.8s ease-out infinite; |
| } |
| |
| .ice-particle { |
| width: 6px; |
| height: 6px; |
| background: linear-gradient(45deg, #00bfff, #87ceeb); |
| animation: iceFall 2.5s linear infinite; |
| transform: rotate(45deg); |
| } |
| |
| .poison-particle { |
| width: 10px; |
| height: 10px; |
| background: radial-gradient(circle, #9932cc, #8b008b); |
| animation: poisonBubble 3s ease-in-out infinite; |
| } |
| |
| .heal-particle { |
| width: 5px; |
| height: 5px; |
| background: radial-gradient(circle, #32cd32, #90ee90); |
| animation: healFloat 2.8s ease-in-out infinite; |
| box-shadow: 0 0 8px #32cd32; |
| } |
| |
| |
| @keyframes idleBounce { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-8px); } |
| } |
| |
| @keyframes happyBounce { |
| 0%, 100% { transform: translateY(0px) scale(1); } |
| 50% { transform: translateY(-15px) scale(1.1); } |
| } |
| |
| @keyframes excitedShake { |
| 0%, 100% { transform: translateX(0px); } |
| 25% { transform: translateX(-5px) rotate(-2deg); } |
| 75% { transform: translateX(5px) rotate(2deg); } |
| } |
| |
| @keyframes sadDroop { |
| 0%, 100% { transform: translateY(0px) scaleY(1); } |
| 50% { transform: translateY(10px) scaleY(0.9); } |
| } |
| |
| @keyframes angryShake { |
| 0%, 100% { transform: translateX(0px); } |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); } |
| 20%, 40%, 60%, 80% { transform: translateX(3px); } |
| } |
| |
| @keyframes confusedTilt { |
| 0%, 100% { transform: rotate(0deg); } |
| 25% { transform: rotate(-10deg); } |
| 75% { transform: rotate(10deg); } |
| } |
| |
| @keyframes sleepySway { |
| 0%, 100% { transform: rotate(0deg) translateY(0px); } |
| 25% { transform: rotate(-5deg) translateY(5px); } |
| 75% { transform: rotate(5deg) translateY(5px); } |
| } |
| |
| @keyframes alertPulse { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.15); } |
| } |
| |
| @keyframes hurtFlash { |
| 0%, 100% { opacity: 1; filter: brightness(1); } |
| 50% { opacity: 0.7; filter: brightness(1.5) hue-rotate(0deg); } |
| } |
| |
| @keyframes victorySpin { |
| 0% { transform: rotate(0deg) scale(1); } |
| 50% { transform: rotate(180deg) scale(1.2); } |
| 100% { transform: rotate(360deg) scale(1); } |
| } |
| |
| @keyframes chargingGlow { |
| 0%, 100% { filter: brightness(1) saturate(1); transform: scale(1); } |
| 50% { filter: brightness(1.3) saturate(1.5); transform: scale(1.05); } |
| } |
| |
| @keyframes dizzyWobble { |
| 0%, 100% { transform: rotate(0deg); } |
| 25% { transform: rotate(-15deg) translateX(-5px); } |
| 50% { transform: rotate(0deg) translateX(0px); } |
| 75% { transform: rotate(15deg) translateX(5px); } |
| } |
| |
| @keyframes attackLunge { |
| 0%, 100% { transform: translateX(0px) scaleX(1); } |
| 30% { transform: translateX(-10px) scaleX(0.9); } |
| 60% { transform: translateX(15px) scaleX(1.1); } |
| } |
| |
| @keyframes defendCrouch { |
| 0%, 100% { transform: scaleY(1) translateY(0px); } |
| 50% { transform: scaleY(0.8) translateY(10px); } |
| } |
| |
| @keyframes loveHearts { |
| 0%, 100% { transform: scale(1); filter: hue-rotate(0deg); } |
| 50% { transform: scale(1.1); filter: hue-rotate(20deg); } |
| } |
| |
| @keyframes fearTremble { |
| 0%, 100% { transform: translateX(0px) translateY(0px); } |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-2px) translateY(-1px); } |
| 20%, 40%, 60%, 80% { transform: translateX(2px) translateY(1px); } |
| } |
| |
| @keyframes evolvingGlow { |
| 0%, 100% { |
| filter: brightness(1) contrast(1); |
| transform: scale(1); |
| } |
| 50% { |
| filter: brightness(1.5) contrast(1.2); |
| transform: scale(1.1); |
| } |
| } |
| |
| @keyframes faintingFall { |
| 0%, 70% { transform: rotate(0deg) translateY(0px); opacity: 1; } |
| 100% { transform: rotate(90deg) translateY(20px); opacity: 0.3; } |
| } |
| |
| |
| @keyframes turnLeft { |
| 0%, 100% { transform: scaleX(1); } |
| 50% { transform: scaleX(-1); } |
| } |
| |
| @keyframes turnRight { |
| 0%, 100% { transform: scaleX(-1); } |
| 50% { transform: scaleX(1); } |
| } |
| |
| @keyframes lookAround { |
| 0%, 100% { transform: scaleX(1); } |
| 25% { transform: scaleX(-1); } |
| 50% { transform: scaleX(1); } |
| 75% { transform: scaleX(-1); } |
| } |
| |
| |
| @keyframes confettiSpin { |
| 0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); } |
| 50% { transform: translateY(-10px) rotate(180deg) scale(1.1); } |
| } |
| |
| @keyframes heartsFloat { |
| 0%, 100% { transform: translateY(0px) scale(1); } |
| 50% { transform: translateY(-8px) scale(1.05); } |
| } |
| |
| @keyframes lightningStrike { |
| 0%, 90%, 100% { filter: brightness(1) contrast(1); } |
| 10%, 20%, 30% { filter: brightness(2) contrast(1.5) hue-rotate(60deg); } |
| } |
| |
| @keyframes sparkleMagic { |
| 0%, 100% { transform: rotate(0deg) scale(1); filter: brightness(1); } |
| 50% { transform: rotate(180deg) scale(1.1); filter: brightness(1.3); } |
| } |
| |
| @keyframes fireBurst { |
| 0%, 100% { transform: scale(1); filter: hue-rotate(0deg) brightness(1); } |
| 50% { transform: scale(1.1); filter: hue-rotate(30deg) brightness(1.2); } |
| } |
| |
| @keyframes iceCrystals { |
| 0%, 100% { transform: rotate(0deg) scale(1); filter: brightness(1) saturate(1); } |
| 50% { transform: rotate(180deg) scale(1.05); filter: brightness(1.2) saturate(1.3); } |
| } |
| |
| @keyframes poisonBubbles { |
| 0%, 100% { transform: translateY(0px) scale(1); filter: hue-rotate(0deg); } |
| 50% { transform: translateY(-5px) scale(1.03); filter: hue-rotate(30deg); } |
| } |
| |
| @keyframes healingAura { |
| 0%, 100% { transform: scale(1); filter: brightness(1) saturate(1); } |
| 50% { transform: scale(1.05); filter: brightness(1.2) saturate(1.4); } |
| } |
| |
| |
| @keyframes confettifall { |
| 0% { |
| transform: translateY(-20px) rotate(0deg); |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(140px) rotate(360deg); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes heartFloat { |
| 0% { |
| transform: translateY(20px) scale(0.5); |
| opacity: 0; |
| } |
| 50% { |
| opacity: 1; |
| transform: translateY(-10px) scale(1); |
| } |
| 100% { |
| transform: translateY(-40px) scale(0.8); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes lightningFlash { |
| 0%, 100% { opacity: 0; } |
| 50% { opacity: 1; } |
| } |
| |
| @keyframes sparkleShine { |
| 0%, 100% { |
| transform: scale(0.5) rotate(0deg); |
| opacity: 0.5; |
| } |
| 50% { |
| transform: scale(1.2) rotate(180deg); |
| opacity: 1; |
| } |
| } |
| |
| @keyframes fireRise { |
| 0% { |
| transform: translateY(20px) scale(1); |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(-30px) scale(0.3); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes iceFall { |
| 0% { |
| transform: translateY(-20px) rotate(45deg) scale(1); |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(140px) rotate(405deg) scale(0.5); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes poisonBubble { |
| 0% { |
| transform: translateY(20px) scale(0.5); |
| opacity: 0.7; |
| } |
| 50% { |
| transform: translateY(0px) scale(1); |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(-20px) scale(0.3); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes healFloat { |
| 0% { |
| transform: translateY(10px) scale(0.5); |
| opacity: 0.5; |
| } |
| 50% { |
| transform: translateY(-5px) scale(1); |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(-20px) scale(0.7); |
| opacity: 0; |
| } |
| } |
| |
| .description { |
| font-size: 0.9em; |
| color: #666; |
| margin-bottom: 15px; |
| line-height: 1.4; |
| } |
| |
| .controls { |
| display: flex; |
| gap: 10px; |
| margin-top: 15px; |
| } |
| |
| .speed-control { |
| flex: 1; |
| } |
| |
| .speed-control select { |
| width: 100%; |
| padding: 5px; |
| border: 1px solid #ddd; |
| border-radius: 5px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>🎮 Pokemon Sprite Expression Animator</h1> |
| <p class="subtitle">Upload your sprite and test various Pokemon-style animations</p> |
| |
| <div class="upload-section"> |
| <h3>Upload Your Sprite</h3> |
| <div class="file-input"> |
| <label for="sprite-upload" class="file-label">Choose Sprite Image</label> |
| <input type="file" id="sprite-upload" accept="image/*"> |
| </div> |
| <p>Supports PNG, JPG, GIF - Best results with square sprites (64x64 to 256x256px)</p> |
| </div> |
|
|
| <div class="animation-grid" id="animationGrid"> |
| |
| </div> |
| </div> |
|
|
| <script> |
| const animations = [ |
| { |
| name: 'Idle Bounce', |
| class: 'idle-bounce', |
| description: 'Gentle up-down bounce for idle state' |
| }, |
| { |
| name: 'Happy Bounce', |
| class: 'happy-bounce', |
| description: 'Excited bouncing with slight scaling' |
| }, |
| { |
| name: 'Excited Shake', |
| class: 'excited-shake', |
| description: 'Side-to-side shake with rotation' |
| }, |
| { |
| name: 'Sad Droop', |
| class: 'sad-droop', |
| description: 'Slow drooping motion with vertical squash' |
| }, |
| { |
| name: 'Angry Shake', |
| class: 'angry-shake', |
| description: 'Rapid horizontal shaking' |
| }, |
| { |
| name: 'Confused Tilt', |
| class: 'confused-tilt', |
| description: 'Side-to-side head tilting motion' |
| }, |
| { |
| name: 'Sleepy Sway', |
| class: 'sleepy-sway', |
| description: 'Slow swaying with slight rotation' |
| }, |
| { |
| name: 'Alert Pulse', |
| class: 'alert-pulse', |
| description: 'Quick scaling pulse for attention' |
| }, |
| { |
| name: 'Hurt Flash', |
| class: 'hurt-flash', |
| description: 'Opacity and brightness flashing' |
| }, |
| { |
| name: 'Victory Spin', |
| class: 'victory-spin', |
| description: 'Full rotation with scaling' |
| }, |
| { |
| name: 'Charging Glow', |
| class: 'charging-glow', |
| description: 'Brightness and saturation increase' |
| }, |
| { |
| name: 'Dizzy Wobble', |
| class: 'dizzy-wobble', |
| description: 'Unsteady wobbling motion' |
| }, |
| { |
| name: 'Attack Lunge', |
| class: 'attack-lunge', |
| description: 'Forward lunge motion with stretch' |
| }, |
| { |
| name: 'Defend Crouch', |
| class: 'defend-crouch', |
| description: 'Defensive crouching animation' |
| }, |
| { |
| name: 'Love Hearts', |
| class: 'love-hearts', |
| description: 'Gentle scaling with color shift' |
| }, |
| { |
| name: 'Fear Tremble', |
| class: 'fear-tremble', |
| description: 'Rapid small trembling motion' |
| }, |
| { |
| name: 'Evolving Glow', |
| class: 'evolving-glow', |
| description: 'Mystical glowing evolution effect' |
| }, |
| { |
| name: 'Fainting Fall', |
| class: 'fainting-fall', |
| description: 'Rotation and fade for fainting' |
| }, |
| { |
| name: 'Turn Left', |
| class: 'turn-left', |
| description: 'Smooth horizontal flip to face left' |
| }, |
| { |
| name: 'Turn Right', |
| class: 'turn-right', |
| description: 'Smooth horizontal flip to face right' |
| }, |
| { |
| name: 'Look Around', |
| class: 'look-around', |
| description: 'Turn left and right alternately' |
| }, |
| { |
| name: 'Confetti Celebration', |
| class: 'confetti-effect', |
| description: 'Victory with colorful confetti particles', |
| hasParticles: true |
| }, |
| { |
| name: 'Love Hearts Float', |
| class: 'hearts-float', |
| description: 'Floating heart particles around sprite', |
| hasParticles: true |
| }, |
| { |
| name: 'Lightning Strike', |
| class: 'lightning-strike', |
| description: 'Electric attack with lightning effects', |
| hasParticles: true |
| }, |
| { |
| name: 'Sparkle Magic', |
| class: 'sparkle-magic', |
| description: 'Magical sparkles surrounding sprite', |
| hasParticles: true |
| }, |
| { |
| name: 'Fire Burst', |
| class: 'fire-burst', |
| description: 'Fire attack with flame particles', |
| hasParticles: true |
| }, |
| { |
| name: 'Ice Crystals', |
| class: 'ice-crystals', |
| description: 'Ice attack with crystal particles', |
| hasParticles: true |
| }, |
| { |
| name: 'Poison Bubbles', |
| class: 'poison-bubbles', |
| description: 'Toxic bubbles floating around', |
| hasParticles: true |
| }, |
| { |
| name: 'Healing Aura', |
| class: 'healing-aura', |
| description: 'Gentle healing particles', |
| hasParticles: true |
| } |
| ]; |
| |
| let uploadedImage = null; |
| |
| function createAnimationCard(animation) { |
| const particleHTML = animation.hasParticles ? '<div class="particles" id="particles-' + animation.class + '"></div>' : ''; |
| |
| return ` |
| <div class="animation-card"> |
| <div class="animation-title">${animation.name}</div> |
| <div class="sprite-container"> |
| ${uploadedImage |
| ? `<img src="${uploadedImage}" class="sprite ${animation.class}" alt="Animated sprite">` |
| : `<div class="demo-sprite ${animation.class}"></div>` |
| } |
| ${particleHTML} |
| </div> |
| <div class="description">${animation.description}</div> |
| <div class="controls"> |
| <div class="speed-control"> |
| <select onchange="changeSpeed(this, '${animation.class}')"> |
| <option value="0.5">2x Speed</option> |
| <option value="1" selected>Normal</option> |
| <option value="1.5">0.75x Speed</option> |
| <option value="2">0.5x Speed</option> |
| </select> |
| </div> |
| </div> |
| <button class="apply-btn" onclick="copyCSS('${animation.class}')"> |
| Copy CSS |
| </button> |
| </div> |
| `; |
| } |
| |
| function renderAnimations() { |
| const grid = document.getElementById('animationGrid'); |
| grid.innerHTML = animations.map(createAnimationCard).join(''); |
| |
| |
| animations.forEach(animation => { |
| if (animation.hasParticles) { |
| initializeParticles(animation.class); |
| } |
| }); |
| } |
| |
| function initializeParticles(animationClass) { |
| const particleContainer = document.getElementById(`particles-${animationClass}`); |
| if (!particleContainer) return; |
| |
| |
| particleContainer.innerHTML = ''; |
| |
| const particleConfigs = { |
| 'confetti-effect': { |
| count: 8, |
| type: 'confetti', |
| colors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7', '#dda0dd'] |
| }, |
| 'hearts-float': { |
| count: 6, |
| type: 'heart' |
| }, |
| 'lightning-strike': { |
| count: 5, |
| type: 'lightning' |
| }, |
| 'sparkle-magic': { |
| count: 12, |
| type: 'sparkle' |
| }, |
| 'fire-burst': { |
| count: 8, |
| type: 'fire' |
| }, |
| 'ice-crystals': { |
| count: 10, |
| type: 'ice' |
| }, |
| 'poison-bubbles': { |
| count: 6, |
| type: 'poison' |
| }, |
| 'healing-aura': { |
| count: 8, |
| type: 'heal' |
| } |
| }; |
| |
| const config = particleConfigs[animationClass]; |
| if (!config) return; |
| |
| for (let i = 0; i < config.count; i++) { |
| const particle = document.createElement('div'); |
| particle.className = `particle ${config.type}-particle`; |
| |
| |
| const angle = (360 / config.count) * i + Math.random() * 45; |
| const radius = 40 + Math.random() * 20; |
| const x = 50 + Math.cos(angle * Math.PI / 180) * radius; |
| const y = 50 + Math.sin(angle * Math.PI / 180) * radius; |
| |
| particle.style.left = x + '%'; |
| particle.style.top = y + '%'; |
| |
| |
| particle.style.animationDelay = Math.random() * 2 + 's'; |
| |
| |
| if (config.type === 'confetti' && config.colors) { |
| particle.style.backgroundColor = config.colors[Math.floor(Math.random() * config.colors.length)]; |
| } |
| |
| particleContainer.appendChild(particle); |
| } |
| } |
| |
| function changeSpeed(select, animationClass) { |
| const multiplier = parseFloat(select.value); |
| const elements = document.querySelectorAll(`.${animationClass}`); |
| elements.forEach(el => { |
| el.style.animationDuration = `${getOriginalDuration(animationClass) * multiplier}s`; |
| }); |
| } |
| |
| function getOriginalDuration(animationClass) { |
| const durations = { |
| 'idle-bounce': 2, |
| 'happy-bounce': 0.6, |
| 'excited-shake': 0.5, |
| 'sad-droop': 3, |
| 'angry-shake': 0.3, |
| 'confused-tilt': 2, |
| 'sleepy-sway': 4, |
| 'alert-pulse': 1, |
| 'hurt-flash': 0.8, |
| 'victory-spin': 1.5, |
| 'charging-glow': 1.2, |
| 'dizzy-wobble': 1, |
| 'attack-lunge': 1.5, |
| 'defend-crouch': 2, |
| 'love-hearts': 2, |
| 'fear-tremble': 0.4, |
| 'evolving-glow': 2, |
| 'fainting-fall': 3, |
| 'turn-left': 2, |
| 'turn-right': 2, |
| 'look-around': 4, |
| 'confetti-effect': 2, |
| 'hearts-float': 3, |
| 'lightning-strike': 1.5, |
| 'sparkle-magic': 2, |
| 'fire-burst': 1.8, |
| 'ice-crystals': 2.5, |
| 'poison-bubbles': 3, |
| 'healing-aura': 2.8 |
| }; |
| return durations[animationClass] || 1; |
| } |
| |
| function copyCSS(animationClass) { |
| const cssMap = { |
| 'idle-bounce': `.idle-bounce { |
| animation: idleBounce 2s ease-in-out infinite; |
| } |
| |
| @keyframes idleBounce { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-8px); } |
| }`, |
| 'happy-bounce': `.happy-bounce { |
| animation: happyBounce 0.6s ease-in-out infinite; |
| } |
| |
| @keyframes happyBounce { |
| 0%, 100% { transform: translateY(0px) scale(1); } |
| 50% { transform: translateY(-15px) scale(1.1); } |
| }`, |
| 'excited-shake': `.excited-shake { |
| animation: excitedShake 0.5s ease-in-out infinite; |
| } |
| |
| @keyframes excitedShake { |
| 0%, 100% { transform: translateX(0px); } |
| 25% { transform: translateX(-5px) rotate(-2deg); } |
| 75% { transform: translateX(5px) rotate(2deg); } |
| }`, |
| 'sad-droop': `.sad-droop { |
| animation: sadDroop 3s ease-in-out infinite; |
| } |
| |
| @keyframes sadDroop { |
| 0%, 100% { transform: translateY(0px) scaleY(1); } |
| 50% { transform: translateY(10px) scaleY(0.9); } |
| }`, |
| 'angry-shake': `.angry-shake { |
| animation: angryShake 0.3s ease-in-out infinite; |
| } |
| |
| @keyframes angryShake { |
| 0%, 100% { transform: translateX(0px); } |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); } |
| 20%, 40%, 60%, 80% { transform: translateX(3px); } |
| }`, |
| 'confused-tilt': `.confused-tilt { |
| animation: confusedTilt 2s ease-in-out infinite; |
| } |
| |
| @keyframes confusedTilt { |
| 0%, 100% { transform: rotate(0deg); } |
| 25% { transform: rotate(-10deg); } |
| 75% { transform: rotate(10deg); } |
| }`, |
| 'sleepy-sway': `.sleepy-sway { |
| animation: sleepySway 4s ease-in-out infinite; |
| } |
| |
| @keyframes sleepySway { |
| 0%, 100% { transform: rotate(0deg) translateY(0px); } |
| 25% { transform: rotate(-5deg) translateY(5px); } |
| 75% { transform: rotate(5deg) translateY(5px); } |
| }`, |
| 'alert-pulse': `.alert-pulse { |
| animation: alertPulse 1s ease-in-out infinite; |
| } |
| |
| @keyframes alertPulse { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.15); } |
| }`, |
| 'hurt-flash': `.hurt-flash { |
| animation: hurtFlash 0.8s ease-in-out infinite; |
| } |
| |
| @keyframes hurtFlash { |
| 0%, 100% { opacity: 1; filter: brightness(1); } |
| 50% { opacity: 0.7; filter: brightness(1.5); } |
| }`, |
| 'victory-spin': `.victory-spin { |
| animation: victorySpin 1.5s ease-in-out infinite; |
| } |
| |
| @keyframes victorySpin { |
| 0% { transform: rotate(0deg) scale(1); } |
| 50% { transform: rotate(180deg) scale(1.2); } |
| 100% { transform: rotate(360deg) scale(1); } |
| }`, |
| 'charging-glow': `.charging-glow { |
| animation: chargingGlow 1.2s ease-in-out infinite; |
| } |
| |
| @keyframes chargingGlow { |
| 0%, 100% { filter: brightness(1) saturate(1); transform: scale(1); } |
| 50% { filter: brightness(1.3) saturate(1.5); transform: scale(1.05); } |
| }`, |
| 'dizzy-wobble': `.dizzy-wobble { |
| animation: dizzyWobble 1s ease-in-out infinite; |
| } |
| |
| @keyframes dizzyWobble { |
| 0%, 100% { transform: rotate(0deg); } |
| 25% { transform: rotate(-15deg) translateX(-5px); } |
| 50% { transform: rotate(0deg) translateX(0px); } |
| 75% { transform: rotate(15deg) translateX(5px); } |
| }`, |
| 'attack-lunge': `.attack-lunge { |
| animation: attackLunge 1.5s ease-in-out infinite; |
| } |
| |
| @keyframes attackLunge { |
| 0%, 100% { transform: translateX(0px) scaleX(1); } |
| 30% { transform: translateX(-10px) scaleX(0.9); } |
| 60% { transform: translateX(15px) scaleX(1.1); } |
| }`, |
| 'defend-crouch': `.defend-crouch { |
| animation: defendCrouch 2s ease-in-out infinite; |
| } |
| |
| @keyframes defendCrouch { |
| 0%, 100% { transform: scaleY(1) translateY(0px); } |
| 50% { transform: scaleY(0.8) translateY(10px); } |
| }`, |
| 'love-hearts': `.love-hearts { |
| animation: loveHearts 2s ease-in-out infinite; |
| } |
| |
| @keyframes loveHearts { |
| 0%, 100% { transform: scale(1); filter: hue-rotate(0deg); } |
| 50% { transform: scale(1.1); filter: hue-rotate(20deg); } |
| }`, |
| 'fear-tremble': `.fear-tremble { |
| animation: fearTremble 0.4s ease-in-out infinite; |
| } |
| |
| @keyframes fearTremble { |
| 0%, 100% { transform: translateX(0px) translateY(0px); } |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-2px) translateY(-1px); } |
| 20%, 40%, 60%, 80% { transform: translateX(2px) translateY(1px); } |
| }`, |
| 'evolving-glow': `.evolving-glow { |
| animation: evolvingGlow 2s ease-in-out infinite; |
| } |
| |
| @keyframes evolvingGlow { |
| 0%, 100% { |
| filter: brightness(1) contrast(1); |
| transform: scale(1); |
| } |
| 50% { |
| filter: brightness(1.5) contrast(1.2); |
| transform: scale(1.1); |
| } |
| }`, |
| 'fainting-fall': `.fainting-fall { |
| animation: faintingFall 3s ease-in-out infinite; |
| } |
| |
| @keyframes faintingFall { |
| 0%, 70% { transform: rotate(0deg) translateY(0px); opacity: 1; } |
| 100% { transform: rotate(90deg) translateY(20px); opacity: 0.3; } |
| }` |
| }; |
| |
| const css = cssMap[animationClass]; |
| if (css) { |
| navigator.clipboard.writeText(css).then(() => { |
| alert('CSS copied to clipboard!'); |
| }).catch(() => { |
| const textArea = document.createElement('textarea'); |
| textArea.value = css; |
| document.body.appendChild(textArea); |
| textArea.select(); |
| document.execCommand('copy'); |
| document.body.removeChild(textArea); |
| alert('CSS copied to clipboard!'); |
| }); |
| } |
| } |
| |
| |
| document.getElementById('sprite-upload').addEventListener('change', function(e) { |
| const file = e.target.files[0]; |
| if (file) { |
| const reader = new FileReader(); |
| reader.onload = function(e) { |
| uploadedImage = e.target.result; |
| renderAnimations(); |
| }; |
| reader.readAsDataURL(file); |
| } |
| }); |
| |
| |
| renderAnimations(); |
| </script> |
| </body> |
| </html> |
