2012-12-31 16 views
17

Chciałbym wiedzieć, jak zaimplementować niebieską kulę z pulsującym pierścieniem aktualnej lokalizacji na mapach, ale bez widoku mapy.IOS animowane pulsujące koło jak niebieska piłka na mapach

Zasadniczo chciałbym poznać najlepszy sposób na posiadanie niebieskiej kuli z pulsującym pierścieniem na zwykłym UIView (lub moim niestandardowym widoku) za każdym razem, gdy użytkownik dotyka ekranu, z tym, że ten środek jest środkiem niebieskiej kuli .

Mam 2 pomysły, najpierw mogę zaimplementować animację, której nie mogłem zrobić, ale prawdopodobnie jest to możliwe. Po drugie, mogę uzyskać sekwencję obrazów, na przykład gif, i wyświetlić go w dowolnym miejscu, w którym użytkownik dotknie.

Która z nich jest najlepsza? A może jest lepsza opcja?

Dziękuję.

Odpowiedz

44

Spróbuj tego:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(200, 200, 100, 100)]; 
view.backgroundColor = [UIColor blueColor]; 
view.layer.cornerRadius = 50; 

[self.view addSubview:view]; 

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; 
scaleAnimation.duration = 0.2; 
scaleAnimation.repeatCount = HUGE_VAL; 
scaleAnimation.autoreverses = YES; 
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.2]; 
scaleAnimation.toValue = [NSNumber numberWithFloat:0.8]; 

[view.layer addAnimation:scaleAnimation forKey:@"scale"]; 

Ustaw parametry, jak chcesz, aby zmodyfikować efekt.

Edit:

Trzeba dodać ramy QuartzCore i obejmują <QuartzCore/QuartzCore.h> to zadziałało.

+1

Dziękuję bardzo, że rozwiązał wszystkie moje problemy. Nie wiedziałem, że warstwa ma tę narożną własność Radiusa. –

+0

Jak mogę to zaakceptować =). Niestety, nigdy nie zadawano tu zbyt wielu pytań, po prostu szukałem tego, co już napisali ludzie. –

+0

Jeszcze jedno, co jeśli chcę, aby łuk nie był w pełni kompletny? jak od 0 do PI? Udało mi się to zrobić za pomocą CGContextAddArc, ale nie mogę ustawić szerokości obramowania. Właśnie się o tym dowiedziałem =), i tak dziękuję. Odpowiedź: CGContextSetLineWidth –

1

Lepszym podejściem jest wykonywanie animacji raczej niż z sekwencją obrazów (a także w jaki sposób Apple to robi). Ma wiele zalet, z których jeden ma znacznie lepszą wydajność (animacja sekwencji obrazów prawdopodobnie nie będzie działać przy 60FPS!).

Możesz osiągnąć tę animację na wiele sposobów: najprościej jest najprawdopodobniej stworzyć grafikę pierścienia w edytorze obrazów, a następnie utworzyć dla niej UIImageView. Następnie można po prostu animować właściwości skali, alfa i ramki (upewniając się, że obraz jest ustawiony na zmianę rozmiaru obrazu na skali) widoku. Aby upewnić się, że animacja pulsująca powtarza się w nieskończoność, możesz ustawić właściwość powtarzania animacji UIView. Twoja centralna "niebieska kula" może być oddzielną warstwą nałożoną na wierzch.

UIView Animacja jest dość prosta, a Apple ma dużo przykładowego kodu, abyś mógł zacząć. Po prostu zamykasz właściwości, które chcesz animować wewnątrz bloku animacji, wraz z parametrami animacji (czas trwania, powtórzenia itp.), A iOS wykona resztę. Wyszukiwanie w StackOverflow dla "animacji UIView" da ci wiele pytań, które mogą być pomocne.

16

spróbować to dla SWIFT

let view:UIView = UIView(frame: CGRectMake(200, 200, 100, 100)) 
view.layer.cornerRadius = 50 
view.backgroundColor = UIColor.blueColor() 

self.view.addSubview(view) 

let scaleAnimation:CABasicAnimation = CABasicAnimation(keyPath: "transform.scale") 

scaleAnimation.duration = 0.5 
scaleAnimation.repeatCount = 30.0 
scaleAnimation.autoreverses = true 
scaleAnimation.fromValue = 1.2; 
scaleAnimation.toValue = 0.8; 

view.layer.addAnimation(scaleAnimation, forKey: "scale") 
+0

scaleAnimation.repeatCount = 30.0 będzie tylko powtarzać animację dla 30 iteracji. Użyj scaleAnimation.repeatCount = HUGE, aby animacja powtarzała się w nieskończoność. – leafcutter

Powiązane problemy