iOS版动画虚线框边境 [英] iOS Animate Dashed Rectangle Border

问题描述

我有一个UIImageView显示图像。我想通过绘制一个圆角矩形纲要突出的形象的一部分。我想有一个厚厚的，虚线说，动画通过不断改变其中线的开端开始绘制的轮廓。

I have a UIImageView displaying an image. I want to "highlight" a portion of the image by drawing a rounded rectangle outline. I would like to have the outline drawn with a thick, dashed line that "animates" by continually varying where the "beginning" of the line starts.

我想过画一个圆圈是有我想，然后只需动画它的模样，但我真的需要一个长方形的解决方案，让出去了。

I thought about drawing a circle that had the look I want and then simply animating it, but I really need a rectangular solution, so that's out.

背景：

我通过计算得到8分和4绘制直线和4条曲线绘制圆角矩形的边框。 （也许这可以更容易，但它不是破的一部分！）

I'm drawing the rounded rectangle border by calculating 8 points and drawing 4 straight lines and 4 curves. (Maybe this can be easier, but it's not the broken part!)

我的想法是，我将用一个补偿变量，开始在圆角矩形，在左上角的曲线符合最高直件的左上角。然后，我将增加此抵消跨圆角矩形的顶部，直到它到达右上方的曲线，于是我将重置抵消变到其原始值。

My thinking is that I'll use an "offset" variable that starts at the top-left of the rounded rectangle, where the top-left curve meets the top straight piece. Then, I will increment this "offset" across the top of the rounded rectangle until it reaches the top-right curve, whereupon I will "reset" the "offset" variable to its original value.

这是工作pretty多，因为我想，直到重置的发生。在这一点上，动画是干（一种预期），但它也出现在逆向行驶的时间的一小部分，恢复前进的运动之前。最后，在我的虚线的开始/结束，我坐上虚线超长段。我知道他们不可能都等长（可以吗？如何计算？），但我怎样才能使2短段，而不是1段长？

This is working pretty much as I'd like, until the "reset" occurs. At this point, the animation is jerky (kind of expected), but it also appears to travel in reverse for a small portion of the time, before resuming "forward" motion. Finally, at the beginning/end of my dashed line, I get an extra long segment on the dashed line. I know they can't all be equal-length (can they? how to calculate?), but how can I make 2 shorter segments rather than 1 longer segment?

任何人有什么我能做的顺利拿到了行进中的蚂蚁的那种样子的想法？上（使用动画）调用用户的眼睛到屏幕的特定区域的好方法任何其他的想法？ （它需要围绕特定区域不遮挡它。）

Anybody have an idea of what I can do to get a smooth "marching ants" kind of look? Any other ideas on a good way to (using animation) call the user's eye to a particular area of the screen? (It needs to surround a particular area without obscuring it.)

当前code：

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

    // Rounded corner will be 10% of average side length (i.e., (w + h) / 2)
    float averageSide = ([self HighlightRect].size.width + [self HighlightRect].size.height) / 2.0;
    float roundSize = averageSide * 0.10;

    // offset is a static, class variable
    offset += roundSize / 4.0;
    if ([WhereIAmView offset] < roundSize) {
        offset = roundSize;
    }
    if ([WhereIAmView offset] > ([self HighlightRect].size.width - roundSize)) {
        offset = roundSize;
    }

    // Set the "main" color of the rounded rectangle
    UIColor *lineColor = [UIColor colorWithRed:027.0/255.0 green:050.0/255.0 blue:224.0/255.0 alpha:1.0];
    CGContextSetStrokeColorWithColor(context, [lineColor CGColor]);
    CGContextSetLineWidth(context, 16.0);
    CGFloat pattern[] = {25.0, 5.0};
    CGContextSetLineDash(context, offset, pattern, 2);

    CGRect rRect = [self HighlightRect];
    // The top left corner
    CGPoint topLeft = CGPointMake(rRect.origin.x, rRect.origin.y);
    // The top right corner
    CGPoint topRight = CGPointMake(rRect.origin.x + rRect.size.width, rRect.origin.y);
    // The bottom right corner
    CGPoint bottomRight = CGPointMake(rRect.origin.x + rRect.size.width, rRect.origin.y + rRect.size.height);
    // The bottom left corner
    CGPoint bottomLeft = CGPointMake(rRect.origin.x, rRect.origin.y +     rRect.size.height);

    // The two points across the top of the rounded rectangle (left to right)
    CGPoint point1 = CGPointMake(rRect.origin.x + roundSize, rRect.origin.y);
    CGPoint point2 = CGPointMake(rRect.origin.x + rRect.size.width - roundSize, rRect.origin.y);
    // The two points along the right of the rounded rectangle (top to bottom)
    CGPoint point3 = CGPointMake(rRect.origin.x + rRect.size.width, rRect.origin.y + roundSize);
    CGPoint point4 = CGPointMake(rRect.origin.x + rRect.size.width, rRect.origin.y + rRect.size.height - roundSize);
    // The two points along the bottom of the rounded rectangle (right to left)
    CGPoint point5 = CGPointMake(rRect.origin.x + rRect.size.width - roundSize, rRect.origin.y + rRect.size.height);
    CGPoint point6 = CGPointMake(rRect.origin.x + roundSize, rRect.origin.y + rRect.size.height);
    // The two points along the left of the rounded rectangle (bottom to top)
    CGPoint point7 = CGPointMake(rRect.origin.x, rRect.origin.y + rRect.size.height - roundSize);
    CGPoint point8 = CGPointMake(rRect.origin.x, rRect.origin.y + roundSize);

    // Move to point 1
    CGContextMoveToPoint(context, point1.x, point1.y);
    // Add line to point 2 (this is the straight portion across the top)
    CGContextAddLineToPoint(context, point2.x, point2.y);
    // Add curve to point 3 (this is the rounded portion in top right)
    CGContextAddArcToPoint(context, topRight.x, topRight.y, point3.x, point3.y, roundSize);
    // Add line to point 4 (this is the straight portion across the right)
    CGContextAddLineToPoint(context, point4.x, point4.y);
    // Add curve to point 5 (this is the rounded portion in bottom right)
    CGContextAddArcToPoint(context, bottomRight.x, bottomRight.y, point5.x, point5.y, roundSize);
    // Add line to point 6 (this is the straight portion across the bottom)
    CGContextAddLineToPoint(context, point6.x, point6.y);
    // Add curve to point 7 (this is the rounded portion in bottom left)
    CGContextAddArcToPoint(context, bottomLeft.x, bottomLeft.y, point7.x, point7.y, roundSize);
    // Add line to point 8 (this is the straight portion across the left)
    CGContextAddLineToPoint(context, point8.x, point8.y);
    // Add curve to point 1 (this is the rounded portion in top left)
    CGContextAddArcToPoint(context, topLeft.x, topLeft.y, point1.x, point1.y, roundSize);

    // Stroke the path
    CGContextStrokePath(context);

}

凸点
凹凸凹凸

bump bump bump

推荐答案

尝试使用CAShapeLayer与形状CGPath。

Try Using CAShapeLayer with CGPath of your shape.

圆角矩形路径可以使用Uibezierpath方便的方法来构建。

Rounded rectangle path can be constructed using Uibezierpath convenience method.

您可以设置形状图层中的线条图案。动画形状图层的行属性将带来的行军蚁般的效果

You can set a line pattern for the shape layer. Animating the line property of the shape layer would give the "marching ants like effect".

shapeLayer = [CAShapeLayer layer];
CGRect shapeRect = CGRectMake(0.0f, 0.0f, 200.0f, 100.0f);
[shapeLayer setBounds:shapeRect];
[shapeLayer setPosition:CGPointMake(160.0f, 140.0f)];
[shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
[shapeLayer setStrokeColor:[[UIColor blackColor] CGColor]];
[shapeLayer setLineWidth:1.0f];
[shapeLayer setLineJoin:kCALineJoinRound];
[shapeLayer setLineDashPattern:
 [NSArray arrayWithObjects:[NSNumber numberWithInt:10], 
  [NSNumber numberWithInt:5], 
  nil]];
  UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:shapeRect cornerRadius:15.0];
[shapeLayer setPath:path.CGPath];
[[imageview layer] addSublayer:shapeLayer];

动画功能就可以了，

The animation function can be,

- (void)toggleMarching
  {
if ([shapeLayer animationForKey:@"linePhase"])
    [shapeLayer removeAnimationForKey:@"linePhase"];
else {
    CABasicAnimation *dashAnimation;
    dashAnimation = [CABasicAnimation 
                     animationWithKeyPath:@"lineDashPhase"];

    [dashAnimation setFromValue:[NSNumber numberWithFloat:0.0f]];
    [dashAnimation setToValue:[NSNumber numberWithFloat:15.0f]];
    [dashAnimation setDuration:0.75f];
    [dashAnimation setRepeatCount:10000];

    [shapeLayer addAnimation:dashAnimation forKey:@"linePhase"];

}
  }

这篇关于iOS版动画虚线框边境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！