iPhone：使用UIKit動畫圈

Question

我使用的是CircleView類，它基本上繼承了UIView並實現了drawRect繪製圓。這一切正常，歡呼！

但我不明白的是，當我觸摸它（觸摸代碼被實現）時，如何使它變成圓形或者彈出。通常我會使用UIKit動畫框架來做到這一點，但我基本上覆蓋了drawRect函數來直接繪製圓。那麼我怎麼做這個動畫呢？

- (void)drawRect:(CGRect)rect{ 
    CGContextRef context= UIGraphicsGetCurrentContext(); 

    CGContextSetFillColorWithColor(context, _Color.CGColor); 
    CGContextFillEllipseInRect(context, CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)); 
} 

- (void)handleSingleTap:(UITapGestureRecognizer *)recognizer { 
    // Animate? 
} 

Answer 1

答案取決於你的意思是「成長還是流行」。當我聽到「流行音樂」時，我認爲視圖在很短的時間內放大了，並且縮小到原始大小。另一方面，「增長」的東西會放大但不會再下降。

對於在短時間內再次縮放的東西，我會使用變換來縮放它。自定義繪圖與否，UIView支持動畫簡單變換。如果這是你正在尋找的東西，那麼它不會超過幾行代碼。

[UIView animateWithDuration:0.3 
         delay:0.0 
        options:UIViewAnimationOptionAutoreverse // reverse back to original value 
       animations:^{ 
        // scale up 10% 
        yourCircleView.transform = CGAffineTransformMakeScale(1.1, 1.1); 
       } completion:^(BOOL finished) { 
        // restore the non-scaled state 
        yourCircleView.transform = CGAffineTransformIdentity; 
       }]; 

如果在另一方面，你想圓種植更多一點點，每一個水龍頭，那麼這將不適合你，因爲該視圖去看看像素化時，它可擴展至做到這一點。製作自定義動畫可能會非常棘手，所以我仍然建議您對實際動畫使用縮放變換，然後在動畫之後重新繪製視圖。

[UIView animateWithDuration:0.3 
       animations:^{ 
        // scale up 10% 
        yourCircleView.transform = CGAffineTransformMakeScale(1.1, 1.1); 
       } completion:^(BOOL finished) { 
        // restore the non-scaled state 
        yourCircleView.transform = CGAffineTransformIdentity; 
        // redraw with new value 
        yourCircleView.radius = theBiggerRadius; 
       }]; 

如果你真的想做一個完全自定義動畫，那麼我會建議你看Rob Napiers talk on Animating Custom Layer Properties，他的例子是，即使你正在做的（成長圓）的確切的事情。

Answer 2

如果您想要一個從中心展開橢圓的動畫，請嘗試此操作。在標題中，定義了3個變量：

BOOL _isAnimating; 
float _time; 
CGRect _ellipseFrame; 

然後實現在.m文件這3種方法：

- (void)drawRect:(CGRect)rect; { 
    [super drawRect:rect]; 
    CGContextRef context= UIGraphicsGetCurrentContext(); 

    CGContextSetFillColorWithColor(context, _Color.CGColor); 
    CGContextFillEllipseInRect(context, _ellipseFrame); 
} 

- (void)expandOutward; { 
    if(_isAnimating){ 
    _time += 1.0f/30.0f; 

    if(_time >= 1.0f){ 
     _ellipseFrame = self.frame; 
     _isAnimating = NO; 
    } 
    else{ 
     _ellipseFrame = CGRectMake(0.0f, 0.0f, self.frame.size.width * _time, self.frame.size.height * _time); 
     _ellipseFrame.center = CGPointMake(self.frame.size.width/2.0f, self.frame.size.height/2.0f); 
     [self setNeedsDisplay]; 
     [self performSelector:@selector(expandOutward) withObject:nil afterDelay:(1.0f/30.0f)]; 
    } 
    } 
} 

- (void)handleSingleTap:(UITapGestureRecognizer *)recognizer; { 
    if(_isAnimating == NO){ 
    _time = 0.0f; 
    _isAnimating = YES; 
    [self expandOutward]; 
    } 
} 

這是能夠繪製圓從中心擴大了最基本的方式。如果您想要更詳細的動畫，請查看CADisplayLink，以便與屏幕保持同步。希望有助於！