Animieren UIImageView mit Maske (Kern-Animationen mit Masken)

Habe ich ein UIImage in UIImageView (Objekt auf das Bild). Muss es animiert werden, auf der rechten Seite, aber diese animation muss maskiert werden mit diesem Kreis-Maske.
Animieren UIImageView mit Maske (Kern-Animationen mit Masken)

Mein aktuelle code:

CGMutablePathRef path = CGPathCreateMutable();

CGPathAddArc(path, NULL, 44, 44, 21, 0, 2 * M_PI, NO);

CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
[shapeLayer setPath:path];
[shapeLayer setFillColor:[[UIColor blackColor] CGColor]];
[shapeLayer setBounds:CGRectMake(0, 0, 44, 44)];
[shapeLayer setPosition:CGPointMake(0, 0)];

UIImageView *loadingShape = [[UIImageView alloc] initWithFrame:CGRectMake(6.5, 7.5, 89, 40)];
[loadingShape setImage:[UIImage imageNamed:@"object_image.png"]];
[self addSubview:loadingShape];
//Set the mask for the image view's layer
[[loadingShape layer] setMask:shapeLayer];

[UIView beginAnimations:nil context:nil];
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
[UIView setAnimationDuration:0.3];
[UIView setAnimationRepeatCount:10];
[loadingShape setFrame:CGRectMake(0, 7.5, 89, 40)];
[UIView commitAnimations];

Aber das belebt mein ganzes UIImageView maskiert. Ich brauche Maske zu statisch, nur Objekt hinter animiert werden.

Was ist die beste Lösung, um dieses?

InformationsquelleAutor dormitkon | 2012-03-23
  1. 4

    Die Ebenenmaske shapeLayer wirkt, als sei es ein Kind von der anderen Ebene [loadingShape layer]. Wenn die übergeordnete Ebene sich bewegt, das Kind bewegt sich mit ihm.

    Zusätzlich zu Ihrer aktuellen animation, Sie haben zu animieren shapeLayer, in die entgegengesetzte Richtung.

    Edit: Die animation gegründet von -[UIView beginAnimations:context:] macht gelten nicht automatisch für bare CALayer, so die animation manuell.

    CGPoint p = /* you decide the new position of the shapeLayer */;
CABasicAnimation* anim = [[CABasicAnimation alloc] init];
anim.toValue = [NSValue valueWithCGPoint:p];
anim.keyPath = @"position";
anim.timingFunction = [CAMediaTimingFunction functionWithName:@"easeOut"];
anim.duration = 0.3;
anim.repeatCount = 10;
[shapeLayer.mask addAnimation:anim forKey:nil];
[anim release];
    • Hmm, versucht, um dies zu tun, indem Sie animieren, die position der Ebene und Grenzen, aber ohne Erfolg 😐 könnt Ihr mir mit einigen snippet?
    • Sie sollten in der Lage sein, dies zu tun, indem er shapeLayer's position. Das ist wirklich alles dort ist zu ihm.
    • Ich habe gerade versucht, aber ich bin immer den gleichen Effekt 😐
    • Ich vermute, dass Sie erwartet, dass die UIView animation Parameter automatisch für den CALayer. Tun Sie das nicht. Ich habe einige code, um die Antwort.
    InformationsquelleAutor Kurt Revis
  2. 2

    Dank Kurt, ich verfeinert, ein wenig meine code und bekam, was ich wanter 🙂

    CGMutablePathRef path = CGPathCreateMutable();

    CGPathAddArc(path, NULL, 44, 44, 21, 0, 2 * M_PI, NO);

CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
[shapeLayer setPath:path];
[shapeLayer setFillColor:[[UIColor blackColor] CGColor]];
[shapeLayer setBounds:CGRectMake(0, 0, 44, 44)];
[shapeLayer setPosition:CGPointMake(0, 0)];

UIView *loadingView = [[UIView alloc] initWithFrame:CGRectMake(6.5, 7.5, 44, 44)];

UIImageView *loadingShape = [[UIImageView alloc] initWithFrame:CGRectMake(0, 18, 89, 40)];
[loadingShape setImage:[UIImage imageNamed:@"object_image.png"]];
[[loadingView layer] setMask:shapeLayer];
[loadingView addSubview:loadingShape];
[self addSubview:loadingView];
//Set the mask for the image view's layer

CABasicAnimation* anim = [[CABasicAnimation alloc] init];
anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 18)];
anim.toValue = [NSValue valueWithCGPoint:CGPointMake(15, 18)];
anim.keyPath = @"position";
anim.timingFunction = [CAMediaTimingFunction functionWithName:@"linear"];
anim.duration = 0.3;
anim.repeatCount = 100000;
[[loadingShape layer] addAnimation:anim forKey:nil];
    • Sie sind animierend position aber das es fromValue und toValue die CGRects. Sollten Sie auch nicht CGPoints?
    • Sie haben Recht, ich im code geändert. Aber beide Lösungen funktioniert 🙂
    InformationsquelleAutor dormitkon
Schreibe einen Kommentar