Animacja iOS Animowana przerywana ramka prostokątna

Question

Mam UIImageView wyświetlający obraz. Chcę "podświetlić" fragment obrazu, rysując zaokrąglony prostokąt. Chciałbym mieć zarys narysowany grubą, przerywaną linią, która "ożywia", ciągle zmieniając miejsce rozpoczęcia "początku" linii.

Zastanowiłem się nad rysowaniem koła, które wyglądało tak, jak chcę, a potem po prostu ożywiałem je, ale naprawdę potrzebuję rozwiązania prostokątnego, więc nie ma.

Tło:

Rysuję zaokrąglonego prostokąta granicy przez obliczenie 8 punktów a rysunek 4 prostych i 4 krzywe. (Może to być może łatwiejsze, ale to nie jest zepsuta część!)

Moim zdaniem, użyję zmiennej "offset", która zaczyna się w lewym górnym rogu zaokrąglonego prostokąta, gdzie lewa górna krzywa spotyka się z topowym prostym kawałkiem. Następnie zwiększę to "przesunięcie" w górnej części zaokrąglonego prostokąta, aż osiągnie górną prawą krzywą, po czym "zresetuję" zmienną "offset" do jej pierwotnej wartości.

Działa to prawie tak, jak bym chciał, dopóki nie pojawi się "reset". W tym momencie animacja jest szarpana (rodzaj oczekiwanego), ale wydaje się również, że porusza się w odwrotnym kierunku przez niewielką część czasu, przed wznowieniem ruchu "do przodu". Wreszcie, na początku/końcu linii przerywanej, otrzymuję dodatkowy długi segment na linii przerywanej. Wiem, że nie wszystkie mogą być równe długości (czy mogą to obliczyć?), Ale jak mogę utworzyć 2 krótsze segmenty zamiast 1 dłuższego segmentu?

Czy ktoś ma pojęcie, co mogę zrobić, aby uzyskać gładki wygląd "marching mrówek"? Wszelkie inne pomysły na dobry sposób (przy użyciu animacji) wywołują oko użytkownika do określonego obszaru ekranu? (Trzeba otoczyć szczególną obszar bez zasłaniając go.)

Aktualny kod:

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

} 

gula gula gula

Answer 1

Spróbuj użyć CAShapeLayer z CGPath swojego kształtu.

Zaokrąglona prostokątna ścieżka może być zbudowana przy użyciu wygodnej metody Uibezierpath.

Można ustawić wzór linii dla warstwy kształtu. Animacja właściwości linii warstwy kształtu dałaby "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]; 

Funkcja animacja może być

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

} 
    }