RaphaelJS - Simultaneous Animation

Question

매우 일관되게 생성되는 퐁볼이 있는데, 비율이 동적으로 변경됩니다. 그래서 두 번째 주어진에,있을 수 1 그려지는 것 공을 탁구 화면 (왼쪽에서 오른쪽으로 지속적으로 )에 걸쳐 번역, 또는

50. 나는이의 생성에 따라 반응하는 탁구 패들가 볼 들이며, 볼의 모든 것을 "잡아" 이 목적지를 향해 전송됩니다. x 축 좌표는 항상 이며, pong 패들이 절대 이동하지 않지만 y 좌표는 무작위로 입니다.

는 여기에 내가 뭘하는지의 매우 유사한 (그렇지 않으면 동일) 예제 : http://www.youtube.com/watch?v=HeWfkPeDQbY

이미 작성이 코드를 많이 가지고 있지만, 나는 공입니다 잡기 위해 내 디자인 두려워 부정확하거나 비효율적이다. 그것은 작동하지만, 패들은 매우 쉽게 그쪽으로 던져 되고있는 공과 동기화 불통됩니다.

나는 현재이 일을 해요 방법은 전역 배열에 각각 볼 오브젝트를 넣어, 그리고 패들이 큐 떨어져 다음 공을 뜨고 그것이 에 필요로하는 속도를 계산하는 기본적인 연산을 사용하여 다음 공의 y 좌표로 변환하십시오.

더 효율적인 방법이 있습니까?

Answer 1

각 공 (및 외륜)의 움직임이 별도의 타이머로 제어된다는 것이 문제라고 가정합니다. js 타이머의 정확성에 대한 보장이 없기 때문에 은 많은 타이머가 상호 작용할 것을 보장하지 않습니다. 문제를 해결하기 위해

두 가지 방법은 다음과 같습니다

가

1. 대신 raphaeljs 애니메이션 프리미티브를 사용하는 동기의 각 볼의 위치 (그리고 패)를 업데이트 setTimer와 동기 애니메이션을 직접 구현한다. 그런 다음 타이머 스터 터가 우주의 모든 요소에 일관되게 적용됩니다.

2. 예를 들어 피드백을 사용하여 패들 위치를 수정합니다. 패들이 얼마나 가깝게 있는지를 주기적으로 바라보고, 필요하다면 패들의 애니메이션에서 .stop()을 호출하여보다 적극적인 매개 변수로 다시 실행하고 간격을 좁히는 특수 setTimer를 사용합니다.