animationFrame을 사용하는 불안정한 애니메이션

Question

Windows 8 로딩 애니메이션을 기반으로 간단한 간단한 회 전자 위젯을 작성 했으므로 각각의 점이 왜 약간 흔들리는 지 파악할 수 없었습니다. 저는 값을 표준화하기 위해 여러 가지를 시도해 보았습니다. 그리고 그 값을 부드럽게 해주는 것을 발견하지 못했습니다. 내가 잘못 뭐하는 거지

http://jsbin.com/ilafov/16

?

Answer 1

나는 직감과 스크린 샷을 찍었습니다. 애니메이션에 서브 픽셀 애니메이션이 나타나지 않습니다.

애니메이션이 사실적으로 매끄 럽기 위해서는 픽셀 단위로 픽셀을 이동하려면 한 곡에서 다른 곡으로 건너 뛰지 말고 평균으로 움직이는 것을 상상하십시오. 픽셀은 천천히 한 공간에서 다음 공간으로 이동합니다. 점차 페이드 아웃되어 점차적으로 사라지는 픽셀에 의해이를 시뮬레이션 할 수 있습니다.

애니메이션을 스크린 샷 할 때 서브 픽셀 애니메이션의 기호가없는 모든 점을 보았습니다.

내 비즈니스 페이지를 보면 : http://matthewrconsultancy.co.uk/start 크롬과 같은 것을 사용하면 톱니 바퀴가 움직이는 것을 볼 수 있습니다. SVG 및 SMIL 애니메이션을 사용하지만 하위 픽셀 수준에서 애니메이션이 확대되는 것을 보시면 알 수 있습니다. 지금 당장 당신을 위해 문제를 해결하는 방법을 찾을 시간이 없지만, 무엇이 잘못되었는지에 대한 주요 질문에 직접 대답 할 수 있습니다.

Answer 2

일부 옵션 :

1) 원 애니메이션 캔버스를 사용해보십시오. 초기화하는 동안, 하나의 원을 오프 스크린 캔버스에 그리고 getImageData를 사용하여 imageData를 쉽게 액세스 할 수있는 변수에 저장할 수 있습니다. 애니메이션의 각 프레임 동안 기본 애니메이션 캔버스에서 각각의 좌표에있는만큼 많은 원에 대해 putImageData를 사용하십시오. 모든 새로운 프레임을 지우는 것을 잊지 마십시오.

2) 해상도 독립적 이미지 (SVG, CSS 스타일링 또는 사용자 화면 DPI 및 브라우저 자체의 픽셀 표시에 따라 컨텍스트를 업데이트하는 API가있는 Canvas)로 서클을 저장합니다. 그런 다음 transform : translate3d (x, y, z)를 사용하여 원을 이동하려고 할 수 있습니다. 이 변환을 가능하게하는 하드웨어 가속이 브라우저가 특정 요소에서 하위 픽셀 앤티 앨리어싱을 사용하지 못한다는 말을들은 적이 있지만 이것은 더 매끄러운 결과를 제공 할 수 있습니다. 또한 transform 속성은 공급 업체 접두사를 사용한다는 점도 기억하십시오.

희망이 도움이됩니다.