CAShapeLayer + UIBezierPath 填充动画是不填充形状而不是填充?
CAShapeLayer + UIBezierPath fill animation is unfilling shape instead of filling?
我有一个心形的 uibezierpath 并且一直在使用 CAShapeLayers 进行遮罩,并使用 bounds.height 的 CABasicAnimation 从底部填充红色。我显然把一些关键的东西搞混了,因为形状看起来充满了红色,然后从底部被清除了!啊!此动画由 UILongPressGestureRecognizer 触发,仅供参考。谁能告诉我我在哪里搞砸了?这是代码:
var filledShape = CAShapeLayer()
filledShape.bounds = bezierPath.bounds
filledShape.path = bezierPath.CGPath
filledShape.fillColor = UIColor.redColor().CGColor
var outlineShape = CAShapeLayer()
outlineShape.path = CGPathCreateWithRect(bezierPath.bounds, nil)
outlineShape.anchorPoint=CGPointMake(0.5, 1.0)
outlineShape.lineWidth = 1.5
var inPlaceOutlineShape = CAShapeLayer()
inPlaceOutlineShape.bounds = filledShape.bounds
inPlaceOutlineShape.path = filledShape.path
inPlaceOutlineShape.fillColor = UIColor.clearColor().CGColor
inPlaceOutlineShape.strokeColor = UIColor.redColor().CGColor
inPlaceOutlineShape.opaque=false
inPlaceOutlineShape.lineWidth = 1.5
filledShape.mask=outlineShape
var heartRect = CGRectMake(self.view.center.x,self.view.center.y, bezbox.width+1, bezbox.height+1)
var animateOutlineFromBottom = CABasicAnimation(keyPath: "bounds.size.height")
animateOutlineFromBottom.fromValue=0
animateOutlineFromBottom.toValue=bezbox.height
animateOutlineFromBottom.duration=3.0
animateOutlineFromBottom.fillMode=kCAFillModeForwards
//animateOutlineFromBottom.
bgview.frame = heartRect
bgview.layer.addSublayer(filledShape)
bgview.layer.addSublayer(inPlaceOutlineShape)
self.view.addSubview(bgview)
outlineShape.addAnimation(animateOutlineFromBottom, forKey:"bounds.size.height")
提前致谢!!
您正在将蒙版设置为从 0 到有限高度的动画。而是将蒙版的位置从底部更改为顶部。
var animateOutlineFromBottom = CABasicAnimation(keyPath: "position")
animateOutlineFromBottom.fromValue = NSValue(CGPoint: CGPointMake(0, heartRect.height))
animateOutlineFromBottom.toValue = NSValue(CGPoint: CGPointMake(0,0))
animateOutlineFromBottom.duration = 3.0
animateOutlineFromBottom.fillMode = kCAFillModeForwards
// Other code
outlineShape.addAnimation(animateOutlineFromBottom, forKey:"position")
我有一个心形的 uibezierpath 并且一直在使用 CAShapeLayers 进行遮罩,并使用 bounds.height 的 CABasicAnimation 从底部填充红色。我显然把一些关键的东西搞混了,因为形状看起来充满了红色,然后从底部被清除了!啊!此动画由 UILongPressGestureRecognizer 触发,仅供参考。谁能告诉我我在哪里搞砸了?这是代码:
var filledShape = CAShapeLayer()
filledShape.bounds = bezierPath.bounds
filledShape.path = bezierPath.CGPath
filledShape.fillColor = UIColor.redColor().CGColor
var outlineShape = CAShapeLayer()
outlineShape.path = CGPathCreateWithRect(bezierPath.bounds, nil)
outlineShape.anchorPoint=CGPointMake(0.5, 1.0)
outlineShape.lineWidth = 1.5
var inPlaceOutlineShape = CAShapeLayer()
inPlaceOutlineShape.bounds = filledShape.bounds
inPlaceOutlineShape.path = filledShape.path
inPlaceOutlineShape.fillColor = UIColor.clearColor().CGColor
inPlaceOutlineShape.strokeColor = UIColor.redColor().CGColor
inPlaceOutlineShape.opaque=false
inPlaceOutlineShape.lineWidth = 1.5
filledShape.mask=outlineShape
var heartRect = CGRectMake(self.view.center.x,self.view.center.y, bezbox.width+1, bezbox.height+1)
var animateOutlineFromBottom = CABasicAnimation(keyPath: "bounds.size.height")
animateOutlineFromBottom.fromValue=0
animateOutlineFromBottom.toValue=bezbox.height
animateOutlineFromBottom.duration=3.0
animateOutlineFromBottom.fillMode=kCAFillModeForwards
//animateOutlineFromBottom.
bgview.frame = heartRect
bgview.layer.addSublayer(filledShape)
bgview.layer.addSublayer(inPlaceOutlineShape)
self.view.addSubview(bgview)
outlineShape.addAnimation(animateOutlineFromBottom, forKey:"bounds.size.height")
提前致谢!!
您正在将蒙版设置为从 0 到有限高度的动画。而是将蒙版的位置从底部更改为顶部。
var animateOutlineFromBottom = CABasicAnimation(keyPath: "position")
animateOutlineFromBottom.fromValue = NSValue(CGPoint: CGPointMake(0, heartRect.height))
animateOutlineFromBottom.toValue = NSValue(CGPoint: CGPointMake(0,0))
animateOutlineFromBottom.duration = 3.0
animateOutlineFromBottom.fillMode = kCAFillModeForwards
// Other code
outlineShape.addAnimation(animateOutlineFromBottom, forKey:"position")