在长按事件上画一个圆圈

Question

当用户点击按钮时，我正在屏幕上画一个圆圈。动画持续时间已设置，并且 from 和 to 值也已设置。

我想要实现的是，动画应该以某种方式开始，因为用户长按按钮并继续直到他保持在屏幕上的点击，即长按的持续时间。 用户一抬起手指，圆圈就应该停止到到目前为止它已经完成的位置。

这是我的代码：

-(void)startCircularAnimation{

int radius = 50;
CAShapeLayer *circle = [CAShapeLayer layer];
// Make a circular shape
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius)
                                         cornerRadius:radius].CGPath;
// Center the shape in self.view
circle.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius,
                              CGRectGetMidY(self.view.frame)-radius);

// Configure the apperence of the circle
circle.fillColor = [UIColor clearColor].CGColor;
circle.strokeColor = [UIColor redColor].CGColor;
circle.lineWidth = 5;

// Add to parent layer
[self.view.layer addSublayer:circle];

// Configure animation
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration            = 15.0;
drawAnimation.repeatCount         = 1.0;  // Animate only once..

// Animate from no part of the stroke being drawn to the entire stroke being drawn
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue   = [NSNumber numberWithFloat:counter/drawAnimation.duration];

// Experiment with timing to get the appearence to look the way you want
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

// Add the animation to the circle
[circle addAnimation:drawAnimation forKey:@"draw"];
}

此方法执行动画，并且从我在长按处理程序方法的触摸开始情况下启动的计时器计算出起始值。我无法获得完美的长按持续时间。

长按事件方法是这样的。

 - (void)_handleLongPressGestureRecognizer:(UIGestureRecognizer *)gestureRecognizer{

    switch (gestureRecognizer.state) {
    case UIGestureRecognizerStateBegan:
    {
        counter = 0;
        timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(incrementCounter) userInfo:nil repeats:YES];


    }
    case UIGestureRecognizerStateEnded:{
        NSLog(@"State ended");
         [timer invalidate];

        break;
    }
    case UIGestureRecognizerStateCancelled:{
        NSLog(@"State cancelled");
        break;
    }
    case UIGestureRecognizerStateFailed:
    {

        break;
    }
    default:
        break;
  }

}

增量计数器方法如下

- (void)incrementCounter {
 counter++;
[self startCircularAnimation];
}

在用户将手指放在屏幕上之前，这并没有给我绘制圆圈所需的效果。

请在代码中提出一些建议以获得所需的功能。

提前致谢。

Answer 1

您需要遵循苹果指南https://developer.apple.com/library/ios/qa/qa1673/_index.html

所以在你的界面中我会声明以下内容

@interface ViewController ()

@property (nonatomic, strong) CAShapeLayer *circle;
@property (nonatomic, strong) CABasicAnimation *drawAnimation;
@property (strong, nonatomic) IBOutlet UIButton *circleButton;


@end

然后在视图中确实加载了

- (void)viewDidLoad
{
    [super viewDidLoad];

    int radius = 50;
    self.circle = [CAShapeLayer layer];
    // Make a circular shape
    self.circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius)
                                          cornerRadius:radius].CGPath;
    // Center the shape in self.view
    self.circle.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius,
                               CGRectGetMidY(self.view.frame)-radius);

    // Configure the apperence of the circle
    self.circle.fillColor = [UIColor clearColor].CGColor;
    self.circle.strokeColor = [UIColor redColor].CGColor;
    self.circle.lineWidth = 5;

    self.circle.strokeEnd = 0.0f;

    // Add to parent layer
    [self.view.layer addSublayer:_circle];

    // Target for touch down (hold down)
    [self.circleButton addTarget:self action:@selector(startCircleAnimation) forControlEvents:UIControlEventTouchDown];

    // Target for release
    [self.circleButton addTarget:self action:@selector(endCircleAnimation) forControlEvents:UIControlEventTouchUpInside];

    /**
     Don't start Animation in viewDidLoad to achive the desired effect
    */


}

启动和恢复动画的函数（可能需要一个更好的名称）

-(void)startCircleAnimation{
    if (_drawAnimation) {
        [self resumeLayer:_circle];
    } else {
        [self circleAnimation];
    }
}

结束动画的功能

-(void)endCircleAnimation{
    [self pauseLayer:_circle];
}

生成动画的函数

- (void)circleAnimation
{
     // Configure animation
     self.drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
     self.drawAnimation.duration            = 10.0;
     self.drawAnimation.repeatCount         = 1.0; // Animate only once..


     // Animate from no part of the stroke being drawn to the entire stroke being drawn
     self.drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];

     // Set your to value to one to complete animation
     self.drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];

     // Experiment with timing to get the appearence to look the way you want 
     self.drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

     // Add the animation to the circle
     [self.circle addAnimation:_drawAnimation forKey:@"draw"];
}

Apple 的暂停和停止功能

   - (void)pauseLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
    layer.speed = 0.0;
    layer.timeOffset = pausedTime;
}

  - (void)resumeLayer:(CALayer*)layer
  {
      CFTimeInterval pausedTime = [layer timeOffset];
      layer.speed = 1.0;
      layer.timeOffset = 0.0;
      layer.beginTime = 0.0;
      CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
      layer.beginTime = timeSincePause;
  }

您要从中获得的主要观点是，您不考虑按钮被按下的时间，而只考虑从按钮 UIControlEventTouchDown 和 UIControlEventTouchUpInside 发送的事件

编辑：Gif

---

Answer 2

我认为你应该让你的 from 值与 counter 的值相关，这将使绘图从用户上次抬起手指时留下的内容开始。

你也应该让你的定时器的时间间隔更小，1秒太长，0.1秒会更好。