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

答案取决于“成长或流行”的含义。当我听到“pop”时，我认为视图会在很短的时间内缩小，然后再缩小到原来的大小。另一方面，“增长”的东西会扩大但不会再次下降。

对于在短时间内再次放大和缩小的东西，我会使用变换来缩放它。是否自定义绘图，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以获得与屏幕的恒定同步。希望有帮助！

iPhone：使用UIKit动画圈

2 个答案: