iOS动画虚线矩形边框

Question

我有一个显示图像的UIImageView。我想通过绘制圆角矩形轮廓来“突出显示”图像的一部分。我想用一条粗虚线画出轮廓，通过不断改变线条的“开始”开始处的“动画”。

我曾想过画一个看起来像我想要的圆，然后简单地动画，但我真的需要一个矩形的解决方案，所以没有了。

背景：

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

我的想法是，我将使用一个“偏移量”变量，该变量从圆角矩形的左上角开始，其中左上角曲线遇见最直的一块。然后，我将在圆角矩形的顶部增加这个“偏移”，直到它到达右上曲线，于是我将“偏移”变量重设为其原始值。

这是工作非常符合我想，直到“重置”发生。在这一点上，动画是生涩的（预期的种类），但在恢复“前进”动作之前，它也似乎在一小段时间内反向传播。最后，在虚线的开始/结尾处，我在虚线上得到了一个超长的段。我知道他们不可能都是同等长度的（他们可以吗？如何计算？），但我怎样才能制作2个更短的片段而不是1个更长的片段？

任何人都有一个想法，我可以做些什么来获得顺利的“行军蚂蚁”的样子？任何其他想法（使用动画）都会将用户的视线称为屏幕的特定区域？ （它需要围绕一个特定的区域不会遮挡它。）

当前代码：

- (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); 

} 

凹凸 撞撞

Answer 1

尝试使用CAShapeLayer与形状的CGPath。

圆角矩形路径可以使用Uibezierpath便捷方法构造。

您可以设置形状图层的线条图案。动画形状图层的线条属性将显示“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]; 

动画功能就可以了，

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

} 
    }