ios - 在长按事件上画一个圆圈

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

然后在 View 中加载

- (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"];
}

暂停和停止苹果的功能

   - (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 发送的事件

编辑:动图

---