Jak tłumaczyć parabolicznie?

Question

Pracuję nad aplikacją na iPhone'a z prostą animacją.

Mam widok Chcę przetłumaczyć, ale nie wzdłuż linii. Chcę to przetłumaczyć parabolicznie. Wyobraź sobie, że animuję samochód poruszający się po zakrzywionej drodze.

wiem, że mogę ustawić odpowiednio przekształcić do instancji CGAffineTransform

Problem polega na tym, nie mam pojęcia, jak do tworzenia transformacji. Wiem, jak skalować, tłumaczyć itp., Ale jak mam tłumaczyć parabolicznie? Czy to możliwe?

Answer 1

Aby animować wzdłuż gładkiej krzywej, będziesz chciał użyć CAKeyframeAnimation. W this answer udostępniam kod dla połączonej animacji, która przesuwa widok obrazu wzdłuż krzywej, zmieniając jego rozmiar i gasnąc. Istotna część tego kodu jest następujący:

// 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); 

To tworzy krzywą z dwoma punktami kontrolnymi, po jednej na pochodzenia widzenia, a druga w prawym górnym rogu wyświetlacza (w trybie poziomym). Aby uzyskać więcej informacji na temat tworzenia ścieżek, zobacz Quartz 2D Programming Guide lub Animation Types and Timing Programming Guide.

Aby skorzystać z tej animacji, musisz dodać go do warstwy Państwa zdanie za pomocą czegoś podobnego, co następuje:

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

Answer 2

Wygląda na to, że musisz okresowo ustawić właściwość transform na CGAffineTransformTranslate utworzoną przy użyciu parametrów x, y wybranych wzdłuż paraboli (wykonaj to, co Russell zaproponował, aby uzyskać x z y lub odwrotnie).

Jeśli chcesz, aby Twój samochód się obracał podczas zakrzywień wzdłuż paraboli (będzie wyglądał bardziej realistycznie), będziesz potrzebować CGAffineTransormRotate. Określ kąt w oparciu o nachylenie paraboli w miejscu, w którym aktualnie rysujesz. Będziesz potrzebował funkcji atan() do obliczenia kąta nachylenia. Brzmi jak ból, mam nadzieję, że jest łatwiejszy sposób.

Naprawdę nie wiem, o czym mówię, po prostu przeczytałem ten wpis na blogu: Demystifying CGAffineTransform.

Answer 3

Estetycznym sposobem animacji wzdłuż krzywych jest użycie splines. Są matematycznie proste i wydajne obliczeniowo. Najmniejszy porządek, który rozwiązałby łuk paraboliczny, jest kwadratowym splajnem.

Answer 4

Myślę, że sugestia TokenMacGuy do używania splajnów jest dobra. Ponownie, nie wiem, o czym mówię, ale może to da ci kilka pomysłów.

Czy to musi być dokładnie parabola, czy będzie działać na zasadzie aproksymacji? To, co chcesz zrobić, brzmi bardzo podobnie do rendering text along a curve (patrz: screenshot). Ta seria postów wydaje się być całkiem niezłym poradnikiem - wyjaśnia obliczenia kąta i inne rzeczy. Każda "postać" odpowiada pozycji twojego samochodu. Parametryzacja długości łuku zapewnia stałą prędkość.

Jeśli chodzi o to, jak to zrobić na iPhonie ... nie mam pojęcia.

Answer 5

obejmuje obrót obrazu wzdłuż ścieżki, wystarczy dodać następujące

pathAnimation.rotationMode = @"auto"; 

można również dodać funkcję synchronizacji do tworzenia easeIn/oddalanie

pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];