Ios CAShapeLayer遮罩从底部露出
我试图从图像的底部创建一个“显示”效果。 我原以为它会像将anchorPoint设置为CGPointMake(0.5,1.0)或将contentsGravity设置为kCAGravityTop一样简单,但这些选项都不起作用 我的当前代码可以工作,但可以从上到下设置动画。以下是展示的想法: 我该如何让它从下到上 这是密码Ios CAShapeLayer遮罩从底部露出,ios,swift,calayer,cashapelayer,Ios,Swift,Calayer,Cashapelayer,我试图从图像的底部创建一个“显示”效果。 我原以为它会像将anchorPoint设置为CGPointMake(0.5,1.0)或将contentsGravity设置为kCAGravityTop一样简单,但这些选项都不起作用 我的当前代码可以工作,但可以从上到下设置动画。以下是展示的想法: 我该如何让它从下到上 这是密码 let path = UIBezierPath(rect: CGRectMake(0, 0, imgEmptyBase.width, img
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")
我想到了(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")
另一个是切换bezier路径声明本身:
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")
检查这个
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")
我的建议是使用路径的笔划而不是填充 绘制一条路径(蓝线),从图层底部开始,到图层顶部结束,水平居中,线宽与图层宽度相同。
红色轮廓表示笔划轮廓 您可以在
strokeEnd
属性上从0到1播放动画
如果你想看看我是怎么做到的
我更新了上面的链接。我写了密码,以防你还不能去操场
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
这将完全达到您想要的效果:
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")
所有这些都是关于使用正确的“from”和“to”值更改遮罩路径。例如:将初始遮罩路径设置为
CGRectMake(0,0,imgEmptyBase.layer.frame.size.width,0)
和revealPath
设置为CGRectMake(0,0,imgEmptyBase.layer.frame.size.width,imgEmptyBase.layer.frame.size.height)
将产生“从上到下”的显示效果。这两个选项都会隐藏该项。。。我想透露一下。翻转值并不能解决问题…你的游乐场链接不起作用。你能提供一些代码吗?我用一个新的链接更新了帖子,并粘贴了代码