@cognima/banners 0.0.1-beta

package/src/animation-effects.js

@@ -0,0 +1,631 @@
+"use strict";
+
+/**
+ * Módulo de efeitos de animação para banners
+ * 
+ * Este módulo fornece funções para criar efeitos de animação estáticos
+ * que simulam movimento e interatividade nos banners.
+ * 
+ * @module animation-effects
+ * @author Cognima Team (melhorado)
+ * @version 2.0.0
+ */
+
+const utils = require("../utils");
+
+/**
+ * Adiciona um efeito de brilho (glow) a um elemento
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {number} x - Posição X do elemento
+ * @param {number} y - Posição Y do elemento
+ * @param {number} width - Largura do elemento
+ * @param {number} height - Altura do elemento
+ * @param {string} color - Cor do brilho
+ * @param {number} [intensity=0.5] - Intensidade do brilho (0-1)
+ * @param {number} [radius=20] - Raio do brilho
+ */
+function addGlowEffect(ctx, x, y, width, height, color, intensity = 0.5, radius = 20) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Configura o efeito de sombra para criar o brilho
+    ctx.shadowColor = color;
+    ctx.shadowBlur = radius;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    
+    // Desenha um retângulo com a cor do brilho e opacidade ajustada
+    ctx.fillStyle = utils.hexToRgba(color, intensity * 0.3);
+    ctx.fillRect(x, y, width, height);
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de pulso (simulado estaticamente)
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {number} x - Posição X do elemento
+ * @param {number} y - Posição Y do elemento
+ * @param {number} radius - Raio do pulso
+ * @param {string} color - Cor do pulso
+ * @param {number} [intensity=0.5] - Intensidade do pulso (0-1)
+ */
+function addPulseEffect(ctx, x, y, radius, color, intensity = 0.5) {
+    // Desenha múltiplos círculos com opacidade decrescente para simular pulso
+    for (let i = 0; i < 3; i++) {
+        const currentRadius = radius * (1 + i * 0.2);
+        const opacity = intensity * (1 - i * 0.3);
+        
+        ctx.beginPath();
+        ctx.arc(x, y, currentRadius, 0, Math.PI * 2);
+        ctx.fillStyle = utils.hexToRgba(color, opacity);
+        ctx.fill();
+    }
+}
+
+/**
+ * Adiciona um efeito de movimento (motion blur) a um elemento
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {number} x - Posição X do elemento
+ * @param {number} y - Posição Y do elemento
+ * @param {number} width - Largura do elemento
+ * @param {number} height - Altura do elemento
+ * @param {string} direction - Direção do movimento ("left", "right", "up", "down")
+ * @param {number} [intensity=0.5] - Intensidade do efeito (0-1)
+ */
+function addMotionBlurEffect(ctx, x, y, width, height, direction, intensity = 0.5) {
+    // Número de cópias para criar o efeito de blur
+    const steps = Math.floor(intensity * 10) + 1;
+    const stepSize = 3;
+    
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Desenha múltiplas cópias com opacidade decrescente
+    for (let i = 1; i <= steps; i++) {
+        const opacity = (1 - i / steps) * intensity;
+        ctx.fillStyle = utils.hexToRgba("#FFFFFF", opacity);
+        
+        let offsetX = 0;
+        let offsetY = 0;
+        
+        switch (direction) {
+            case "left":
+                offsetX = -i * stepSize;
+                break;
+            case "right":
+                offsetX = i * stepSize;
+                break;
+            case "up":
+                offsetY = -i * stepSize;
+                break;
+            case "down":
+                offsetY = i * stepSize;
+                break;
+        }
+        
+        ctx.fillRect(x + offsetX, y + offsetY, width, height);
+    }
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de sombra 3D a um elemento
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {number} x - Posição X do elemento
+ * @param {number} y - Posição Y do elemento
+ * @param {number} width - Largura do elemento
+ * @param {number} height - Altura do elemento
+ * @param {number} [depth=5] - Profundidade da sombra
+ * @param {string} [color="#000000"] - Cor da sombra
+ * @param {number} [opacity=0.2] - Opacidade da sombra
+ */
+function add3DShadowEffect(ctx, x, y, width, height, depth = 5, color = "#000000", opacity = 0.2) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Desenha múltiplas camadas para criar o efeito 3D
+    for (let i = 1; i <= depth; i++) {
+        ctx.fillStyle = utils.hexToRgba(color, opacity / i);
+        ctx.fillRect(x + i, y + i, width, height);
+    }
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de reflexo a um elemento
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {number} x - Posição X do elemento
+ * @param {number} y - Posição Y do elemento
+ * @param {number} width - Largura do elemento
+ * @param {number} height - Altura do elemento
+ * @param {number} [reflectionHeight=0.3] - Altura do reflexo em relação à altura do elemento (0-1)
+ * @param {number} [opacity=0.3] - Opacidade máxima do reflexo
+ */
+function addReflectionEffect(ctx, x, y, width, height, reflectionHeight = 0.3, opacity = 0.3) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Altura do reflexo
+    const rHeight = height * reflectionHeight;
+    
+    // Cria um gradiente para o reflexo (mais opaco no topo, transparente embaixo)
+    const gradient = ctx.createLinearGradient(0, y + height, 0, y + height + rHeight);
+    gradient.addColorStop(0, utils.hexToRgba("#FFFFFF", opacity));
+    gradient.addColorStop(1, utils.hexToRgba("#FFFFFF", 0));
+    
+    // Aplica o gradiente
+    ctx.fillStyle = gradient;
+    
+    // Desenha o reflexo
+    ctx.fillRect(x, y + height, width, rHeight);
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de destaque (highlight) a um elemento
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {number} x - Posição X do elemento
+ * @param {number} y - Posição Y do elemento
+ * @param {number} width - Largura do elemento
+ * @param {number} height - Altura do elemento
+ * @param {string} [color="#FFFFFF"] - Cor do destaque
+ * @param {number} [angle=45] - Ângulo do destaque em graus
+ * @param {number} [opacity=0.5] - Opacidade do destaque
+ */
+function addHighlightEffect(ctx, x, y, width, height, color = "#FFFFFF", angle = 45, opacity = 0.5) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Converte o ângulo para radianos
+    const radians = angle * Math.PI / 180;
+    
+    // Calcula a largura do destaque
+    const highlightWidth = Math.sqrt(width * width + height * height) * 0.3;
+    
+    // Calcula o centro do elemento
+    const centerX = x + width / 2;
+    const centerY = y + height / 2;
+    
+    // Calcula os pontos de início e fim do destaque
+    const startX = centerX - Math.cos(radians) * width;
+    const startY = centerY - Math.sin(radians) * height;
+    const endX = centerX + Math.cos(radians) * width;
+    const endY = centerY + Math.sin(radians) * height;
+    
+    // Cria um gradiente para o destaque
+    const gradient = ctx.createLinearGradient(startX, startY, endX, endY);
+    gradient.addColorStop(0, utils.hexToRgba(color, 0));
+    gradient.addColorStop(0.4, utils.hexToRgba(color, 0));
+    gradient.addColorStop(0.5, utils.hexToRgba(color, opacity));
+    gradient.addColorStop(0.6, utils.hexToRgba(color, 0));
+    gradient.addColorStop(1, utils.hexToRgba(color, 0));
+    
+    // Aplica o gradiente
+    ctx.fillStyle = gradient;
+    
+    // Recorta para a área do elemento
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+    ctx.clip();
+    
+    // Desenha o destaque
+    ctx.fillRect(x - highlightWidth / 2, y - highlightWidth / 2, width + highlightWidth, height + highlightWidth);
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de partículas flutuantes
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {number} x - Posição X da área
+ * @param {number} y - Posição Y da área
+ * @param {number} width - Largura da área
+ * @param {number} height - Altura da área
+ * @param {number} [count=20] - Número de partículas
+ * @param {string} [color="#FFFFFF"] - Cor das partículas
+ * @param {number} [maxSize=5] - Tamanho máximo das partículas
+ */
+function addFloatingParticlesEffect(ctx, x, y, width, height, count = 20, color = "#FFFFFF", maxSize = 5) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Gera partículas aleatórias
+    for (let i = 0; i < count; i++) {
+        const particleX = x + Math.random() * width;
+        const particleY = y + Math.random() * height;
+        const particleSize = Math.random() * maxSize + 1;
+        const opacity = Math.random() * 0.5 + 0.1;
+        
+        // Desenha a partícula
+        ctx.beginPath();
+        ctx.arc(particleX, particleY, particleSize, 0, Math.PI * 2);
+        ctx.fillStyle = utils.hexToRgba(color, opacity);
+        ctx.fill();
+    }
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de ondulação (ripple)
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {number} x - Posição X do centro da ondulação
+ * @param {number} y - Posição Y do centro da ondulação
+ * @param {number} [maxRadius=100] - Raio máximo da ondulação
+ * @param {number} [rings=3] - Número de anéis da ondulação
+ * @param {string} [color="#FFFFFF"] - Cor da ondulação
+ * @param {number} [opacity=0.3] - Opacidade máxima da ondulação
+ */
+function addRippleEffect(ctx, x, y, maxRadius = 100, rings = 3, color = "#FFFFFF", opacity = 0.3) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Desenha múltiplos anéis para criar o efeito de ondulação
+    for (let i = 0; i < rings; i++) {
+        const radius = maxRadius * ((i + 1) / rings);
+        const ringOpacity = opacity * (1 - i / rings);
+        
+        ctx.beginPath();
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
+        ctx.strokeStyle = utils.hexToRgba(color, ringOpacity);
+        ctx.lineWidth = 2;
+        ctx.stroke();
+    }
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de texto com sombra
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {string} text - Texto a ser desenhado
+ * @param {number} x - Posição X do texto
+ * @param {number} y - Posição Y do texto
+ * @param {string} [textColor="#FFFFFF"] - Cor do texto
+ * @param {string} [shadowColor="#000000"] - Cor da sombra
+ * @param {number} [shadowBlur=5] - Desfoque da sombra
+ * @param {number} [shadowOffsetX=2] - Deslocamento X da sombra
+ * @param {number} [shadowOffsetY=2] - Deslocamento Y da sombra
+ */
+function addTextShadowEffect(ctx, text, x, y, textColor = "#FFFFFF", shadowColor = "#000000", shadowBlur = 5, shadowOffsetX = 2, shadowOffsetY = 2) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Configura a sombra
+    ctx.shadowColor = shadowColor;
+    ctx.shadowBlur = shadowBlur;
+    ctx.shadowOffsetX = shadowOffsetX;
+    ctx.shadowOffsetY = shadowOffsetY;
+    
+    // Desenha o texto
+    ctx.fillStyle = textColor;
+    ctx.fillText(text, x, y);
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de texto com contorno
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {string} text - Texto a ser desenhado
+ * @param {number} x - Posição X do texto
+ * @param {number} y - Posição Y do texto
+ * @param {string} [fillColor="#FFFFFF"] - Cor de preenchimento do texto
+ * @param {string} [strokeColor="#000000"] - Cor do contorno
+ * @param {number} [lineWidth=2] - Largura do contorno
+ */
+function addTextOutlineEffect(ctx, text, x, y, fillColor = "#FFFFFF", strokeColor = "#000000", lineWidth = 2) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Configura o contorno
+    ctx.strokeStyle = strokeColor;
+    ctx.lineWidth = lineWidth;
+    ctx.lineJoin = "round";
+    
+    // Desenha o contorno
+    ctx.strokeText(text, x, y);
+    
+    // Desenha o texto
+    ctx.fillStyle = fillColor;
+    ctx.fillText(text, x, y);
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de texto com gradiente
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {string} text - Texto a ser desenhado
+ * @param {number} x - Posição X do texto
+ * @param {number} y - Posição Y do texto
+ * @param {Array<string>} colors - Array de cores para o gradiente
+ * @param {string} [direction="horizontal"] - Direção do gradiente ("horizontal", "vertical", "diagonal")
+ */
+function addTextGradientEffect(ctx, text, x, y, colors, direction = "horizontal") {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Obtém as dimensões do texto
+    const metrics = ctx.measureText(text);
+    const width = metrics.width;
+    const height = parseInt(ctx.font); // Aproximação da altura baseada no tamanho da fonte
+    
+    // Cria o gradiente de acordo com a direção
+    let gradient;
+    switch (direction) {
+        case "vertical":
+            gradient = ctx.createLinearGradient(x, y - height, x, y);
+            break;
+        case "diagonal":
+            gradient = ctx.createLinearGradient(x, y - height, x + width, y);
+            break;
+        case "horizontal":
+        default:
+            gradient = ctx.createLinearGradient(x, y, x + width, y);
+            break;
+    }
+    
+    // Adiciona as cores ao gradiente
+    for (let i = 0; i < colors.length; i++) {
+        gradient.addColorStop(i / (colors.length - 1), colors[i]);
+    }
+    
+    // Aplica o gradiente
+    ctx.fillStyle = gradient;
+    
+    // Desenha o texto
+    ctx.fillText(text, x, y);
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de texto com animação de digitação (simulado estaticamente)
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {string} text - Texto completo
+ * @param {number} x - Posição X do texto
+ * @param {number} y - Posição Y do texto
+ * @param {number} [progress=0.7] - Progresso da digitação (0-1)
+ * @param {string} [color="#FFFFFF"] - Cor do texto
+ * @param {boolean} [showCursor=true] - Se deve mostrar o cursor
+ */
+function addTypingEffect(ctx, text, x, y, progress = 0.7, color = "#FFFFFF", showCursor = true) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Calcula quantos caracteres mostrar
+    const charCount = Math.floor(text.length * progress);
+    const visibleText = text.substring(0, charCount);
+    
+    // Desenha o texto visível
+    ctx.fillStyle = color;
+    ctx.fillText(visibleText, x, y);
+    
+    // Desenha o cursor se necessário
+    if (showCursor) {
+        const cursorX = x + ctx.measureText(visibleText).width;
+        ctx.fillRect(cursorX, y - parseInt(ctx.font) * 0.7, 2, parseInt(ctx.font) * 0.8);
+    }
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de texto com animação de fade in (simulado estaticamente)
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {string} text - Texto a ser desenhado
+ * @param {number} x - Posição X do texto
+ * @param {number} y - Posição Y do texto
+ * @param {number} [progress=0.7] - Progresso do fade in (0-1)
+ * @param {string} [color="#FFFFFF"] - Cor do texto
+ */
+function addFadeInEffect(ctx, text, x, y, progress = 0.7, color = "#FFFFFF") {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Calcula a opacidade baseada no progresso
+    const opacity = Math.min(1, progress);
+    
+    // Desenha o texto com a opacidade calculada
+    ctx.fillStyle = utils.hexToRgba(color, opacity);
+    ctx.fillText(text, x, y);
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de texto com animação de slide in (simulado estaticamente)
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {string} text - Texto a ser desenhado
+ * @param {number} x - Posição X final do texto
+ * @param {number} y - Posição Y do texto
+ * @param {number} [progress=0.7] - Progresso do slide in (0-1)
+ * @param {string} [direction="left"] - Direção do slide ("left", "right", "up", "down")
+ * @param {string} [color="#FFFFFF"] - Cor do texto
+ * @param {number} [distance=100] - Distância do slide
+ */
+function addSlideInEffect(ctx, text, x, y, progress = 0.7, direction = "left", color = "#FFFFFF", distance = 100) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Calcula a posição baseada no progresso e direção
+    let currentX = x;
+    let currentY = y;
+    
+    switch (direction) {
+        case "left":
+            currentX = x + distance * (1 - progress);
+            break;
+        case "right":
+            currentX = x - distance * (1 - progress);
+            break;
+        case "up":
+            currentY = y + distance * (1 - progress);
+            break;
+        case "down":
+            currentY = y - distance * (1 - progress);
+            break;
+    }
+    
+    // Desenha o texto na posição calculada
+    ctx.fillStyle = color;
+    ctx.fillText(text, currentX, currentY);
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de texto com animação de escala (simulado estaticamente)
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {string} text - Texto a ser desenhado
+ * @param {number} x - Posição X do texto
+ * @param {number} y - Posição Y do texto
+ * @param {number} [progress=0.7] - Progresso da escala (0-1)
+ * @param {string} [color="#FFFFFF"] - Cor do texto
+ * @param {number} [minScale=0.5] - Escala mínima
+ */
+function addScaleEffect(ctx, text, x, y, progress = 0.7, color = "#FFFFFF", minScale = 0.5) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Calcula a escala baseada no progresso
+    const scale = minScale + (1 - minScale) * progress;
+    
+    // Obtém as dimensões do texto
+    const metrics = ctx.measureText(text);
+    const width = metrics.width;
+    
+    // Calcula o ponto central do texto
+    const centerX = x + width / 2;
+    
+    // Aplica a transformação
+    ctx.translate(centerX, y);
+    ctx.scale(scale, scale);
+    ctx.translate(-centerX, -y);
+    
+    // Desenha o texto
+    ctx.fillStyle = color;
+    ctx.fillText(text, x, y);
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de texto com animação de rotação (simulado estaticamente)
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {string} text - Texto a ser desenhado
+ * @param {number} x - Posição X do texto
+ * @param {number} y - Posição Y do texto
+ * @param {number} [progress=0.7] - Progresso da rotação (0-1)
+ * @param {string} [color="#FFFFFF"] - Cor do texto
+ * @param {number} [maxAngle=30] - Ângulo máximo de rotação em graus
+ */
+function addRotationEffect(ctx, text, x, y, progress = 0.7, color = "#FFFFFF", maxAngle = 30) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Calcula o ângulo baseado no progresso
+    const angle = maxAngle * (1 - progress) * Math.PI / 180;
+    
+    // Obtém as dimensões do texto
+    const metrics = ctx.measureText(text);
+    const width = metrics.width;
+    
+    // Calcula o ponto central do texto
+    const centerX = x + width / 2;
+    
+    // Aplica a transformação
+    ctx.translate(centerX, y);
+    ctx.rotate(angle);
+    ctx.translate(-centerX, -y);
+    
+    // Desenha o texto
+    ctx.fillStyle = color;
+    ctx.fillText(text, x, y);
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+/**
+ * Adiciona um efeito de texto com animação de bounce (simulado estaticamente)
+ * 
+ * @param {CanvasRenderingContext2D} ctx - Contexto de renderização
+ * @param {string} text - Texto a ser desenhado
+ * @param {number} x - Posição X do texto
+ * @param {number} y - Posição Y do texto
+ * @param {number} [progress=0.7] - Progresso da animação (0-1)
+ * @param {string} [color="#FFFFFF"] - Cor do texto
+ * @param {number} [height=20] - Altura máxima do bounce
+ */
+function addBounceEffect(ctx, text, x, y, progress = 0.7, color = "#FFFFFF", height = 20) {
+    // Salva o estado atual do contexto
+    ctx.save();
+    
+    // Simula uma função de bounce
+    const bounceProgress = Math.abs(Math.sin(progress * Math.PI * 2));
+    const offset = bounceProgress * height;
+    
+    // Desenha o texto com o offset calculado
+    ctx.fillStyle = color;
+    ctx.fillText(text, x, y - offset);
+    
+    // Restaura o estado do contexto
+    ctx.restore();
+}
+
+module.exports = {
+    addGlowEffect,
+    addPulseEffect,
+    addMotionBlurEffect,
+    add3DShadowEffect,
+    addReflectionEffect,
+    addHighlightEffect,
+    addFloatingParticlesEffect,
+    addRippleEffect,
+    addTextShadowEffect,
+    addTextOutlineEffect,
+    addTextGradientEffect,
+    addTypingEffect,
+    addFadeInEffect,
+    addSlideInEffect,
+    addScaleEffect,
+    addRotationEffect,
+    addBounceEffect
+};
+