AnimatedButton🪐

AnimatedButton es un componente atómico que representa un botón animado con soporte para contenido de texto y fracciones matemáticas visualizadas. Este botón puede mostrar una imagen de fondo, un texto o una fracción, y se puede personalizar su estilo. Está diseñado para usarse dentro de una interfaz de usuario interactiva y atractiva.

Características

AnimatedButton es un componente que extiende las funcionalidades de un botón básico, integrando animaciones, interactividad, y soporte visual para fracciones matemáticas. Este componente ofrece:

1. Soporte para fracciones: Permite representar valores fraccionarios, mostrando el numerador y denominador en un formato visual claro y personalizable, ideal para interfaces educativas o de práctica matemática.

2. Animaciones interactivas: Incluye animaciones de movimiento y brillo que añaden dinamismo al botón, diseñadas para captar la atención del usuario y mejorar la experiencia de respuesta. Las animaciones utilizan funciones de easing para suavizar las transiciones.

3. Indicador de corrección/incorrecto: Puede mostrar un ícono que indica si la respuesta es correcta o incorrecta, ideal para interfaces de evaluación o cuestionarios.

4. Soporte para imágenes de fondo: Permite establecer imágenes de fondo en el botón, brindando versatilidad para su uso en diferentes contextos visuales, como botones con íconos o ilustraciones.

5. Personalización avanzada de estilos:

   • Estilos de texto: Personalización del tamaño y color del texto a través de propiedades como textStyles.
   • Estilos de contenedor: Flexibilidad en el ajuste del botón para adaptarse a layouts específicos o responsivos, gracias a customButtonStyles.
   • Estilos de indicador: Personalización del ícono de corrección o error mediante correctStyles.

6. Configuración de temas: Compatible con temas configurados externamente, permitiendo personalizar colores y estilos a través de archivos de configuración, como themes.ts, para mantener la coherencia visual en la aplicación.

Props 📜

Prop	Tipo	Descripción
answer	item: string or Fraction; img: any	Objeto que define el contenido que se mostrará en el botón. Puede ser un texto (string) o una fracción (Fraction) y una imagen de fondo (img).
index	number	Índice del botón, utilizado para identificarlo cuando se llama a la función checkAnswer.
checkAnswer	(index: number) => void	Función de callback que se ejecuta al presionar el botón, pasando el índice (index) del botón como parámetro.
isCorrect	boolean or null	Indica si la respuesta asociada al botón es correcta (true) o incorrecta (false). Si es null, no muestra el indicador de corrección.
isfraction	boolean	Controla si el contenido del botón se muestra como una fracción (true) o como texto (false).
showCorrect	boolean	Si es true, muestra un indicador visual de corrección o error basado en el valor de isCorrect.
incorrectImg	any	Imagen que se muestra cuando la respuesta es incorrecta, utilizada en el indicador visual.
correctImg	any	Imagen que se muestra cuando la respuesta es correcta, utilizada en el indicador visual.
customButtonStyles	StyleProp<ViewStyle>	Estilos personalizados para el contenedor principal del botón.
playBrillo	boolean	Activa o desactiva la animación de brillo en el botón, añadiendo un efecto visual para captar la atención del usuario.
textStyles	StyleProp<TextStyle>	Estilos personalizados para el texto que se muestra en el botón, permitiendo ajustes en fuente, color, etc.
correctStyles	StyleProp<ImageStyle>	Estilos personalizados para el indicador de corrección o error, permitiendo ajustes en tamaño, posición, etc.

Interfaz Fraction

Prop	Tipo	Descripción
numerator	number	Numerador de la fracción que se muestra en el botón cuando isfraction es true.
denominator	number	Denominador de la fracción que se muestra en el botón cuando isfraction es true.

Codigo de ejemplo 🕹️

Native Versión 📱: Intergalactica (Misión 6 - Fijacion 01)

<AnimatedButton
  answer={{
    item: currentQuestion.option === 1 ? "Sí" : "V",
    img:
      answerSelectedIndex === 0
        ? isCorrectAnswer
          ? require("@assets/images/intergalactic-route/mission2/asteroids/asteroide_correcta.png")
          : require("@assets/images/intergalactic-route/mission2/asteroids/asteroide_incorrecta.png")
        : require("@assets/images/intergalactic-route/mission2/asteroids/asteroide1.png"),
  }}
  selected={answerSelectedIndex === 0}
  colorCombination={BaseTheme(answerSelectedIndex, isCorrectAnswer)}
  checkAnswer={() => {
    checkAnswerHandler({ currentQuestion, answer: true }, 0);
  }}
  showCorrect={
    isCorrectAnswer === false && currentQuestion.answer === true
  }
  isCorrect={
    isCorrectAnswer === false && currentQuestion.answer === true
  }
  customButtonStyles={{
    width: 105,
    height: 105,
  }}
  textStyles={{
    fontSize: Dimensions.get("window").width * 0.1,
    zIndex: 1,
  }}
/>

Web Versión 💻: Intergalactica(Misión 6 - Fijacion 01)

<AnimatedButton
  answer={{
    item: currentQuestion.option === 1 ? "Sí" : "V",
    img:
      answerSelectedIndex === 0
        ? isCorrectAnswer
          ? require("@assets/images/intergalactic-route/mission2/asteroids/asteroide_correcta.png")
          : require("@assets/images/intergalactic-route/mission2/asteroids/asteroide_incorrecta.png")
        : require("@assets/images/intergalactic-route/mission2/asteroids/asteroide1.png"),
  }}
  selected={answerSelectedIndex === 0}
  colorCombination={BaseTheme(answerSelectedIndex, isCorrectAnswer)}
  checkAnswer={() => {
    checkAnswerHandler({ currentQuestion, answer: true }, 0);
  }}
  showCorrect={
    isCorrectAnswer === false && currentQuestion.answer === true
  }
  isCorrect={
    isCorrectAnswer === false && currentQuestion.answer === true
  }
  customButtonStyles={{
    width: 105,
    height: 105,
  }}
  textStyles={{
    fontSize: 16,
    zIndex: 1,
  }}
/>

Ejemplos de uso 🎨