원형 점이있는 선형 그래프로 애니메이션하기

Question

흥미로운 문제를 발견하고 그것을 해결하는 방법을 모르겠습니다. 데이터 점에 원형 점으로 표시되는 선 그래프가 있습니다. 현재 나는 라인 자체에 CAShapeLayer을 만들고 각 점에 대해서도 CAShapeLayer을 생성하고 있습니다.

선은 strokeEnd 애니메이션 키 경로로 애니메이션됩니다. 그리고 그것은 효과적입니다. 그러나 약간 부정적인 결과는 일단 그래프를 열면 이미 그려져있는 모든 데이터 포인트를 확인한 다음 라인을 통해 애니메이션이 적용된다는 것입니다.

처음에는 아무 것도 표시되지 않고 선이 애니메이션 데이터 점을 가져 오면 선이 그 선을 통과 할 때 그리는 방식으로이 동작을 변경하고 싶습니다.

나는이 문제에 대해 지금 당분간 생각하고 있었고 나는 그것을 해결하는 우아한 방법을 찾을 수 없다. 내가 원하는 것을 성취 할 수있는 쉬운 방법이 있어야한다고 생각합니다. 어쩌면 나는 합성 경로를 만들어야 할 것입니다. (그렇다면 점을 채워야 할 때 선을 칠할 필요가 있다고 어떻게 지정합니까?)

아무도 올바른 방향으로 안내하지 않습니까?

Answer 1

이 문제를 처리 할 수있는 방법이 많이 있습니다.

그래프의 X 증분이 일정하고 선형 타이밍을 사용한다고 가정하면 총 애니메이션 시간을 데이터 포인트 수로 간단히 나누고 포인트를 추가해야하는 시간을 계산할 수 있습니다 선이 그 X 위치로 진행할 때의 그래프. 적절한 시간 간격으로 상위 뷰의 레이어에 도트 모양 레이어를 추가하기 만하면됩니다.

그리기 방법을 변경하여 그래프 경로에 한 번에 하나씩 새로운 선분을 하나씩 추가하고 타이머에 추가하고 도트 모양을 동시에 추가 할 수 있습니다. 그러면 부드러운 선 그리기보다는 단계별 애니메이션을 얻을 수 있습니다.