어떻게 파라볼 릭하게 번역합니까?

Question

간단한 애니메이션으로 iPhone 앱을 만들고 있습니다.

번역 할보기가 있지만 줄을 따라 가지 않습니다. 나는 그것을 parabolically 번역하고 싶다. 내가 구부러진 길을 따라 움직이는 자동차를 움직이는 것이라고 상상해보십시오.

나는 내가이

문제가 CGAffineTransform의 인스턴스로 제대로 변환 설정할 수 있습니다 알고, 나는 변환을 생성하는 방법을 모른다. 나는 스케일링, 번역 등을하는 법을 알고 있지만, 어떻게 파라볼 릭하게 번역합니까? 심지어 가능할까요?

Answer 1

부드러운 곡선을 따라 애니메이션을 적용하려면 CAKeyframeAnimation을 사용하는 것이 좋습니다. this answer에서 나는 커브를 따라 이미지 뷰를 움직이는 조합 된 애니메이션을위한 코드를 제공하고 크기를 변경하고 페이드 아웃하는 동안 코드를 제공합니다. 이 가로 모드 (두 제어점 뷰의 원점 하나는 상기 디스플레이의 우측 상단 코너에서 서로 곡선을 작성

// Set up path movement 
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
pathAnimation.calculationMode = kCAAnimationPaced; 
pathAnimation.fillMode = kCAFillModeForwards; 
pathAnimation.removedOnCompletion = NO; 

CGPoint endPoint = CGPointMake(480.0f - 30.0f, 40.0f); 
CGMutablePathRef curvedPath = CGPathCreateMutable(); 
CGPathMoveToPoint(curvedPath, NULL, viewOrigin.x, viewOrigin.y); 
CGPathAddCurveToPoint(curvedPath, NULL, endPoint.x, viewOrigin.y, endPoint.x, viewOrigin.y, endPoint.x, endPoint.y); 
pathAnimation.path = curvedPath; 
CGPathRelease(curvedPath); 

다음과 같이 그 코드의 관련 부분은). 경로 생성에 대한 자세한 내용은 Quartz 2D Programming Guide 또는 Animation Types and Timing Programming Guide을 참조하십시오.

이 애니메이션을 사용하려면 다음과 같이 사용하여 뷰의 레이어에 추가해야합니다 :

[imageViewForAnimation.layer addAnimation:pathAnimation forKey:@"curveAnimation"]; 

Answer 2

변형 속성을 포물선을 따라 선택된 x, y 매개 변수로 작성된 CGAffineTransformTranslate (주기적으로 변환 속성을 설정해야 함 (러셀이 x에서 y를 얻거나 x를 y로 가져 오도록 제안하거나 그 반대로)하는 것처럼 들립니다.

포물선을 따라 곡선을 그리면서 자동차를 회전 시키려면 (더 사실적으로 보일 것입니다) CGAffineTransormRotate이 필요합니다. 현재 그리는 지점에서 포물선의 기울기를 기준으로 각도를 결정합니다. 경사면에서 각도를 계산하려면 atan() 함수가 필요합니다. 고통처럼 들리지만, 더 쉬운 방법이 있습니다.

나는 정말로 내가 무엇에 관해 말하고 있는지 모른다, 나는 단지이 blog 입구 : Demystifying CGAffineTransform를 읽었다.

Answer 3

곡선을 ​​따라 애니메이션을 적용하는 예술적으로 즐거운 방법은 splines을 사용하는 것입니다. 이것들은 수학적으로 간단하고 계산 상 효율적입니다. 포물선 아치를 풀 수있는 최소 차수 스플라인은 2 차 스플라인입니다.

Answer 4

TokenMacGuy의 제안은 스플라인을 사용하는 것이 좋습니다. 다시 말하지만, 내가 무슨 말을하고 있는지는 모르지만 어쩌면 이것이 당신에게 몇 가지 아이디어를 줄 것입니다.

정확하게 포물선이어야합니까? 아니면 근사치가되어야합니까? 무엇을하고 싶은지는 rendering text along a curve과 매우 비슷합니다 (screenshot 참조). 그 일련의 게시물은 각도 계산 및 내용에 대해 설명하는 꽤 좋은 방법 인 것처럼 보입니다. 각 "캐릭터"는 자동차 위치에 해당합니다. 아크 길이를 매개 변수화하면 속도가 일정합니다.

아이폰에서 그렇게하는 방법은 ... 잘 모르겠다.

Answer 5

은 추가 경로를 따라 이미지의 회전을 포함을 다음

pathAnimation.rotationMode = @"auto"; 

당신은 또한 왜 그냥 determi 됨 easeIn 인/아웃 효과

pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];