HTML5의 이미지 포물선 운동에 대한 몇 가지 생각에 대한 간략한 토론

물체/그림이 포물선, 더 정확하게는 베지어 곡선을 따라 움직이는 것이 일반적입니다. 이는 H5 개발의 일반적인 요구 사항이므로 설계 초안을 기반으로 이동 경로를 빠르게 계산하는 방법이 개발자의 첫 번째 문제입니다. 해결하다.

여기서 H5 개발에 일반적으로 사용되는 디자인 초안 크기는 640*1008이므로 이 크기를 기반으로 한 솔루션 아이디어는 다음과 같습니다.

1. 먼저 PS에서 이동할 요소를 별도로 png로 내보냅니다. 설계 초안에서 이동 경로를 계획한 경우 경로도 png로 내보내야 합니다.

2. 디자인 초안과 동일한 크기로 AI에서 새 파일을 생성한 다음 아래 그림과 같이 모션 경로가 있는 경우 해당 파일에 변위 요소를 두 번 드래그합니다.

여기서 주목해야 할 것은 변위 이미지의 배치입니다. 경로의 시작점과 끝점은 이미지의 이동 지점과 일치해야 합니다. 해당 상황은 다음과 같습니다.

1. 캔버스에는 변형 처리가 없으므로 이동 지점은 그림의 왼쪽 상단입니다.
2. 캔버스에서는 moveImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)의 dx와 dy가translate(x1, y1)의 x1과 y1을 기준으로 추가되었기 때문에 이미지가 번역되어 이동되었습니다. 최종 오프셋.
3. 요소의 위치가 position:absolute로 지정되고 변환에서 위치가translate3d(x, y, z)로 제어되는 경우 오프셋은 x, y여야 합니다. 일반적으로 변환에서는 왼쪽, 위쪽 및 추가 여백을 제어할 수 있습니다. 요소의 위치를 ​​변경하려면 변환에 추가로translate3D(marginLeftX, marginLeftY, 0)를 추가해야 합니다. 이 여백 값도 고려해야 합니다.

3. AI에서 아래 그림과 같이 ctrl + r 키를 사용하여 참조선을 끌어내고 요소 그림을 이동하여 x 및 y 위치를 끌어냅니다.

그런 다음 펜 도구를 선택하고 시작점과 끝점을 클릭합니다. 끝점을 클릭한 후 마우스를 떼지 말고 AI를 직접 드래그하면 자동으로 2개의 제어점이 추가됩니다. 도구에 의해 생성된 경로의 목적은 아래 표시된 대로 디자인 초안의 참조선 경로와 일치할 때까지입니다.

원하는 위치로 드래그한 후 마우스를 놓고 키보드의 Enter 키를 눌러 경로를 확인합니다. 윤곽선 경로가 원하는 경로가 아닌 경우 제어점을 계속 드래그하여 조정할 수 있습니다.

4. 조정이 완료되면 추가 기준선 2개를 제어점 1의 위치로 드래그한 후 메뉴바-창-정보를 통해 정보패널을 열고 시작점, 제어점, 종료점, 3개 지점을 변경합니다. 각각 좌표를 꺼내세요.

5. 제어점, 끝점, 시작점 각각의 픽셀 차이를 계산하고, H5에서 변위될 사진의 실제 x, y 좌표 값과 픽셀 차이를 기반으로 실제 제어점과 끝점 좌표를 계산합니다. 그런 다음 이 세 좌표를 결합하고 공식에 적용을 클릭합니다.