iOSanimation虚线矩形边框

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

我想绘制一个看起来像我想要的圆，然后简单地animation，但我真的需要一个矩形的解决scheme，所以这是出来的。

背景：

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

我的想法是，我将使用一个“偏移”variables，从圆angular矩形的左上angular开始，左上angular的曲线与最上面的直线段相交。 然后，我将在圆angular矩形的顶部增加这个“偏移”，直到它到达右上angular的曲线，然后我将“偏移”variables重设为其原始值。

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

任何人有一个想法，我可以做一个顺利的“前进的ant”的样子？ 任何其他的想法（使用animation）都会将用户的视线称为屏幕的特定区域？ （它需要围绕一个特定的区域，而不要遮掩它。）

当前代码：

- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextClearRect(context, rect); // Rounded corner will be 10% of average side length (ie, (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

尝试使用形状为CGPath的CAShapeLayer。

可以使用Uibezierpath便捷方法构造圆angular矩形path。

您可以设置形状图层的线条图案。 对形状图层的线条属性进行animation处理会使“ 行进中的ant像效果一样 ”。

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

animationfunction可以，

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