Uma breve discussão sobre algumas reflexões sobre o movimento parabólico de imagens em HTML5

É comum que objetos/imagens se movam em uma parábola ou, mais precisamente, ao longo de uma curva de Bézier. Este é um requisito comum no desenvolvimento do H5. Portanto, como calcular rapidamente o caminho do movimento com base no rascunho do projeto é o primeiro problema que os desenvolvedores enfrentam. resolver.

O tamanho do rascunho de projeto comumente usado para desenvolvimento H5 aqui é 640 * 1008, então a ideia da solução baseada neste tamanho é a seguinte:

1. Primeiro, exporte o elemento a ser deslocado em PS para um png separadamente. Se a rota de movimento foi planejada no rascunho do projeto, você também precisará exportar a rota como png;

2. Crie um novo arquivo no AI com o mesmo tamanho do rascunho do projeto e arraste o elemento de deslocamento para o arquivo duas vezes. Se houver uma rota de movimento, arraste-o também, conforme mostrado abaixo:

O que precisa ser observado aqui é o posicionamento da imagem de deslocamento. O ponto inicial e o ponto final do caminho devem corresponder ao ponto móvel da imagem.

1. Não há processamento de deformação na tela, portanto o ponto móvel é o canto superior esquerdo da imagem.
2. No canvas, a imagem foi traduzida e movida porque dx e dy em drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) são adicionados com base em x1 e y1 em translate(x1, y1). deslocamento final.
3. Se o elemento for posicionado por position:absolute e a posição for controlada por translate3d(x, y, z) na transformação, o deslocamento deve ser x, y. Normalmente, na transformação podemos imitar a margem esquerda, superior e adicional para controlar a margem. posição do elemento, adicione um translate3D(marginLeftX, marginLeftY, 0) adicional na transformação. O valor desta margem também precisa ser levado em consideração.

3. Na IA, use as teclas ctrl + r para retirar a linha de referência e mova a imagem do elemento para retirar suas posições x e y, conforme mostrado na figura abaixo:

Em seguida, selecione a ferramenta caneta e clique no ponto inicial e final. Não solte o mouse após clicar no ponto final. Arraste o AI diretamente e ele adicionará automaticamente 2 pontos de controle. posição dos dois pontos de controle para ajustar a caneta O objetivo do caminho gerado pela ferramenta é até que seja consistente com o caminho da linha de referência no rascunho do projeto.

Após arrastar para a posição desejada, solte o mouse e pressione Enter no teclado para confirmar o caminho. Caso o caminho traçado não seja o desejado, você pode continuar arrastando os pontos de controle para fazer ajustes.

4. Após a conclusão do ajuste, arraste duas linhas de referência adicionais para a posição do ponto de controle 1, em seguida, abra o painel de informações através da barra de menu - janela - informações e altere o ponto inicial, ponto de controle, ponto final e três pontos respectivamente.

5. Calcule a diferença de pixels do ponto de controle, ponto final e ponto inicial, respectivamente, e calcule o ponto de controle real e as coordenadas do ponto final com base nos valores reais das coordenadas x, y e na diferença de pixels da imagem a ser deslocada em H5 . Em seguida, combine essas três coordenadas. Clique em Aplicar à fórmula.