ios - CAShapeLayer mask 从底部显示

Question

我正在尝试从图像底部创建“显示”效果。 我认为这就像将 anchorPoint 设置为 CGPointMake(0.5, 1.0) 或将 contentsGravity 设置为 kCAGravityTop 一样简单，但这些选项都不起作用。

我的当前代码有效，但从上到下进行动画处理。这是揭示的想法:http://giphy.com/gifs/xTiTnBzItdgaD1xHMc

我如何使它从下到上进行？

这是代码

    let path                = UIBezierPath(rect: CGRectMake(0, 0, imgEmptyBase.width, imgEmptyBase.height - 80))
    let mask                = CAShapeLayer()
    mask.anchorPoint        = CGPointMake(0.5, 1.0)
    mask.path               = path.CGPath

    imgEmptyBase.layer.mask = mask

    let anim                = CABasicAnimation(keyPath: "path")

    anim.fromValue          = path.CGPath
    anim.toValue            = UIBezierPath(rect: imgEmptyBase.bounds).CGPath
    anim.duration           = 1.0
    anim.fillMode           = kCAFillModeForwards
    anim.removedOnCompletion = false

    imgEmptyBase.layer.mask.addAnimation(anim, forKey: "anim")

Answer 1

这将完全达到您想要的效果:

let path = UIBezierPath(rect: CGRectMake(0, imgEmptyBase.layer.frame.size.height, imgEmptyBase.layer.frame.size.width, imgEmptyBase.layer.frame.size.height))
let mask = CAShapeLayer()
mask.path = path.CGPath

imgEmptyBase.layer.mask = mask

let revealPath = UIBezierPath(rect: CGRectMake(0, 0, imgEmptyBase.layer.frame.size.width, imgEmptyBase.layer.frame.size.height))

let anim                = CABasicAnimation(keyPath: "path")
anim.fromValue          = path.CGPath
anim.toValue            = revealPath.CGPath
anim.duration           = 1.0
anim.fillMode           = kCAFillModeForwards
anim.removedOnCompletion = false

imgEmptyBase.layer.mask.addAnimation(anim, forKey: "anim")

这一切都是关于使用正确的“从”和“到”值更改蒙版路径。例如:将初始 mask 路径设置为 CGRectMake(0, 0, imgEmptyBase.layer.frame.size.width, 0) 并将 revealPath 设置为 CGRectMake( 0, 0, imgEmptyBase.layer.frame.size.width, imgEmptyBase.layer.frame.size.height) 会产生“从上到下”的显示效果。