UIImage上的iOS Animate Mask

Question

我使用的是Swift 1.2,我的目标是在静态UIImage上设置图像蒙版的动画.我实现的是一个快速版本的掩盖我最初在Objective-C中找到的图像.

func maskImage(image: UIImage, mask: UIImage) -> UIImage! {

    let maskRef = mask.CGImage;

    let mask = CGImageMaskCreate(
        CGImageGetWidth(maskRef),
        CGImageGetHeight(maskRef),
        CGImageGetBitsPerComponent(maskRef),
        CGImageGetBitsPerPixel(maskRef),
        CGImageGetBytesPerRow(maskRef),
        CGImageGetDataProvider(maskRef), nil, false);

    let masked = CGImageCreateWithMask(image.CGImage, mask);
    let retImage = UIImage(CGImage: masked);
    return retImage;
}

它很棒!然而,将它付诸实践是我的挑战.

有没有办法迭代地应用具有不同水平偏移的掩码或更好的方法来完全解决这个问题 - 也许使用CALayer实现？

谢谢你的帮助!

编辑:根据发布的答案,我补充说:

    let image = UIImage(named: "clouds");

    let imageView = UIImageView(image: image);
    let layer = CALayer();
    layer.contents = UIImage(named: "alpha-mask")?.CGImage;
    layer.bounds = CGRectMake(0, 0, image.size.width, image.size.height);

    // For other folks learning, this did not work
    //let animation = CABasicAnimation(keyPath: "bounds.origin.x");

    // This does work
    let animation = CABasicAnimation(keyPath: "position.x");

    animation.duration = 2;
    animation.delegate = self;
    animation.fillMode = kCAFillModeForwards;
    animation.repeatCount = 0;
    animation.fromValue = 0.0;
    animation.toValue = image.size.width;
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear);
    animation.removedOnCompletion = false;

    layer.addAnimation(animation, forKey: "transform");

    imageView.layer.mask = layer;

    self.addSubview(imageView);

我能够正确地看到alpha蒙版,但动画不起作用.有任何想法吗？

编辑:我修改了上面的代码,它的工作原理!我需要创建keyPath position.x. 往上看

Answer 1

你确实想要使用CALayer - 或者更确切地说,使用CAShapeLayer.

您可以创建一个CAShapeLayer并将其作为掩码安装在另一个图层上.

您可以创建一个CAAnimation,为形状图层的路径设置动画,或者您可以对图层的strokeStart和/或strokeEnd属性进行动画处理.

如果为路径设置动画,则要遵循的规则是确保起始路径和结束路径具有相同数量和类型的控制点.否则动画是"未定义的",结果可能很奇怪.

我有一个开发博客文章,概述了它是如何完成的:

http://wareto.com/using-core-animation-groups-to-create-animation-sequences-2

它主要是关于使用CAAnimationGroups,但它还包括一个动画示例,用于动画对CAShapeLayer的更改,该CAShapeLayer用作图像视图图层的蒙版.

下面是它创建的蒙版动画的GIF - 显示和隐藏图像视图的"时钟擦除":

不幸的是,它是用Objective-C编写的,但核心动画调用在Swift中几乎完全相同.如果你有任何问题想知道如何适应它,请告诉我.

动画代码的内容是这个方法:

- (IBAction)doMaskAnimation:(id)sender;
{

  waretoLogoLarge.hidden = FALSE;//Show the image view

  //Create a shape layer that we will use as a mask for the waretoLogoLarge image view
  CAShapeLayer *maskLayer = [CAShapeLayer layer];

  CGFloat maskHeight = waretoLogoLarge.layer.bounds.size.height;
  CGFloat maskWidth = waretoLogoLarge.layer.bounds.size.width;

  CGPoint centerPoint;
  centerPoint = CGPointMake( maskWidth/2, maskHeight/2);

  //Make the radius of our arc large enough to reach into the corners of the image view.
  CGFloat radius = sqrtf(maskWidth * maskWidth + maskHeight * maskHeight)/2;

  //Don't fill the path, but stroke it in black.
  maskLayer.fillColor = [[UIColor clearColor] CGColor];
  maskLayer.strokeColor = [[UIColor blackColor] CGColor];

  maskLayer.lineWidth = radius; //Make the line thick enough to completely fill the circle we're drawing

  CGMutablePathRef arcPath = CGPathCreateMutable();

  //Move to the starting point of the arc so there is no initial line connecting to the arc
  CGPathMoveToPoint(arcPath, nil, centerPoint.x, centerPoint.y-radius/2);

  //Create an arc at 1/2 our circle radius, with a line thickess of the full circle radius
  CGPathAddArc(arcPath,
               nil,
               centerPoint.x,
               centerPoint.y,
               radius/2,
               3*M_PI/2,
               -M_PI/2,
               YES);

  maskLayer.path = arcPath;

  //Start with an empty mask path (draw 0% of the arc)
  maskLayer.strokeEnd = 0.0;

  CFRelease(arcPath);

  //Install the mask layer into out image view's layer.
  waretoLogoLarge.layer.mask = maskLayer;

  //Set our mask layer's frame to the parent layer's bounds.
  waretoLogoLarge.layer.mask.frame = waretoLogoLarge.layer.bounds;

  //Create an animation that increases the stroke length to 1, then reverses it back to zero.
  CABasicAnimation *swipe = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
  swipe.duration = 2;
  swipe.delegate = self;
  [swipe setValue: theBlock forKey: kAnimationCompletionBlock];

  swipe.timingFunction = [CAMediaTimingFunction 
    functionWithName:kCAMediaTimingFunctionLinear];
  swipe.fillMode = kCAFillModeForwards;
  swipe.removedOnCompletion = NO;
  swipe.autoreverses = YES;

  swipe.toValue = [NSNumber numberWithFloat: 1.0];

  [maskLayer addAnimation: swipe forKey: @"strokeEnd"];
}

我还有一个博客条目IS在斯威夫特展示了如何创建和使用动画饼图CAShapeLayer.该项目为动画设置动画,而不是蒙版,但唯一真正的区别在于您是将形状图层安装为常规内容图层还是作为图像视图背衬层等其他图层上的蒙版.

您可以在此链接查看该项目:

http://wareto.com/swift-piecharts