animieren UIView Übergänge wie Punkt zu Kreis erweitern

Question

In meiner iPhone App muss ich eine andere Art von Übergang implementieren.

, das war

nächste Ansicht geöffnet von der aktuellen Ansicht,

es wie ein Punktstatistik, und der Punkt erweitert sich langsam wie ein Kreis mit in den Kreis neben Ansicht mit teilweise angezeigt werden, in der Teil des Kreises, schließlich dehnt sich der Kreis vollständig aus, die nächste Ansicht erscheint vollständig.

Ich suche viele Übergänge wie CATransitions und einige Animationen auf Kakao-Controller, aber ich habe diese Art von Übergang nicht gefunden, kann mir bitte helfen.

Answer 1

in meinem Fall habe ich es auf diese Weise:

setzen eine CAShapeLayer Instanz als Maske Eigenschaft Ihrer benutzerdefinierten Ansicht Unterklasse der Schicht

@interface MyCustomView() 
@property (nonatomic, strong) CircleShapeLayer *circleShapeLayer; 
@end 

@implementation MyCustomView 

- (id) initWithFrame: (CGRect) frame { 
    self = [super initWithFrame: CGRectZero]; 
    if (self) { 
     self.layer.mask = self.shapeLayer; 
     [self.layer.mask setValue: @(0) forKeyPath: @"transform.scale"]; 
    } 
    return self; 
} 

zoom diese Maskenschicht LISTEN. Code Ihrer Ansicht:

- (void) zoom { 
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath: @"transform.scale"]; 
    animation.fromValue = [self.layer.mask valueForKeyPath: @"transform.scale"]; 
    animation.toValue = @(1); 
    animation.duration = 2.0; 
    animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut]; 
    animation.delegate = self; 
    // Important: change the actual layer property before installing the animation. 
    [self.layer.mask setValue: animation.toValue forKeyPath: animation.keyPath]; 
    // Now install the explicit animation, overriding the implicit animation. 
    [self.layer.mask addAnimation: animation forKey: animation.keyPath]; 
    return; 
} 

- (CAShapeLayer *) circleShapeLayer { 
    if (!_ circleShapeLayer) { 
     _circleShapeLayer = [SGMaskLayer layer]; 
     _circleShapeLayer.delegate = _shapeLayer; 
     _circleShapeLayer.frame = self.bounds; 
     _circleShapeLayer.needsDisplayOnBoundsChange = YES; 
    } 

    return _circleShapeLayer; 
} 

@end 

der Code der Maskenschicht:

@interface CircleShapeLayer : CAShapeLayer 
@end 

@implementation CircleShapeLayer 

- (void) drawLayer: (CALayer *) layer inContext: (CGContextRef) ctx { 
    UIGraphicsPushContext(ctx); 
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect: self.bounds]; 
    self.path = circlePath.CGPath; 
    UIGraphicsPopContext(); 
} 

@end 

aus der Dokumentation:

Die Alphakanal bestimmt die Schicht, wie viel des Inhalts der Schicht und Hintergrund zeigt durch. Vollständig oder teilweise undurchsichtige Pixel erlauben den zugrunde liegenden Inhalt durch zu zeigen, aber vollständig transparente Pixel diesen Inhalt zu blockieren.

Der Standardwert dieser Eigenschaft ist null. Bedenken Sie bei der Konfiguration einer -Maske, dass Sie die Größe und Position der Maskenebene auf einstellen, um sicherzustellen, dass sie korrekt mit der Ebene ausgerichtet ist, die sie maskiert.

Also zeichnete ich einen Kreis mit UIBezierPath, um die runde Maske zu erreichen. Zu Beginn setze ich den Skalierungsfaktor der Maske auf 0, so dass nichts von der Ebene der Ansicht sichtbar ist. dann wird der Maßstabsfaktor auf 1 gesetzt (das Füllen der Grenzen der Ebene), was eine schöne Animation eines Kreises ergibt, der seinen Radius von der Mitte erhöht.

Sie könnten eine weitere Animation benötigen, die den Mittelpunkt Ihrer Ansicht verschiebt. Beide Animationen können in eine CAAnimationGroup eingebunden werden.

Answer 2

Nun, ich denke ich Ihnen eine Abhilfe bieten kann. Anstatt wie ein Punkt zur nächsten Ansicht zu wechseln. Ich schlage vor, Sie fügen eine einfache Punktanimation in der ViewWillAppear der Ansicht hinzu, in der Sie gedrückt werden müssen. Nun würde das Push-Verfahren die gleichen bleiben wie

[self.navigationController pushViewController:NewView animated:YES]; 

Aber im ViewWillAppear der Code wäre, so dass der Punkt zu einem Kreis erweitern würde und die neue Ansicht unter ihm offenbaren. Ich hoffe, Sie verstehen die Logik, die ich hier zu erklären versuche. Jedes Problem lassen Sie mich wissen.

Answer 3

Open in ersten Blick:

// Delegate Methode zur Annotation haben select - (void) tapOnAnnotation: (RMAnnotation *) Anmerkung onMap: (RMMapView *) Karte; { // Um ​​den Berührungspunkt des GMS-Markers zu erhalten, um sie als Circle Transiton pos CGPoint markerPoint = annotation.position; x = markerPoint.x; y = markerPoint.y;

circleSize = 10; 
    radiusChange = 0; 

    //Populate Same Values to next view to close 
    VenueScreen.x = x; 
    VenueScreen.y = y; 

    VenueScreen.view.hidden = YES; 
    timer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(openVenueScreen) userInfo:nil repeats:YES]; 
    VenueScreen.view.frame = CGRectMake(0, 0, 320, 480); 
    [self.view addSubview:VenueScreen.view]; 

} 



//Circular transition to open Next view 
-(void)openVenueScreen 
{ 
    VenueScreen.view.hidden = NO; 
    VenueScreen.view.userInteractionEnabled = NO; 
    VenueScreen.view.alpha = 0.9; 
    self.view.userInteractionEnabled = NO; 

    int rChange = 0; // Its doing proper masking while changing this value 
    int radius = circleSize-rChange; 

    CAShapeLayer *circleShapeLayer = [CAShapeLayer layer]; 

    // Make a circular shape 
    circleShapeLayer.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x+radiusChange, y+radiusChange, 2.0*radius, 2.0*radius) 
                 cornerRadius:radius].CGPath; 
    radiusChange = radiusChange-10; 

    // Configure the apperence of the circle 
    [[VenueScreen.view layer] setMask:circleShapeLayer]; 

    //Start Transition 
    circleSize = circleSize+10; 

    if (circleSize > 480) 
    { 
     [[VenueScreen.view layer] setMask:nil]; 

     [timer invalidate]; //Stop titmer 

     VenueScreen.view.userInteractionEnabled = YES; 
     self.view.userInteractionEnabled = YES; 
     VenueScreen.view.alpha = 1; 

     //Populate to next view to close 
     VenueScreen.radiusChange = radiusChange; 
    } 

} 

Schließen Nächste:

//Close button Action 
-(IBAction)DismissVenueScreen:(id)sender; 
{ 
    timer = [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selector:@selector(dismissVenueScreen) userInfo:nil repeats:YES]; 
    NSLog(@"close button clciked"); 
} 

//Circular trasition to Close window 
-(void)dismissVenueScreen 
{ 
    int rChange = 0; // Its doing proper masking while changing this value 
    int radius = circleSize-rChange; 

    CAShapeLayer *circleShapeLayer = [CAShapeLayer layer]; 
    // Make a circular shape 
    circleShapeLayer.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(x+radiusChange,y+radiusChange, 2.0*radius, 2.0*radius) 
                 cornerRadius:radius].CGPath; 

    // Configure the apperence of the circle 
    [[self.view layer] setMask:circleShapeLayer]; 
    self.view.layer.masksToBounds = YES; 

    radiusChange = radiusChange+10; 
    circleSize = circleSize-10; 

    if (circleSize <= 0) 
    { 
     [timer invalidate]; //Stop titmer 
     [[self.view layer] setMask:nil]; 
     [self.view removeFromSuperview]; 
     circleSize = 480; 
    } 

}