Skip to main content

Guía Rápida de Tween Manager en Lens Studio

🎭 ¿Qué es Tween.js?​

Tween.js es una librería de JavaScript para hacer animaciones de forma sencilla. En Lens Studio, se llama TweenManager, que facilita su uso en proyectos de Snapchat.

🛠️ Agregando el Paquete Tween​

  1. Abre tu proyecto en Lens Studio.
  2. Ve al panel Scene Hierarchy.
  3. Selecciona + → Scripts → Tween.
  4. ¡Listo! Ahora puedes empezar a usar tweens en tu escena. 🎉

Tip: Si ves objetos llamados [REMOVE_ME], bórralos para limpiar tu escena.

TweenManager

🎬 Agregando Tweens​

Los Tweens se agregan como Script Components a los objetos de la escena. Estos scripts modifican propiedades específicas de los objetos.

✨ ¿Cómo agregar un Tween?​

  1. Selecciona TweenManager en Scene Hierarchy.
  2. Ve al panel Asset Browser y ve a la carpeta Tween dentro de la carpeta TweenMananger.
  3. Selecciona el archivo JS Tween, y arrástralo dentro TweenManager en Scene Hierarchy.
  4. Ve al panel Inspector y haz clic en Add Component.
  5. En Project Components, elige un Tween Type.
  6. Configura los parámetros del Tween en el Inspector.

TweenManager TweenManager

🔥 Tipos de Tween​

Cada Tween Type permite modificar una propiedad específica. Aquí te explico los más usados:

🔄 Tween Transform​

Modifica la posición, rotación o escala de un objeto.

  • Scene Object: Objeto al que se aplicará el tween.
  • Loop Type: Define si el tween se repite o alterna entre valores.
  • Easing Function: Controla la aceleración/desaceleración de la animación.

🎯 Tween Screen Transform​

Sirve para modificar objetos de interfaz (UI).

  • Position: Cambia la posición en la pantalla.
  • Scale: Ajusta el tamaño.
  • Rotation: Gira el objeto (solo eje Z).
  • Anchors: Modifica los anclajes de la UI.

🎨 Tween Color​

Cambia el color de textos, imágenes o modelos 3D.

  • Color Property: Decide qué parte del objeto se anima (Texto, Fondo, Contorno, etc.).
  • Start / End: Define los colores inicial y final.
  • Ignore Alpha: Ignora la transparencia del color.

👻 Tween Alpha​

Ajusta la transparencia de un objeto.

  • Start / End: Transparencia inicial y final.
  • Recursive: Aplica la transparencia a todos los hijos del objeto.

🔢 Tween Value​

Modifica un valor genérico en el código.

  • Data Type: Puede ser int, float, vec2, vec3 o vec4.
  • Start / End: Valores inicial y final.

🏗️ Tween Chain​

Permite encadenar múltiples Tweens.

  • All At Once: Activa todos los tweens al mismo tiempo.
  • Sequential: Los tweens se ejecutan en orden.
  • Recursive: Busca tweens en objetos hijos.

Tip: Usa Tween Chain para dividir una animación larga en partes más pequeñas.

🎮 Disparando Tweens con Behavior Script​

También puedes activar tweens con el Behavior Script.

  1. Agrega un Behavior Script en un objeto.
  2. En el Inspector, elige:
    • Trigger (evento que activa el tween, como "Tap" o "Sonrisa").
    • Response (acción, en este caso "Play Tween").
  3. El tween se activará automáticamente cuando ocurra el evento.

TweenManager TweenManager