이미지 크기 조정과 애니메이션 동작을 결합 할 때의 브라우저 성능

Question

플래시 애니메이션을 HTML로 변환하는 작업이 있습니다. 애니메이션은 다소 복잡하고 이미지 크기를 가로 215 픽셀에서 세로 930 픽셀로 늘리는 동시에 위치 (x, y)에서 위치 (x2, y2)로 여러 이미지 (9)를 옮길 필요가 있습니다.

단지 1-2 개의 이미지로이 애니메이션의 초기 테스트를 수행하는 동안이 애니메이션의 FF 처리에 많은 단속을 보았습니다. 문제를 해결하기 위해 애니메이션의 동적 크기 조정을 제거하고 점 A에서 점 B로 이동했습니다.

흥미로운 점은 크기를 조정 한 930px 이미지를 단순히 움직일 때 같은 동작을 보았습니다. ~ 215px (CSS 너비 또는 인라인 너비 속성 사용).

실제 크기가 215 픽셀 인 다른 이미지로 동일한 애니메이션을 시도하면 부드럽게 재생됩니다. 그런 다음 크기가 조정되지 않은 원래의 930px 크기의 이미지로 동일한 애니메이션을 시도했으며 잘 수행되었습니다.

이렇게하면 이동 될 때마다 브라우저가 이미지를 215px 크기로 "크기를 조정해야"하여 고르파니를 일으키는 지 궁금합니다. 이것은 올바른 가정입니까? 그렇다면 동시 이미지 크기 조정 및 이미지 이동을 허용하도록 애니메이션을 최적화하는 다른 방법이 있습니까?

주 :1) 내가 수행 한 최적화는 리플 로우 프로세스를 최소화하기 위해 이미지를 절대적으로 배치하는 것입니다. 2) jQuery와 fX 애니메이션 프레임 워크를 사용하여 애니메이션을 테스트했습니다.

Answer 1

요소를 사용하여 부드러운 애니메이션을 만드는 것은 거의 불가능합니다. 귀하의 문제를 해결하는 가장 좋은 방법은 기술 조합을 사용하는 것입니다 : WebKit 기반 브라우저를위한 CSS 애니메이션, 다른 현대적인 브라우저 (ff3-4, ie9) 및 가능하면 filter : transform()을 기반으로 한 애니메이션, 즉 6-8 .