Add new mask types: hear, ring, gear and superEllipse

IBAnimatableApp/IBAnimatableApp/Playground/UserInterfaces/Mask/MaskViewController.swift

@@ -18,6 +18,9 @@ final class MaskViewController: UIViewController {
     let angleParam = ParamType.number(min: 60, max: 120, interval: 2, ascending: true, unit: "°") // default 6
     let waveParam = ParamType(fromEnum: MaskType.WaveDirection.self)
     let widthParam = ParamType.number(min: 15, max: 90, interval: 2, ascending: true, unit: "px")
+    let radiusParam = ParamType.number(min: 10, max: 40, interval: 10, ascending: true, unit: "px")
+    let cogsParam = ParamType.number(min: 3, max: 10, interval: 1, ascending: true, unit: "cogs")
+    let nParam = ParamType.number(min: 0.25, max: 2, interval: 0.25, ascending: true, unit: "n")
 
     return [PickerEntry(params:[], name:"circle"),
             PickerEntry(params:[], name:"ellipse"),
@@ -26,6 +29,10 @@ final class MaskViewController: UIViewController {
             PickerEntry(params:[pointsParam], name: "star"),
             PickerEntry(params:[waveParam, widthParam], name: "wave"),
             PickerEntry(params:[angleParam], name: "parallelogram"),
+            PickerEntry(params:[], name: "heart"),
+            PickerEntry(params:[radiusParam], name: "ring"),
+            PickerEntry(params:[radiusParam, cogsParam], name: "gear"),
+            PickerEntry(params:[nParam], name: "superellipse"),
             PickerEntry(params:[], name: "none"),
             PickerEntry(params:[], name: "CUSTOM Bubble")
     ]

Sources/Enums/MaskType.swift

@@ -26,6 +26,14 @@ public enum MaskType: IBEnum {
   case wave(direction: WaveDirection, width: Double, offset: Double)
   ///  For parallelogram shape with an angle (default: 60). If `angle == 90` then it is a rectangular mask. If `angle < 90` then is a left-oriented parallelogram\-\
   case parallelogram(angle: Double)
+  /// For heart shape.
+  case heart
+  /// For ring shape with radius (min: 1). 
+  case ring(radius: Double)
+  /// For gear shape with radius (min: 1) and cogs count (min: 2).
+  case gear(radius: Double, cogs: Int)
+  /// For super ellipse shape.
+  case superEllipse(n: Double)
 
   /// Custom shape
   case custom(pathProvider: CustomMaskProvider)
@@ -69,14 +77,22 @@ public extension MaskType {
                    offset: params[safe: 2]?.toDouble() ?? 0)
     case "parallelogram":
       self = .parallelogram(angle: params[safe: 0]?.toDouble() ?? 60)
+    case "heart":
+      self = .heart
+    case "ring":
+      self = .ring(radius: params[safe: 0]?.toDouble() ?? 10 )
+    case "gear":
+      self = .gear(radius: params[safe: 0]?.toDouble() ?? 10, cogs: params[safe: 1]?.toInt() ?? 6 )
+    case "superellipse":
+      self = .superEllipse(n: params[safe: 0]?.toDouble() ?? M_E )
     default:
       self = .none
     }
   }
 }
 
 extension MaskType {
-  
+
   func bezierPath(in rect: CGRect) -> UIBezierPath {
     switch self {
     case .circle:
@@ -93,11 +109,19 @@ extension MaskType {
       return UIBezierPath(waveIn: rect, with: direction == .up, width: CGFloat(width), offset: CGFloat(offset))
     case .triangle:
       return UIBezierPath(triangleIn: rect)
+    case .heart:
+      return UIBezierPath(heartIn: rect)
+    case .ring(let radius):
+      return UIBezierPath(ringIn: rect, radius: CGFloat(radius))
+    case .gear(let radius, let cogs):
+      return UIBezierPath(gearIn: rect, radius: CGFloat(radius), cogs: cogs)
+    case .superEllipse(let n):
+      return UIBezierPath(superEllipseInRect: rect, n: CGFloat(n))
     case let .custom(pathProvider):
       return pathProvider(rect.size)
     case .none:
       return UIBezierPath()
     }
   }
-  
-}
+
+}

Sources/Extensions/UIBezierPathExtension.swift

@@ -11,7 +11,7 @@ extension UIBezierPath {
 
   /**
    Create a Bezier path for a circle shape.
-   
+
    - Parameter bounds: The bounds of shape.
    */
   convenience init(circleIn bounds: CGRect) {
@@ -38,7 +38,7 @@ extension UIBezierPath {
 
   /**
    Create a Bezier path for a polygon shape with provided sides.
-   
+
    - Parameter bounds: The bounds of shape.
    - Parameter sides: The number of the polygon sides.
    */
@@ -62,7 +62,7 @@ extension UIBezierPath {
 
   /**
    Create a Bezier path for a parallelogram shape with provided top-left angle.
-   
+
    - Parameter bounds: The bounds of shape.
    - Parameter topLeftAngle: The top-left angle of the parallelogram shape.
    */
@@ -129,7 +129,7 @@ extension UIBezierPath {
 
   /**
    Create a Bezier path for a star shape with provided points.
-   
+
    - Parameter bounds: The bounds of shape.
    - Parameter sides: The number of the star points.
    */
@@ -162,10 +162,148 @@ extension UIBezierPath {
 
     close()
   }
+
+  /**
+   Create a Bezier path for a heart shape.
+
+   - Parameter bounds: The bounds of shape.
+   */
+  convenience init(heartIn bounds: CGRect)  {
+    self.init()
+    var x: CGFloat = bounds.origin.x
+    var y: CGFloat = bounds.origin.y
+
+    // square bounds
+    let width = ceil(min(bounds.size.width, bounds.size.height))
+    let height = width
+    x = x + (bounds.size.width - width)/2
+    y = y + (bounds.size.height - height)/2
+
+    let lowerPoint = CGPoint(x: x + width / 2, y: (y + height ))
+    move(to: lowerPoint)
+
+    addCurve(to: CGPoint(x: x, y: (y + (height/4))),
+             controlPoint1:CGPoint(x: (x + (width/2)), y: (y + (height*3/4))),
+             controlPoint2: CGPoint(x: x, y: (y + (height/2))))
+
+    addArc(withCenter: CGPoint(x: (x + (width/4)), y: (y + (height/4))),
+           radius: (width/4),
+           startAngle: .pi,
+           endAngle: 0,
+           clockwise: true)
+
+    addArc(withCenter: CGPoint(x: (x + (width * 3/4)), y: (y + (height/4))),
+           radius: (width/4),
+           startAngle: .pi,
+           endAngle: 0,
+           clockwise: true)
+
+    addCurve(to: lowerPoint,
+             controlPoint1: CGPoint(x: (x + width), y: (y + (height/2))),
+                  controlPoint2: CGPoint(x: (x + (width/2)), y: (y + (height*3/4))) )
+  }
+
+  /**
+   Create a Bezier path for a ring shape.
+
+   - Parameter bounds: The bounds of shape.
+   - Parameter radius: The radius of the shape.
+   */
+  convenience init(ringIn bounds: CGRect, radius: CGFloat) {
+    let center = CGPoint(x: bounds.midX, y: bounds.midY)
+    let diameter = ceil(min(bounds.width, bounds.height))
+    let innerRadius = max(1, diameter / 2 - radius)
+    let outerRadius = diameter / 2
+
+    self.init()
+    addArc(withCenter: .zero, radius: innerRadius, startAngle: 0, endAngle: .pi * 2, clockwise: true)
+
+    move(to: CGPoint(x: outerRadius, y: 0))
+
+    addArc(withCenter: .zero, radius: outerRadius, startAngle: 0, endAngle: .pi * 2, clockwise: true)
+
+    apply(CGAffineTransform(translationX: center.x, y: center.y))
+    usesEvenOddFillRule = true
+  }
+
+  /**
+   Create a Bezier path for a gear shape.
+
+   - Parameter bounds: The bounds of shape.
+   - Parameter radius: The radius of the shape.
+   - Parameter cogs: The number of cogs (min: 2)
+   */
+  convenience init(gearIn bounds: CGRect, radius: CGFloat, cogs: Int) {
+    let center = CGPoint(x: bounds.midX, y: bounds.midY)
+    let diameter = ceil(min(bounds.width, bounds.height))
+    let innerRadius = max(1, diameter / 2 - radius)
+    let outerRadius = diameter / 2
+
+    self.init()
+
+    guard cogs > 2 else { return }
+
+    let angle: CGFloat = .pi / CGFloat(cogs)
+    var radius = (outerRadius, innerRadius)
+
+    addArc(withCenter: .zero, radius: innerRadius/2, startAngle: 0, endAngle: .pi * 2, clockwise: true)
+    move(to: CGPoint(x: radius.0, y: 0))
+
+    for _ in 0..<cogs*2 {
+      addArc(withCenter: .zero, radius: radius.0, startAngle: 0, endAngle: -angle, clockwise: false)
+      apply(CGAffineTransform(rotationAngle: angle))
+      swap(&radius.0, &radius.1)
+    }
+
+    apply(CGAffineTransform(translationX: center.x, y: center.y))
+  }
+
+  /**
+   Create a Bezier path for a super ellipse shape.
+   https://en.wikipedia.org/wiki/Superellipse
+
+   - Parameter n: The super ellipse main parameter.
+   */
+  convenience init(superEllipseInRect bounds: CGRect, n: CGFloat = CGFloat.𝑒){
+    let a = bounds.width / 2
+    let b = bounds.height / 2
+    let n_2  = 2 / n
+    let center = CGPoint(x: bounds.midX, y: bounds.midY)
+    let centerLeft = CGPoint(x: bounds.origin.x, y: bounds.midY)
+
+    let x = { (t: CGFloat) -> CGFloat in
+      let cost = cos(t)
+      return center.x + cost.sign() * a * pow(abs(cost), n_2)
+    }
+
+    let y = { (t: CGFloat) -> CGFloat in
+      let sint = sin(t)
+      return center.y + sint.sign() * b * pow(abs(sint), n_2)
+    }
+
+    self.init()
+    move(to:centerLeft)
+
+    let factor = max((a+b)/10, 32)
+    for t in stride(from: (-CGFloat.pi), to: CGFloat.pi, by: CGFloat.pi/factor) {
+      addLine(to: CGPoint(x: x(t), y: y(t)))
+    }
+    close()
+  }
+
 }
 
 private extension UIBezierPath {
   func point(from angle: CGFloat, radius: CGFloat, offset: CGPoint) -> CGPoint {
     return CGPoint(x: radius * cos(angle) + offset.x, y: radius * sin(angle) + offset.y)
   }
 }
+
+extension CGFloat {
+  static let 𝑒 = CGFloat(M_E)
+  func sign() -> CGFloat {
+    if self<0 { return -1 }
+    else if self>0 { return 1 }
+    else { return 0 }
+  }
+}

Sources/Protocols/Designable/MaskDesignable.swift

@@ -63,6 +63,9 @@ private extension MaskDesignable where Self: UIView {
     let maskLayer = CAShapeLayer()
     maskLayer.frame = CGRect(origin: .zero, size: bounds.size)
     maskLayer.path = path.cgPath
+    if path.usesEvenOddFillRule {
+      maskLayer.fillRule = kCAFillRuleEvenOdd
+    }
     layer.mask = maskLayer
   }
 }