--- name: WordPress Dynamic Animation overview: "پیاده‌سازی انیمیشن پیشرفته برای بخش وردپرس با Canvas: لوگوی وردپرس با چرخ‌دنده‌های چرخان، ذرات نورانی، حلقه‌های انیمیت‌شده و افکت‌های glow سه‌بعدی" todos: - id: create-canvas-script content: ایجاد wordpress_canvas_script با سیستم particle، چرخ‌دنده‌ها و انیمیشن‌ها status: completed - id: replace-logo content: جایگزینی SVG لوگوی وردپرس با Canvas element در wordpress_cloud_highlight() status: completed dependencies: - create-canvas-script - id: add-script-injection content: اضافه کردن rx.script() برای inject کردن wordpress_canvas_script status: completed dependencies: - create-canvas-script - id: test-animation content: "تست انیمیشن: smoothness، performance، responsive" status: completed dependencies: - replace-logo - add-script-injection - id: fine-tune content: تنظیم دقیق رنگ‌ها، سرعت‌ها و افکت‌های glow status: in_progress dependencies: - test-animation --- # پیاده‌سازی انیمیشن پیشرفته وردپرس ## معماری انیمیشن ```mermaid flowchart TD Canvas[Canvas Element] --> AnimLoop[Animation Loop] AnimLoop --> WPLogo[WordPress Logo Center] AnimLoop --> Gears[Rotating Gears] AnimLoop --> Particles[Light Particles] AnimLoop --> Rings[Rotating Rings] AnimLoop --> GlowFX[Glow Effects] WPLogo --> DrawLogo[Draw WordPress W] Gears --> Gear1[Gear Top] Gears --> Gear2[Gear Right] Gears --> Gear3[Gear Bottom] Particles --> System[Particle System] System --> Spawn[Spawn Particles] System --> Move[Move Along Path] System --> Fade[Fade In/Out] Rings --> Ring1[Outer Ring] Rings --> Ring2[Middle Ring] GlowFX --> RadialGlow[Radial Gradient] GlowFX --> LightTrails[Light Trails] ``` ## تغییرات مورد نیاز ### 1. ایجاد WordPress Canvas Animation Script **فایل**: [`src/presentation/web/pages/landing/index.py`](src/presentation/web/pages/landing/index.py)ایجاد یک اسکریپت JavaScript جدید بعد از `binary_rain_script`: ```javascript wordpress_canvas_script = """ (function() { function initWordPressAnimation() { const canvas = document.getElementById('wordpress-canvas'); if (!canvas) return; const ctx = canvas.getContext('2d'); const rect = canvas.parentElement.getBoundingClientRect(); canvas.width = rect.width; canvas.height = rect.height; // متغیرهای انیمیشن let time = 0; const centerX = canvas.width / 2; const centerY = canvas.height / 2; // سیستم ذرات نورانی class Particle { constructor(angle, distance, speed) { this.angle = angle; this.distance = distance; this.speed = speed; this.opacity = Math.random(); this.size = Math.random() * 3 + 1; } update() { this.angle += this.speed; this.opacity = (Math.sin(time * 2 + this.angle) + 1) / 2; } draw(ctx, cx, cy) { const x = cx + Math.cos(this.angle) * this.distance; const y = cy + Math.sin(this.angle) * this.distance; ctx.save(); ctx.globalAlpha = this.opacity; const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.size * 3); gradient.addColorStop(0, '#F59E0B'); gradient.addColorStop(1, 'transparent'); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(x, y, this.size * 3, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } } // ایجاد ذرات const particles = []; for (let i = 0; i < 50; i++) { particles.push(new Particle( Math.random() * Math.PI * 2, 120 + Math.random() * 80, (Math.random() - 0.5) * 0.02 )); } // تابع رسم چرخ‌دنده function drawGear(ctx, x, y, radius, teeth, rotation) { ctx.save(); ctx.translate(x, y); ctx.rotate(rotation); // رسم چرخ‌دنده با gradient const gradient = ctx.createRadialGradient(0, 0, radius * 0.5, 0, 0, radius); gradient.addColorStop(0, '#FB923C'); gradient.addColorStop(1, '#F97316'); ctx.fillStyle = gradient; ctx.strokeStyle = '#EA580C'; ctx.lineWidth = 2; ctx.beginPath(); for (let i = 0; i < teeth; i++) { const angle = (i / teeth) * Math.PI * 2; const outerRadius = radius; const innerRadius = radius * 0.7; ctx.lineTo( Math.cos(angle) * outerRadius, Math.sin(angle) * outerRadius ); ctx.lineTo( Math.cos(angle + Math.PI / teeth) * innerRadius, Math.sin(angle + Math.PI / teeth) * innerRadius ); } ctx.closePath(); ctx.fill(); ctx.stroke(); // دایره مرکزی ctx.fillStyle = '#1F2937'; ctx.beginPath(); ctx.arc(0, 0, radius * 0.3, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } // تابع رسم لوگوی وردپرس function drawWordPressLogo(ctx, x, y, size, rotation) { ctx.save(); ctx.translate(x, y); ctx.rotate(rotation); ctx.scale(size / 100, size / 100); // رسم W وردپرس (ساده‌شده) ctx.fillStyle = '#FFFFFF'; ctx.font = 'bold 80px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('W', 0, 0); // دایره دور W ctx.strokeStyle = '#FFFFFF'; ctx.lineWidth = 8; ctx.beginPath(); ctx.arc(0, 0, 60, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); } // حلقه انیمیشن اصلی function animate() { time += 0.016; // پاک کردن canvas ctx.fillStyle = 'transparent'; ctx.clearRect(0, 0, canvas.width, canvas.height); // رسم glow پس‌زمینه const bgGradient = ctx.createRadialGradient( centerX, centerY, 0, centerX, centerY, 250 ); bgGradient.addColorStop(0, 'rgba(245, 158, 11, 0.3)'); bgGradient.addColorStop(0.5, 'rgba(251, 146, 60, 0.15)'); bgGradient.addColorStop(1, 'transparent'); ctx.fillStyle = bgGradient; ctx.fillRect(0, 0, canvas.width, canvas.height); // رسم حلقه‌های چرخان ctx.save(); ctx.strokeStyle = 'rgba(245, 158, 11, 0.4)'; ctx.lineWidth = 2; ctx.setLineDash([10, 10]); ctx.lineDashOffset = -time * 50; ctx.beginPath(); ctx.arc(centerX, centerY, 180, 0, Math.PI * 2); ctx.stroke(); ctx.lineDashOffset = time * 50; ctx.beginPath(); ctx.arc(centerX, centerY, 220, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); // رسم و بروزرسانی ذرات particles.forEach(p => { p.update(); p.draw(ctx, centerX, centerY); }); // رسم چرخ‌دنده‌ها drawGear(ctx, centerX - 100, centerY - 100, 40, 8, time * 0.5); drawGear(ctx, centerX + 100, centerY - 80, 35, 6, -time * 0.7); drawGear(ctx, centerX + 90, centerY + 100, 38, 7, time * 0.6); // رسم لوگوی وردپرس مرکزی با pulsing const logoScale = 100 + Math.sin(time * 2) * 5; drawWordPressLogo(ctx, centerX, centerY, logoScale, Math.sin(time) * 0.1); // افکت glow اضافی روی لوگو ctx.save(); ctx.globalCompositeOperation = 'screen'; const logoGlow = ctx.createRadialGradient( centerX, centerY, 50, centerX, centerY, 120 ); logoGlow.addColorStop(0, 'rgba(251, 191, 36, 0.8)'); logoGlow.addColorStop(1, 'transparent'); ctx.fillStyle = logoGlow; ctx.fillRect(centerX - 120, centerY - 120, 240, 240); ctx.restore(); requestAnimationFrame(animate); } animate(); // Handle resize window.addEventListener('resize', () => { const rect = canvas.parentElement.getBoundingClientRect(); canvas.width = rect.width; canvas.height = rect.height; }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initWordPressAnimation); } else { initWordPressAnimation(); } })(); """ ``` ### 2. جایگذاری Canvas در بخش WordPress **فایل**: [`src/presentation/web/pages/landing/index.py`](src/presentation/web/pages/landing/index.py)در تابع `wordpress_cloud_highlight()`: - جایگزینی SVG لوگوی فعلی با Canvas element - افزودن script tag برای اجرای انیمیشن ```python # قبل از لوگوی مرکزی، اضافه کردن script rx.script(wordpress_canvas_script), # جایگزینی بخش لوگوی وردپرس rx.box( rx.html(''), position="relative", width="600px", height="600px", display="flex", align_items="center", justify_content="center", ) ``` ### 3. بهبود استایل و Performance - اضافه کردن `will-change: transform` برای بهینه‌سازی - استفاده از `requestAnimationFrame` برای انیمیشن روان - کنترل FPS برای دستگاه‌های ضعیف‌تر ## نکات تکنیکی 1. **ذرات نورانی**: از Particle System با 50 ذره استفاده می‌شه که در مسیر دایره‌ای حرکت می‌کنن 2. **چرخ‌دنده‌ها**: سه چرخ‌دنده در موقعیت‌های مختلف با سرعت‌های متفاوت می‌چرخن 3. **Glow Effects**: از `radialGradient` و `globalCompositeOperation: 'screen'` برای افکت نورانی 4. **حلقه‌های چرخان**: از `setLineDash` و `lineDashOffset` برای انیمیشن خط‌چین 5. **لوگوی پویا**: لوگوی وردپرس با scale pulsing و چرخش ملایم ## مزایا - هیچ کتابخانه خارجی لازم نیست - Performance بالا با Canvas native - کاملاً قابل سفارشی‌سازی - Responsive و با resize سازگار - افکت‌های بصری جذاب و حرفه‌ای ## تست بعد از پیاده‌سازی: 1. چک کردن smoothness انیمیشن 2. تست روی دستگاه‌های مختلف 3. بررسی CPU usage (باید زیر 10% باشه)