0

My problem is that I created simple path with CABasicAnimation from circle to roundedRect. I simply use two cashapelayers for each shape with uibezierpath, and because circle can be showed as roundedrect I used it twice and added them onto view, and it is working like a charm on iphone 6 and above, but strange things happen with edges when im trying launch it on iphone 5 and below (see gif). Im struggling with it almost 2 days and have no clue. Btw. red circle is a button and it's above those shapes. Here is code:

class Shapes: CAShapeLayer {
var circleLayer : UIBezierPath {
    return UIBezierPath(roundedRect: CGRect(x: -(buttonWidth/2), y: -(buttonHeight/2), width: buttonWidth, height: buttonHeight), cornerRadius: 15)
}

var roundedRectLayer: UIBezierPath {
    return UIBezierPath(roundedRect: CGRect(x: -(frame.width/2), y: -(frame.height/2), width: frame.width, height: frame.height), cornerRadius: 20)
}

func openMenu(){
    let openMenu: CABasicAnimation = CABasicAnimation(keyPath: "path")
    openMenu.fromValue = circleLayer.cgPath
    openMenu.toValue = roundedRectLayer.cgPath
    openMenu.duration = 0.4
    openMenu.beginTime = CACurrentMediaTime() + 0.2
    openMenu.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    openMenu.fillMode = kCAFillModeForwards
    openMenu.isRemovedOnCompletion = false  
    add(openMenu, forKey: "openMenu")
    }
}

and this is instantiated in another class of uiview which is that white rect below, this way:

let shapes = Shapes()
layer.addSublayer(shapes)
    shapes.frame = CGRect(x: redButton.frame.midX, y: redButton.frame.midY, width: 320, height: redButton.frame.height + 10)

iPhone 5:

iphone 5 gif

iPhone 6:

iphone 6 gif

klapinski
  • 151
  • 1
  • 8
  • 1
    Animations of paths can behave like that when the number of control points or segments. I'm guessing that if you inspected the elements of the path (can be done using `CGPath.apply(info:function:)`) then they'd be different. However, I don't know _why_. I think that you might be able to get a more consistent animation by changing the frame and corner radius for a regular CALayer. – David Rönnqvist Nov 03 '16 at 17:31
  • I agree with David R. Animating a shape layer's path, while easy, is always risky, because you have no idea what the shape layer thinks path animation _means_. – matt Nov 03 '16 at 18:13
  • thank you for your answers, i've done like you said by animating corner radius, i'd like to give you some points but idk how to be honest, and i also got similar problem to this one if you can look at this topic i'd be grateful http://stackoverflow.com/questions/40614570/cashapelayer-circle-disappeared-on-iphone-6-but-its-working-on-iphone-5-with-th – klapinski Nov 15 '16 at 16:16

0 Answers0