animationUIView转换像扩展点圆形

在我的iPhone应用程序中，我需要实现不同types的转换。

那是

从当前视图开启下一个视图，

它的形状像一个圆点，圆点像一个圆圈一样缓慢地扩大，下一个圆圈的一部分与圆圈部分一起显示，最后圆圈完全展开，下一个视图完全出现。

我search了很多像CATransitions和一些cocoa控制器上的animation，但是我没有find这种types的转换，任何人都可以帮助我。

Answer 1

在我的情况下，我这样做了：

将CAShapeLayer实例设置为自定义视图子类的图层的mask属性

 @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; } 

将此遮罩图层缩放为全尺寸。 你的观点代码：

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

遮罩层的代码：

 @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 

从文档：

图层的Alpha通道决定了图层的内容和背景的显示。 完全或部分不透明的像素允许底层内容显示，但完全透明的像素屏蔽该内容。

这个属性的默认值是零零。 configuration遮罩时，请记得设置遮罩层的大小和位置，以确保遮罩层与遮罩层正确alignment。

所以我用UIBezierPath绘制了一个圆来实现圆形的蒙版。 在开始时我将遮罩的比例因子设置为0，因此视图的图层中没有可见的东西。 那么缩放因子被设置为1（填充图层的边界）animation，这给出了一个很好的圆圈animation，从中心增加了半径。

您可能需要更多的animation来移动视图的中心点。 两个animation都可以包装在CAAnimationGroup中。

Answer 2

那么我想我可以给你一个解决方法。 而不是像点一样推到下一个视图。 我build议你在视图的ViewWillAppear中添加一个简单的点animation，在这个视图中你必须被推送。 现在推送方法将保持不变

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

但是在ViewWillAppear ，代码会是这样的，即点将会展开成一个圆形，并在其下面显示新的视图。 希望你能理解我想在这里解释的逻辑。 任何问题都让我知道。

Answer 3

在第一视图中打开：

//注解的代表方法没有select – （void）tapOnAnnotation：（RMAnnotation *）注解onMap：（RMMapView *）map; {//获取GMS标记的触点，将它们设置为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; } } 

在下一个视图中closures：

 //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; } }