PageTransitions

Cuando creamos experiencias virtuales de aprendizaje, las diseñamos pensando en atomizar el contenido en páginas o diapositivas. Cada página representa una cápsula de contenidos que puedes incluir uno o varios elementos multimodales, y donde se espera que el aprendiz centre su atención para comprender un concepto específico.

<PageTransitions> es un componente que permite individualizar cada página o diapositiva a la hora de crear un objeto virtual de aprendizaje (OVA), facilitando la implementación de diferentes animaciones de transición entre cada una de ellas. Estas animaciones están basadas en CSS.

En el siguiente ejemplo, podrás observar como a través de nuestro componente <PageTransitions> podemos aplicar múltiples animaciones de transición de páginas para hacer más agradable e interactiva nuestras experiencias virtuales de aprendizaje.

Para hacer una implementación completa, debemos usar dos componentes de nuestra librería unc-react-creator: <PageTransitions> y <Page>. <PageTransitions> es el contendor de página, esto es, solo acepta <Page> dentro de su estructura de hijos (children). <Page> será la envoltura de todo el contenido HTML que se desee incluir dentro de la página.

import React, { useState, useRef } from 'react';
import { render } from 'react-dom';
import { Page, PageTransitions } from 'unc-react-creator';

import './assets/css/default.styl';
import './assets/css/C02.styl';
import 'animate.css/animate.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
  const [index, setIndex] = useState(1);
  const pt = useRef();

  const handleClick = () => {
    pt.current.nextPage(index);
    setIndex(index + 1);
  };

  const rgba = () => {
    const o = Math.round;
    const r = Math.random;
    const s = 255;

    return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')'; // eslint-disable-line
  };

  return (
    <>
      <button onClick={handleClick}>Siguiente página</button>
      <PageTransitions ref={pt}>
        {Array.from(Array(67).keys()).map((idx) => (
          <Page
            key={idx}
            className='d-flex align-items-center justify-content-center'
            style={{ backgroundColor: rgba() }}
            onHandleShownPage={() => null}
          >
            <h1 style={{ transform: 'translateY(-3em)' }}>
              Page Transitions
            </h1>
          </Page>
        ))}
      </PageTransitions>
    </>
  );
};

render(
  <App />,
  document.getElementById('app')
);

Las animaciones de transición de página están basadas en la librería: https://tympanus.net/Development/PageTransitions/

Está librería la hemos integrado nuestros componente reactjs, con las siguientes ventajas.

• Cada página es renderiza de forma individual, evitando el renderizado de las páginas que no son visibles para el usuario, optimizando interacción con el objeto virtual.
• El objeto props de la página está configurado con varios métodos y propiedades generales del <PageTransitions>
• Puedes individualizar cada página se un archivo diferente, ayudando al desarrollo del OVA