La implementación de interacciones animadas es fundamental para mejorar la experiencia del usuario. Dentro del ámbito de las animaciones, las transiciones de página permiten una navegación fluida entre pantallas.

ArkTS facilita la creación de estas transiciones de página definiendo animaciones personalizadas para la entrada (PageTransitionEnter) y salida (PageTransitionExit) de las páginas dentro del método global pageTransition.

PageTransitionEnter y PageTransitionExit ofrecen las siguientes funcionalidades:

• onEnter(): Un callback invocado en cada fotograma durante la animación de entrada de la página.
• onExit(): Un callback invocado en cada fotograma durante la animación de salida de la página.

Ambas, PageTransitionEnter y PageTransitionExit, comparten las siguientes propiedades configurables:

• slide: Define el efecto de deslizamiento de entrada o salida. El valor predeterminado es SlideEffect.Right.
• translate: Configura el desplazamiento de la página durante la transición, especificando el punto de inicio para la entrada y el punto final para la salida.
• opacity: Ajusta la transparencia de la página, ya sea el valor inicial de entrada o el valor final de salida. El valor predeterminado es 1 (completamente opaco).
• scale: Controla el factor de escala de la página, definiendo el valor inicial para la entrada y el valor final para la salida.

Para una demostración práctica, consideremos dos páginas que utilizan estas animaciones. La navegación entre ellas se maneja mediante el componente Navigator.

Página 1:

@Entry
@Component
struct PageOne {
  @State currentScale: number = 1.0
  @State currentOpacity: number = 1.0

  build() {
    Column() {
      Navigator({ target: 'PageTwo', type: NavigationType.Push }) {
        Image('Common/images/sample1.png').width('100%').height('100%')
      }
    }
    .width('100%')
    .height('100%')
    .scale({ x: this.currentScale })
    .opacity(this.currentOpacity)
  }

  pageTransition() {
    PageTransitionEnter({ duration: 1500, curve: Curve.EaseInOut })
      .opacity(0.2) // Inicia con baja opacidad
      .slide(SlideEffect.Left) // Deslizamiento desde la izquierda
      .onEnter((type: RouteType, progress: number) => {
        this.currentScale = 0.8 + progress * 0.2 // Escala gradualmente a 1.0
        this.currentOpacity = progress // Opacidad aumenta con el progreso
      })

    PageTransitionExit({ duration: 1000, curve: Curve.Linear })
      .scale({ x: 0.6, y: 0.6, z: 0.6 }) // Escala a 0.6 al salir
      .onExit((type: RouteType, progress: number) => {
        this.currentScale = 1.0 - progress // Escala hacia abajo
        this.currentOpacity = 1.0 - progress // Opacidad disminuye
      })
  }
}

Página 2:

@Entry
@Component
struct PageTwo {
  @State transitionScale: number = 1.0
  @State transitionOpacity: number = 1.0

  build() {
    Column() {
      Navigator({ target: 'PageOne', type: NavigationType.Push }) {
        Image('Common/images/sample2.png').width('100%').height('100%')
      }
    }
    .width('100%')
    .height('100%')
    .scale({ x: this.transitionScale })
    .opacity(this.transitionOpacity)
  }

  pageTransition() {
    PageTransitionEnter({
      duration: 1000,
      curve: Curve.Spring,
      delay: 500 // Retraso inicial
    })
      .slide(SlideEffect.Bottom) // Deslizamiento desde abajo
      .onEnter((type: RouteType, progress: number) => {
        this.transitionScale = 0.7 + progress * 0.3 // Escala gradualmente
        this.transitionOpacity = progress // Opacidad aumenta
      })

    PageTransitionExit({
      duration: 1200,
      curve: Curve.Ease,
      type: RouteType.Pop
    })
      .translate({ y: 300 }) // Desplazamiento hacia abajo al salir
      .onExit((type: RouteType, progress: number) => {
        this.transitionScale = 1.0 - progress // Escala hacia abajo
        this.transitionOpacity = 1.0 - progress // Opacidad disminuye
      })
  }
}

Estos ejemplos ilustran cómo configurar efectos de entrada y salida, incluyendo deslizamientos, cambios de opacidad y escala, para lograr transiciones de página visualmente atractivas en ArkTS.