Le presento a su atención: una de las posibles opciones para implementar un truco bastante divertido para crear el efecto de pasar la página de forma realista.
Demostración y documentación deGithubImplementé un efecto similar durante mucho tiempo, de vuelta en la universidad y en Delphi. Resultó bastante digno, aunque pasé mucho tiempo entonces. Ahora, durante el tiempo de autoaislamiento, se volvió interesante implementar algo similar en JS, para PC y dispositivos móviles.Francamente, no estoy seguro de la aplicabilidad práctica de este efecto, y creo que en la mayoría de los casos, no hay nada mejor que un simple cambio de imágenes sin ninguna animación. Pero es bastante posible usar, digamos en los sitios de restaurantes, publicar un menú (pero lo más importante, ¡eso se duplicaría con un enlace a continuación!)Todo está escrito en mecanografiado. No se utilizaron bibliotecas de terceros. No hay dependenciasCaracterísticas clave de la biblioteca
- Funciona tanto con imágenes simples, con renderizado en lienzo y con bloques html, utilizando transformaciones CSS
- Sistema de configuración bastante flexible y API simple
- Soporta dispositivos móviles.
- Cambio automático de orientación entre modo vertical y horizontal
El código fue escrito con un ojo solo en ES6 +, y el sistema modular también es ES6. El soporte del navegador es en promedio 90% basado en caniuse.com.Instalación
La instalación es posible desde npm:npm install page-flip
O bien, descargue los archivos recopilados del repositorio.La opción básica de inicialización de la biblioteca puede ser algo como esto:<div id="book">
<div class="my-page">
Page one
</div>
<div class="my-page">
Page two
</div>
<div class="my-page">
Page three
</div>
<div class="my-page">
Page four
</div>
</div>
import {PageFlip} from 'page-flip';
const pageFlip = new PageFlip(document.getElementById('book'),
{
width: 400,
height: 600
}
);
pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));
Se puede encontrar una descripción más detallada y la especificación de la API en el enlace de arriba.Quiero hablar sobre algunos de los problemas y matices que encontré durante el desarrollo.Cálculos
Lo primero de lo que debemos hablar es de un modelo matemático. En principio, todos los cálculos son bastante triviales, pero me llevó mucho tiempo.La tarea principal que debe resolverse es determinar el ángulo de transformación del cambio de página. Veamos la siguiente imagen: el
punto "A" indica el punto de contacto actual en el libro. Según la posición de este punto, es necesario realizar más cálculos.Para determinar el ángulo, es necesario calcular dos valores: la distancia desde el punto A hasta los bordes superior y derecho del libro. En la imagen a continuación, se indican con T y L, respectivamente.
G es la diagonal del ángulo, puede calcularse mediante el teorema de Pitágoras.Como resultado, para calcular la rotación de la imagen, puede usar la siguiente fórmula: ángulo = - 2 * acos (L / G), y lo más importante, no olvide que el punto de transformación en este caso es la esquina superior izquierda de la página.Después de calcular el ángulo, la parte que consume más tiempo permanece, esto es calcular la visibilidad de la página. Lo que debería ser aparentemente necesario para salir, y el resto, respectivamente, para recortar.Primero, necesitas encontrar los puntos de intersección de la página para voltearlos con los bordes del libro. En las figuras están indicados por los puntos B y C.
Hice esto de la manera más simple y sencilla: en la frente. Construyó las ecuaciones de líneas por dos puntos, y luego buscó su punto de intersección.Después de encontrar todos los puntos de intersección, determinamos los vértices del área de visibilidad, y en estos puntos ya estamos recortando la página que se va a voltear.
Básicamente, todas las matemáticas aquí se reducen a dos cosas:- cálculo del ángulo de transformación
- cálculo de visibilidad de página
El sombreado ya se basa en cálculos realizados previamente.Ahora pasemos a algunos puntos que tuvimos que enfrentar durante la implementación.El algoritmo general es bastante simple y se reduce al cambio de página y al recorte.En el caso del lienzo y las imágenes simples, todo es bastante simple. Después de realizar los cálculos, se utilizan métodos de contexto de lienzo 2D como traducir, rotar y recortar.Con bloques html un poco más complicados. Y si no hay ningún problema con la rotación, gracias a las transformaciones de CSS, entonces con el recorte todo resultó ser un poco peor.Como resultado, la forma más fácil era usar las propiedades de ruta de recorte y CSS de la figura: polígono. Pero antes de establecer los vértices poligonales para el recorte, es necesario transformar las coordenadas de los puntos del lienzo "global" en locales, en relación con el elemento html. Esto se resuelve mediante la aplicación inversa de la matriz de rotación, con un desplazamiento relativo a la posición del elemento.Otro problema fue la escala y el posicionamiento automático del libro. Traté de resolver esto con el objeto de configuración, que se pasa durante la creación. Pero al final, hubo bastantes parámetros, y resultó no ser muy conveniente ni obvio.Primero utilicé Webpack para el ensamblaje, pero al final decidí probar rollup.js, y el código final me sorprendió gratamente. Webpack aún permanece, ya que maneja el ensamblaje sobre la marcha varias veces más rápido, y es más conveniente durante el desarrollo.Estaré encantado de escuchar comentarios y sugerencias para un mayor desarrollo de la biblioteca.