Annoying animation with custom shapes

[mzeeshanid]

Here is the code for reload icon.

class ReloadDynamicButton: DynamicButtonStyle {
    convenience required init(center: CGPoint, size: CGFloat, offset: CGPoint, lineWidth: CGFloat) {
    let curveBezierPath = UIBezierPath(arcCenter: center, radius: size / 3, startAngle: 0.0, endAngle:      CGFloat((3.0 * M_PI) / 2), clockwise: true)
    let path: CGPathRef = curveBezierPath.CGPath

    let curveEndPoint = curveBezierPath.currentPoint

    let thirdSize = size / 6
    let sixthSize = size / 12

    let a = CGPoint(x: center.x + sixthSize, y: center.y)
    let b = CGPoint(x: center.x - sixthSize, y: center.y + thirdSize)
    let c = CGPoint(x: center.x - sixthSize, y: center.y - thirdSize)

    let gravityCenter = CGPoint(x: (a.x + b.x + c.x) / 3, y: (a.y + b.y + c.y) / 3)
    let offsetFromCenter = CGPoint(x: curveEndPoint.x - gravityCenter.x, y: curveEndPoint.y - gravityCenter.y)

    let path1 = CGPathCreateMutable()
    CGPathMoveToPoint(path1, nil, offset.x + a.x, offsetFromCenter.y + a.y)
    CGPathAddLineToPoint(path1, nil, offset.x + b.x, offsetFromCenter.y + b.y)

    let path2 = CGPathCreateMutable()
    CGPathMoveToPoint(path1, nil, offset.x + a.x, offsetFromCenter.y + a.y)
    CGPathAddLineToPoint(path1, nil, offset.x + c.x, offsetFromCenter.y + c.y)

    self.init(path1: path, path2: path1, path3: path2, path4: path1)
}
}

[yannickl]

Hi,

I updated the project to try something.

class ReloadDynamicButton: DynamicButtonStyle {
  convenience required init(center: CGPoint, size: CGFloat, offset: CGPoint, lineWidth: CGFloat) {
    let curveBezierPath = UIBezierPath(arcCenter: center, radius: size / 2 - lineWidth, startAngle: 0, endAngle: CGFloat((3 * M_PI) / 2), clockwise: true)
    let path            = curveBezierPath.CGPath

    let thirdSize = size / 6
    let sixthSize = size / 12

    let path1 = CGPathCreateMutable()
    CGPathMoveToPoint(path1, nil, center.x, center.x - size / 2 + lineWidth)
    CGPathAddLineToPoint(path1, nil, center.x - sixthSize, center.x - size / 2 + lineWidth - thirdSize)

    let path2 = CGPathCreateMutable()
    CGPathMoveToPoint(path2, nil, center.x, center.x - size / 2 + lineWidth)
    CGPathAddLineToPoint(path2, nil, center.x - sixthSize, center.x - size / 2 + lineWidth + thirdSize)

    self.init(path1: path1, path2: path2, path3: path, path4: path)
  }
}

Is this code works better?

[mzeeshanid]

Awesome ! Thanks alot
Can you explain what I was doing wrong?
Kindly merge it with the library as it is the common symbol.

[yannickl]

No prob.

The CircleClose button defines the circle path in the path4 parameter while you are defining it in the path1. So when the transition is performed you transform an horizontal line into a circle line. As the animation using the spring effect the result is a bit weird. Now it transforms a full circle in a 3/4 one.

Moreover this portion of code is wrong:

let path2 = CGPathCreateMutable()
CGPathMoveToPoint(path1, nil, offset.x + a.x, offsetFromCenter.y + a.y)
CGPathAddLineToPoint(path1, nil, offset.x + c.x, offsetFromCenter.y + c.y)

You use the path1 object instead of the path2.

Thank you, I'll add it to the library, it's a good idea. 👍