Animieren einer CALayer-Maskengrößenänderung

Ich habe eine UIView Unterklasse, die verwendet eine CAShapeLayer Maske auf seine CALayer. Die Maske nutzt eine klare Form, mit drei abgerundeten Ecken und eine Aussparung für das Rechteck in der verbleibenden Ecke.

Wenn ich die Größe meiner UIView mit einem standard-animation-block, der UIView sich und seine CALayer Größe Prima. Die Maske jedoch ist umgehend angewendet, das führt zu einige zeichenprobleme.

Habe ich versucht, das animieren der Maske ist die Größenänderung mit einem CABasicAnimation aber habe keine Glück bekommen Sie die Größe animiert.

Kann ich irgendwie erreichen, eine animierte Größenanpassung Effekt auf der Maske? Brauche ich, um loszuwerden, der Maske, oder muss ich etwas ändern über die Art, wie ich derzeit ziehen Sie die Maske (mit - (void)drawInContext:(CGContextRef)ctx).

Cheers,
Alex

InformationsquelleAutor der Frage Alex Repty | 2010-05-26

37

Fand ich die Lösung für dieses problem. Die anderen Antworten sind teilweise richtig und hilfreich sind.

Folgende Punkte sind wichtig zum Verständnis der Lösung:
- Die mask-Eigenschaft ist nicht animierbar selbst.
- Da die Maske ist eine CALayer es kann animiert werden, auf seine eigene.
- Rahmen ist nicht animierbar, nutzen, Grenzen und position. Dies kann nicht für Sie(wenn Sie nicht versuchen, zu animieren, der Rahmen), aber es war ein Problem für mich. (Siehe Apple QA-1620)
- Eine view-Schicht die Maske ist nicht gebunden an UIView so wird es nicht erhalten, core animation Transaktion, die angewendet wird, um die view-Schicht.
- Verändern wir die CALayer direkt, so können wir nicht erwarten, dass UIView haben keine Idee, was wir versuchen zu tun, so dass die UIView animation nicht erstellen, die core animation Transaktion, die änderungen sind unsere Eigenschaften.
Um zu lösen, wir sind gehen zu müssen, Tippen Sie in Core Animation selbst und können nicht Sie verlassen sich auf die UIView animation-block zu tun, die für uns arbeiten.

Erstellen Sie einfach eine CATransaction mit der gleichen Dauer, dass Sie mit [UIView animateWithDuration:...]. Dies wird eine separate animation, aber wenn Ihre Dauer und die easing-Funktion ist die gleiche, es sollte animieren, genau mit den anderen Animationen in der Animations-block.
```
NSTimeInterval duration = 0.5;//match this to the value of the UIView animateWithDuration: call

[CATransaction begin];
[CATransaction setValue:[NSNumber numberWithFloat:duration] forKey:kCATransactionAnimationDuration];

self.myView.layer.mask.position = CGPointMake(newX, 0);
self.myView.layer.mask.bounds = CGRectMake(0, 0, newWidth, newHeight);

[CATransaction commit];
```
InformationsquelleAutor der Antwort Kekoa

Verwende ich eine CAShapeLayer Maske ein UIView durch Einstellung self.layer.mask zu, dass Form-Ebene.

Animieren der Maske, wenn die Größe der änderungen anzeigen, die ich überschrieb die -setBounds: zum animieren der Maske Schicht Pfad, wenn die Grenzen geändert werden, während eine animation.

Hier ist, wie ich es umgesetzt:

- (void)setBounds:(CGRect)bounds
{
    [super setBounds:bounds];
    CAPropertyAnimation *boundsAnimation = (CABasicAnimation *)[self.layer animationForKey:@"bounds"];

    //update the mask
    self.maskLayer.frame = self.layer.bounds;

    //if the bounds change happens within an animation, also animate the mask path
    if (!boundsAnimation) {
        self.maskLayer.path = [self createMaskPath];
    } else {
        //copying the original animation allows us to keep all animation settings
        CABasicAnimation *animation = [boundsAnimation copy];
        animation.keyPath = @"path";

        CGPathRef newPath = [self createMaskPath];
        animation.fromValue = (id)self.maskLayer.path;
        animation.toValue = (__bridge id)newPath;

        self.maskLayer.path = newPath;

        [self.maskLayer addAnimation:animation forKey:@"path"];
    }
}

(Zum Beispiel self.maskLayer `selbst.Schicht.Maske)

Meine -createMaskPath berechnet die CGPathRef, dass ich verwenden, um die Maske anzuzeigen. Ich update auch die Maske Weg in -layoutSubviews.

InformationsquelleAutor der Antwort stigi

5

Mask-Eigenschaft von CALayer ist nicht animierbar, die erklärt, Ihren Mangel an Glück in dieser Richtung.

Sieht die Zeichnung Ihrer Maske hängt vom Rahmen/Grenzen der Maske? (Können Sie einige code?) Hat die Maske haben needsDisplayOnBoundsChange-Eigenschaft gesetzt?

Cheers,
Corin

InformationsquelleAutor der Antwort Corin

Zu animieren, die Grenzen ändern der Maske die Schicht der UIView: UIView-Unterklasse, und animieren Sie die Maske mit einem CATransaction - ähnlich Kekodas Antwort, sondern mehr allgemein:

@implementation UIMaskView

- (void) layoutSubviews {
    [super layoutSubviews];

    CAAnimation* animation = [self.layer animationForKey:@"bounds"];
    if (animation) {
        [CATransaction begin];
        [CATransaction setAnimationDuration:animation.duration];
    }

    self.layer.mask.bounds = self.layer.bounds;
    if (animation) {
        [CATransaction commit];
    }
}

@end

InformationsquelleAutor der Antwort Nick H247

2

Der Maske parameter nicht animieren, aber Sie können animieren Sie die Ebene, die als Maske...

Wenn Sie animieren die CAShapeLayer die Path-Eigenschaft, sollte das animieren der Maske. Ich kann bestätigen, dass diese Werke aus meinen eigenen Projekten. Nicht sicher über die Verwendung einer nicht-Vektor-Maske, obwohl. Haben Sie versucht zu animieren, die Inhalte Eigentum der Maske?

Dank,
Jon

InformationsquelleAutor der Antwort Jon Hull
0

Konnte ich nicht finden keine programmatischen Lösung, so dass ich ziehen Sie einfach eine png-Bilddatei mit der richtigen Form-und alpha-Werte und benutzt, statt. So habe ich nicht verwenden müssen, eine Maske...

InformationsquelleAutor der Antwort Ida

Ist es möglich, die zum animieren der Maske ändern.

Bevorzuge ich CAShapeLayer als die Ebenenmaske. Es ist sehr bequem zu animieren einer Maske ändern Sie mit Hilfe der Eigenschaft path.

Bevor Sie animieren, jede änderung, dump den Inhalt der Quelle in eine Instanz CGImageRef, und erstellen Sie eine neue Ebene für die animation. Verstecken Sie die original-Ebene, während die animation und zeigen Sie es, wenn die animation endet.

Der folgenden ist ein Beispiel-code für die Erstellung von key-animation auf der Eigenschaft der Pfad.
Wenn Sie möchten, erstellen Sie Ihre eigenen Pfad-animation, stellen Sie sicher, dass es immer die gleiche Anzahl der Punkte in den Pfaden.

- (CALayer*)_mosaicMergeLayer:(CGRect)bounds content:(CGImageRef)content isUp:(BOOL)isUp {

    CALayer* layer = [CALayer layer];
    layer.frame = bounds;
    layer.backgroundColor = [[UIColor clearColor] CGColor];
    layer.contents = (id)content;

    CAShapeLayer* maskLayer = [CAShapeLayer layer];
    maskLayer.fillColor = [[UIColor blackColor] CGColor];
    maskLayer.frame = bounds;
    maskLayer.fillRule = kCAFillRuleEvenOdd;
    maskLayer.path = ( isUp ? [self _maskArrowUp:-bounds.size.height*2] : [self _maskArrowDown:bounds.size.height*2] );
    layer.mask = maskLayer;

    CAKeyframeAnimation* ani = [CAKeyframeAnimation animationWithKeyPath:@"path"];
    ani.removedOnCompletion = YES;
    ani.duration = 0.3f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    NSArray* values = ( isUp ?
        [NSArray arrayWithObjects:
        (id)[self _maskArrowUp:0],
        (id)[self _maskArrowUp:-ceilf(bounds.size.height*1.2)],
        nil] 
    :       
        [NSArray arrayWithObjects:
        (id)[self _maskArrowDown:0],
        (id)[self _maskArrowDown:bounds.size.height],
        nil] 
    );
    ani.values = values;
    ani.delegate = self;
    [maskLayer addAnimation:ani forKey:nil];

    return layer;
}

- (void)_startMosaicMergeAni:(BOOL)up {

    CALayer* overlayer = self.aniLayer;
    CGRect bounds = overlayer.bounds;
    self.firstHalfAni = NO;

    CALayer* frontLayer = nil;
    frontLayer = [self _mosaicMergeLayer:bounds 
                                content:self.toViewSnapshot 
                                isUp:up];
    overlayer.contents = (id)self.fromViewSnapshot;
    [overlayer addSublayer:frontLayer];
}

InformationsquelleAutor der Antwort Slavik

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.