动画UIView过渡,如扩展点到圆圈

Question

在我的iPhone应用程序中,我需要实现不同类型的过渡.

那是

从当前视图打开下一个视图,

它的状态像一个点,并且点像圆圈一样缓慢地扩展,在圆圈中,下一个视图将部分地显示在圆圈的一部分中,最后圆圈完全展开,下一个视图完全出现.

我搜索了许多转换,比如CATransitions,以及cocoa控制器上的一些动画,但我没有找到这种类型的转换,任何人都可以帮助我.

Answer 1

就我而言，我是这样做的：

\n\n

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

\n\n

@interface MyCustomView ()\n@property (nonatomic, strong) CircleShapeLayer *circleShapeLayer;\n@end\n\n@implementation MyCustomView\n\n- (id) initWithFrame: (CGRect) frame {\n    self = [super initWithFrame: CGRectZero];\n    if (self) {\n        self.layer.mask = self.shapeLayer;\n        [self.layer.mask setValue: @(0) forKeyPath: @"transform.scale"];\n    }\n    return self;\n}\n

\n\n

将此遮罩层缩放至全尺寸。您的观点的代码：

\n\n

- (void) zoom {\n    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath: @"transform.scale"];\n    animation.fromValue = [self.layer.mask valueForKeyPath: @"transform.scale"];\n    animation.toValue = @(1);\n    animation.duration = 2.0;\n    animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];\n    animation.delegate = self;\n    // Important: change the actual layer property before installing the animation.\n    [self.layer.mask setValue: animation.toValue forKeyPath: animation.keyPath];\n    // Now install the explicit animation, overriding the implicit animation.\n    [self.layer.mask addAnimation: animation forKey: animation.keyPath];\n    return;\n}\n\n- (CAShapeLayer *) circleShapeLayer {\n    if (!_ circleShapeLayer) {\n        _circleShapeLayer = [SGMaskLayer layer];\n        _circleShapeLayer.delegate = _shapeLayer;\n        _circleShapeLayer.frame = self.bounds;\n        _circleShapeLayer.needsDisplayOnBoundsChange = YES;\n    }\n\n    return _circleShapeLayer;\n}\n\n@end\n

\n\n

mask层的代码：

\n\n

@interface CircleShapeLayer : CAShapeLayer\n@end\n\n@implementation CircleShapeLayer\n\n- (void) drawLayer: (CALayer *) layer inContext: (CGContextRef) ctx {\n    UIGraphicsPushContext(ctx);\n    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect: self.bounds];\n    self.path = circlePath.CGPath;\n    UIGraphicsPopContext();\n}\n\n@end\n

\n\n

从文档中：

\n\n

\n

图层\xe2\x80\x99s Alpha 通道决定图层\xe2\x80\x99s 内容和背景的显示程度。完全或部分不透明的像素允许\n 底层内容显示出来，但完全透明的像素\n 会阻挡该内容。

\n\n

该属性的默认值为 nil nil。配置遮罩时，请记住设置遮罩层的大小和位置，以确保其与其遮罩的层正确对齐。

\n

\n\n

所以我用 UIBezierPath 画了一个圆圈来实现圆形蒙版。一开始我将遮罩的比例因子设置为 0，因此视图层的任何内容都不可见。然后将比例因子设置为 1（填充图层的边界）动画，这会给出一个漂亮的圆动画，从中心开始增加其半径。

\n\n

您可能还需要一个动画来移动您的视图中心点。两个动画都可以包装在 CAAnimationGroup 中。

\n