컨테이너에 컨테이너의 중심을 유지하면 폭 + 높이, 애니메이션 불안감, 잘못된 수학이 애니메이션으로 나타 납니까?

Question

jquery를 사용하여 화살표가 컨테이너의 중심에 위치하게합니다 (원). Circle 컨테이너를 가리키면 원이 늘어나 자신의 너비, 높이 및 테두리 너비가됩니다. 제 문제는 수학이라고 생각합니다. 처음에는 제대로하고 있다고 생각했지만, 애니메이션의 화살표가 원할 경우, 제 수학이 잘못되었다고 생각하게 만듭니다. 나는 움직일 때 화살이 흔들리는 것을 막으려 고 노력하고있다.

이 첫 번째 바이올린은 테두리 너비를 애니메이션하고 같은 위치를 유지하기 위해 표시하기에 내 첫 번째 시도입니다 : 내가 갇혀에서 현재 해요 곳

http://jsfiddle.net/nicktheandroid/FVFen/

이 두 번째 바이올린은, 내가 다시 정렬 화살표를 시도했지만, 여전히 애니메이션 불안 :

http://jsfiddle.net/nicktheandroid/Q3pPF/

편집 : 잘못된 수학에 저는 믿습니다?

Answer 1

수학을 확인하는 데 시간이 많이 걸리지는 않았지만 브라우저가 정확하지 않은 문제가 발생했을 가능성이 큽니다. 의미, 그들은 하위 픽셀 렌더링을하지 않습니다. 값이 소수가 아닌 전체 값이라면 값이 잘 리므로 계산이 애니메이션을 통과 할 때 요소가 흔들리는 것처럼 보일 수 있습니다.

단방향 인 경우 - 한 방향으로 만 확장하거나 움직이는 경우 움직이기로되어 있고 눈에 충분히 부드럽게 보이기 때문에 눈에 띄지 않게됩니다. 그러나 고정 된 채로 있어야하는 화살표를 사용하면 왼쪽으로의 픽셀 홉과 오른쪽으로의 픽셀 홉으로 이어지는조차도 매우 눈에.니다.

Google 서브 픽셀 렌더링과 그게 귀찮은 문제입니다.

대부분의 경우 할 수있는 일이 없습니다. 어쩌면 화살표가 애니메이션의 일부가 아닌 나머지 원 위에 절대적으로 위치하게 할 수 있습니다.

오, 그리고 또 다른 점은 .stop()에 대한 화살표가 누락되었습니다. http://jsfiddle.net/Q3pPF/12/을 참조하십시오. 차이점은 화살표가 많이 움직이는 경우 (즉, 안팎으로) 내 것은 그렇지 않다.