Migrate animation system to unified anime.js framework
- Replace CSS transitions with anime.js for all card animations - Create card-animations.js as single source for all animation logic - Remove draw-animations.js (merged into card-animations.js) - Strip CSS transitions from card elements to prevent conflicts - Fix held card appearing before draw animation completes - Make opponent/CPU animations match local player behavior - Add subtle shake effect for turn indicator (replaces brightness pulse) - Speed up flip animations by 30% for snappier feel - Remove unnecessary pulse effects after draws/swaps Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -30,8 +30,8 @@ const TIMING = {
|
||||
|
||||
// UI feedback durations (milliseconds)
|
||||
feedback: {
|
||||
drawPulse: 300, // Draw pile highlight duration
|
||||
discardLand: 300, // Discard land effect duration
|
||||
drawPulse: 375, // Draw pile highlight duration (25% slower for clear sequencing)
|
||||
discardLand: 375, // Discard land effect duration (25% slower)
|
||||
cardFlipIn: 300, // Card flip-in effect duration
|
||||
statusMessage: 2000, // Toast/status message duration
|
||||
copyConfirm: 2000, // Copy button confirmation duration
|
||||
@@ -43,6 +43,21 @@ const TIMING = {
|
||||
cpuConsidering: 1500, // CPU considering pulse cycle
|
||||
},
|
||||
|
||||
// Anime.js animation configuration
|
||||
anime: {
|
||||
easing: {
|
||||
flip: 'easeInOutQuad',
|
||||
move: 'easeOutCubic',
|
||||
lift: 'easeOutQuad',
|
||||
pulse: 'easeInOutSine',
|
||||
},
|
||||
loop: {
|
||||
turnPulse: { duration: 2000 },
|
||||
cpuThinking: { duration: 1500 },
|
||||
initialFlipGlow: { duration: 1500 },
|
||||
}
|
||||
},
|
||||
|
||||
// Card manager specific
|
||||
cardManager: {
|
||||
flipDuration: 400, // Card flip animation
|
||||
|
||||
Reference in New Issue
Block a user