Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h3>UPDATE</h3> <p><a href="https://stackoverflow.com/a/13578767/77567">See my other answer</a> for a solution that doesn't have glitches.</p> <h3>ORIGINAL</h3> <p>This is a fun little problem. I don't think we can solve it perfectly with just Core Animation, but we can do pretty well.</p> <p>We should set up the mask when the view is laid out, so we only have to do it when the image view first appears or when it changes size. So let's do it from <code>viewDidLayoutSubviews</code>:</p> <pre><code>- (void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; [self setUpMask]; } - (void)setUpMask { arrowLayer = [self arrowLayerWithFrame:imageView.bounds]; imageView.layer.mask = arrowLayer; } </code></pre> <p>Here, <code>arrowLayer</code> is an instance variable, so I can animate the layer.</p> <p>To actually create the arrow-shaped layer, I need some constants:</p> <pre><code>static CGFloat const kThickness = 60.0f; static CGFloat const kTipRadians = M_PI_2 / 8; static CGFloat const kStartRadians = -M_PI_2; static CGFloat const kEndRadians = kStartRadians + 2 * M_PI; static CGFloat const kTipStartRadians = kEndRadians - kTipRadians; </code></pre> <p>Now I can create the layer. Since there's no “arrow-shaped” line end cap, I have to make a path that outlines the whole path, including the pointy tip:</p> <pre><code>- (CAShapeLayer *)arrowLayerWithFrame:(CGRect)frame { CGRect bounds = (CGRect){ CGPointZero, frame.size }; CGPoint center = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds)); CGFloat outerRadius = bounds.size.width / 2; CGFloat innerRadius = outerRadius - kThickness; CGFloat pointRadius = outerRadius - kThickness / 2; UIBezierPath *path = [UIBezierPath bezierPath]; [path addArcWithCenter:center radius:outerRadius startAngle:kStartRadians endAngle:kTipStartRadians clockwise:YES]; [path addLineToPoint:CGPointMake(center.x + pointRadius * cosf(kEndRadians), center.y + pointRadius * sinf(kEndRadians))]; [path addArcWithCenter:center radius:innerRadius startAngle:kTipStartRadians endAngle:kStartRadians clockwise:NO]; [path closePath]; CAShapeLayer *layer = [CAShapeLayer layer]; layer.frame = frame; layer.path = path.CGPath; layer.fillColor = [UIColor whiteColor].CGColor; layer.strokeColor = nil; return layer; } </code></pre> <p>If we do all that, it looks like this:</p> <p><img src="https://i.stack.imgur.com/hjt2Z.png" alt="full arrow"></p> <p>Now, we want the arrow to go around, so we apply a rotation animation to the mask:</p> <pre><code>- (IBAction)goButtonWasTapped:(UIButton *)goButton { goButton.enabled = NO; [CATransaction begin]; { [CATransaction setAnimationDuration:2]; [CATransaction setCompletionBlock:^{ goButton.enabled = YES; }]; CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; animation.autoreverses = YES; animation.fromValue = 0; animation.toValue = @(2 * M_PI); [arrowLayer addAnimation:animation forKey:animation.keyPath]; } [CATransaction commit]; } </code></pre> <p>When we tap the Go button, it looks like this:</p> <p><img src="https://i.stack.imgur.com/IHCBC.png" alt="rotating unclipped arrow"></p> <p>That's not right, of course. We need to clip the arrow tail. To do that, we need to apply a mask to the mask. We can't apply it directly (I tried). Instead, we need an extra layer to act as the image view's mask. The hierarchy looks like this:</p> <pre><code>Image view layer Mask layer (just a generic `CALayer` set as the image view layer's mask) Arrow layer (a `CAShapeLayer` as a regular sublayer of the mask layer) Ring layer (a `CAShapeLayer` set as the mask of the arrow layer) </code></pre> <p>The new ring layer will be just like your original attempt to draw the mask: a single stroked ARC segment. We'll set up the hierarchy by rewriting <code>setUpMask</code>:</p> <pre><code>- (void)setUpMask { CALayer *layer = [CALayer layer]; layer.frame = imageView.bounds; imageView.layer.mask = layer; arrowLayer = [self arrowLayerWithFrame:layer.bounds]; [layer addSublayer:arrowLayer]; ringLayer = [self ringLayerWithFrame:arrowLayer.bounds]; arrowLayer.mask = ringLayer; return; } </code></pre> <p>We now have another ivar, <code>ringLayer</code>, because we'll need to animate that too. The <code>arrowLayerWithFrame:</code> method is unchanged. Here's how we create the ring layer:</p> <pre><code>- (CAShapeLayer *)ringLayerWithFrame:(CGRect)frame { CGRect bounds = (CGRect){ CGPointZero, frame.size }; CGPoint center = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds)); CGFloat radius = (bounds.size.width - kThickness) / 2; CAShapeLayer *layer = [CAShapeLayer layer]; layer.frame = frame; layer.path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:kStartRadians endAngle:kEndRadians clockwise:YES].CGPath; layer.fillColor = nil; layer.strokeColor = [UIColor whiteColor].CGColor; layer.lineWidth = kThickness + 2; // +2 to avoid extra anti-aliasing layer.strokeStart = 1; return layer; } </code></pre> <p>Note that we're setting the <code>strokeStart</code> to 1, instead of setting the <code>strokeEnd</code> to 0. The stroke end is at the tip of the arrow, and we always want the tip to be visible, so we leave it alone.</p> <p>Finally, we rewrite <code>goButtonWasTapped</code> to animate the ring layer's <code>strokeStart</code> (in addition to animating the arrow layer's rotation):</p> <pre><code>- (IBAction)goButtonWasTapped:(UIButton *)goButton { goButton.hidden = YES; [CATransaction begin]; { [CATransaction setAnimationDuration:2]; [CATransaction setCompletionBlock:^{ goButton.hidden = NO; }]; CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; animation.autoreverses = YES; animation.fromValue = 0; animation.toValue = @(2 * M_PI); [arrowLayer addAnimation:animation forKey:animation.keyPath]; animation.keyPath = @"strokeStart"; animation.fromValue = @1; animation.toValue = @0; [ringLayer addAnimation:animation forKey:animation.keyPath]; } [CATransaction commit]; } </code></pre> <p>The end result looks like this:</p> <p><img src="https://i.stack.imgur.com/HtXfA.gif" alt="rotating clipped arrow"></p> <p>It's still not perfect. There's a little wiggle at the tail and sometimes you get a column of blue pixels there. At the tip you also sometimes get a whisper of a white line. I think this is due to the way Core Animation represents the arc internally (as a cubic Bezier spline). It can't perfectly measure the distance along the path for <code>strokeStart</code>, so it approximates, and sometimes the approximation is off by enough to leak some pixels. You can fix the tip problem by changing <code>kEndRadians</code> to this:</p> <pre><code>static CGFloat const kEndRadians = kStartRadians + 2 * M_PI - 0.01; </code></pre> <p>And you can eliminate the blue pixels from the tail by tweaking the <code>strokeStart</code> animation endpoints:</p> <pre><code> animation.keyPath = @"strokeStart"; animation.fromValue = @1.01f; animation.toValue = @0.01f; [ringLayer addAnimation:animation forKey:animation.keyPath]; </code></pre> <p>But you'll still see the tail wiggling:</p> <p><img src="https://i.stack.imgur.com/Gzqn9.gif" alt="rotating clipped arrow with tweaks"></p> <p>If you want to do better than that, you can try actually recreating the arrow shape on every frame. I don't know how fast that will be.</p>
    singulars
    1. This table or related slice is empty.
    1. POanimating the length of circular arrow mask in Core Animation
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USrob mayoff
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload