Маска CAShapeLayer показывает снизу

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") 

Это все об изменении пути маски с помощью справа от значений «от» и «до». Например: установка начального пути маски на CGRectMake(0, 0, imgEmptyBase.layer.frame.size.width, 0), а revealPath - CGRectMake(0, 0, imgEmptyBase.layer.frame.size.width, imgEmptyBase.layer.frame.size.height) приведет к эффекту обнаружения «сверху вниз».

Answer 2

Есть (2) варианты, которые приходят на ум.

Одним из них является просто переключить анимацию от и до значений:

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   = UIBezierPath(rect: imgEmptyBase.bounds).CGPath 
anim.toValue   = path.CGPath 
anim.duration   = 1.0 
anim.fillMode   = kCAFillModeForwards 
anim.removedOnCompletion = false 

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

Другой, чтобы переключить путь Безье себя декларации:

let path    = UIBezierPath(rect: imgEmptyBase.bounds).CGPath 
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: CGRectMake(0, 0, imgEmptyBase.width, imgEmptyBase.height - 80)) 
anim.duration   = 1.0 
anim.fillMode   = kCAFillModeForwards 
anim.removedOnCompletion = false 

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

Answer 3

Проверьте это !!

let path = UIBezierPath(rect: CGRectMake(0, denterImage.frame.origin.y, denterImage.bounds.size.width, denterImage.bounds.size.height - 200)) 
let mask = CAShapeLayer() 
mask.anchorPoint = CGPointMake(0.5, 1.0) 
mask.path = path.CGPath 

denterImage.layer.mask = mask 

let anim = CABasicAnimation(keyPath: "path") 

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

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

Answer 4

Мое предложение состоит в том, чтобы использовать ход пути вместо заполнения.

Вы рисуете путь (синяя линия), которая начинается в нижней части слоя и заканчивается в верхней части его, по центру по горизонтали, так и с шириной линии такой же, как ширина слоя ,
Красный контур представляет схему обводки.

Вы играете анимации на strokeEnd собственности от 0 до 1.

I made a playground, если вы хотите увидеть, как мне удалось сделать этот эффект.

Я обновил ссылку выше.
я поставил код в случае, если вы все еще не можете получить площадку

let aView = UIView(frame:CGRect(x:0 y:0 width:200 height:200)) 
aView.backgroundColor = UIColor.redColor() // the view that needs to be masked 
let shapeLayer = CAShapeLayer() 
shapeLayer.bounds = aView.bounds 
let bezierPath = UIBezierPath() 
bezierPath.moveToPoint(CGPoint(x: shapeLayer.bounds.width/2, y: shapeLayer.bounds.height)) 
bezierPath.addLineToPoint(CGPoint(x: shapeLayer.bounds.width/2, y: 0)) 
shapeLayer.path = bezierPath.CGPath 
shapeLayer.fillColor = UIColor.clearColor().CGColor 
shapeLayer.strokeColor = UIColor.redColor().CGColor 
shapeLayer.lineWidth = shapeLayer.bounds.width 
shapeLayer.position = CGPoint(x: aView.frame.width/2, y: aView.frame.height/2) 
shapeLayer.strokeEnd = 1 

let animation = CABasicAnimation(keyPath: "strokeEnd") 
animation.fromValue = 0 
animation.toValue = 1 
animation.duration = 4 
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut) 
shapeLayer.addAnimation(animation, forKey: "stroneAnimation") 
shapeLayer.strokeEnd = 1 
aView.layer.mask = shapeLayer