Get best of the week

O efeito de virar página realista em JS

Apresento a sua atenção - uma das opções possíveis para implementar um truque bastante engraçado para criar o efeito de virar a página realista.



Demonstração e documentação do
Github.Eu

implementei um efeito semelhante por um longo tempo, na universidade e no Delphi. Acabou sendo bastante digno, embora eu tenha passado muito tempo na época. Agora - durante o período de auto-isolamento, tornou-se interessante implementar algo semelhante no JS, para PC e dispositivos móveis.

Francamente, não tenho certeza da aplicabilidade prática desse efeito e acho que, na maioria dos casos, não há nada melhor do que uma simples mudança de imagem sem animação. Mas é bem possível usar, por exemplo, em sites de restaurantes, para publicar um menu (mas o mais importante - isso seria duplicado ao lado do link!).

Tudo está escrito em texto datilografado. Nenhuma biblioteca de terceiros foi usada. Não há dependências.

Principais recursos da biblioteca


  • Funciona com imagens simples, com renderização em tela e com blocos html - usando transformações css
  • Sistema de configuração bastante flexível e API simples
  • Suporta dispositivos móveis
  • Mudança automática de orientação entre os modos retrato e paisagem

O código foi escrito apenas com atenção no ES6 +, e o sistema modular também é ES6. O suporte ao navegador é, em média, 90%, baseado em caniuse.com.

Instalação


A instalação é possível a partir do npm:

npm install page-flip

Ou faça o download dos arquivos coletados do repositório.A

opção básica de inicialização da biblioteca pode ser algo como isto:

<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, // required parameter - base page width
        height: 600  // required parameter - base page height
    }
);

pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));

Uma descrição e especificação mais detalhadas da API podem ser encontradas no link acima.
Quero falar sobre alguns dos problemas e nuances que encontrei durante o desenvolvimento.

Cálculos


A primeira coisa a se falar é um modelo matemático. Em princípio, todos os cálculos são bastante triviais, mas levei muito tempo.

A principal tarefa que precisa ser resolvida é determinar o ângulo de transformação da virada da página. Vejamos a seguinte imagem: O



ponto "A" indica o ponto de contato atual no livro. Com base na posição deste ponto - é necessário realizar cálculos adicionais.

Para determinar o ângulo - é necessário calcular dois valores - a distância do ponto A às bordas superior e direita do livro. Na imagem abaixo, eles são indicados por T e L, respectivamente.



G é a diagonal do ângulo, pode ser calculada pelo teorema de Pitágoras.

Como resultado, para calcular a rotação da imagem, você pode usar a seguinte fórmula: angle = - 2 * acos (L / G) e, o mais importante, não se esqueça de que o ponto de transformação nesse caso é o canto superior esquerdo da página.

Depois de calcular o ângulo - a parte que consome mais tempo - é o cálculo da visibilidade da página. O que deve ser aparentemente necessário para sair, e o resto, respectivamente - para aparar.

Primeiro, você precisa encontrar os pontos de interseção da página a serem invertidos com as bordas do livro. Nas figuras, são indicadas pelos pontos B e C.



Fiz isso da maneira mais simples e descomplicada - na testa. Ele construiu as equações de linhas em dois pontos e depois procurou o ponto de interseção.

Tendo encontrado todos os pontos de interseção, determinamos os vértices da área de visibilidade - e nesses pontos já estamos aparando a página a ser invertida.



Basicamente, toda a matemática aqui se resume a duas coisas:

  • cálculo do ângulo de transformação
  • cálculo da visibilidade da página

O sombreamento já se baseia em cálculos feitos anteriormente.

Agora vamos passar para alguns pontos que tivemos que enfrentar durante a implementação.

O algoritmo geral é bastante simples e se resume a virar e recortar páginas.

No caso de telas e imagens simples, tudo é bem simples. Após realizar os cálculos, são usados ​​métodos de contexto de tela 2D, como traduzir, girar e recortar.
Com os blocos html um pouco mais complicados. E se não houver nenhum problema com a rotação - graças às transformações de CSS, então, com o corte, tudo ficou um pouco pior.

Como resultado, a maneira mais fácil era usar as propriedades clip-path e css da figura - polígono. Porém, antes de definir os vértices poligonais para o corte, é necessário transformar as coordenadas dos pontos da tela "global" - em locais, em relação ao elemento html. Isso é resolvido pela aplicação reversa da matriz de rotação, com um deslocamento relativo à posição do elemento.

Outro problema foi o dimensionamento e o posicionamento automático do livro. Eu tentei resolver isso com o objeto de configuração, que é passado durante a criação. Mas, no final, havia alguns parâmetros, e isso não foi muito conveniente nem óbvio.

Eu usei o Webpack pela primeira vez no assembly, mas no final decidi tentar o rollup.js e fiquei muito agradavelmente surpreso com o código final. O Webpack ainda permanece, pois ele lida com a montagem rapidamente várias vezes e é mais conveniente durante o desenvolvimento.

Ficarei feliz em ouvir comentários e sugestões para o desenvolvimento adicional da biblioteca.

More articles:


All Articles