Allow overshoot in interpolation

Author: psharanda

Sources/Interpolatable/CGPrimitives+Interpolatable.swift

@@ -8,7 +8,7 @@ import Foundation
 extension CGFloat: Interpolatable {
     /// Interpolates between two scalar values.
     public func interpolate(to: CGFloat, progress: Double, easing: Easing) -> Self {
-        return easing.calculate(d1: self, d2: to, g: progress)
+        return easing.calculate(d1: self, d2: to, g: progress, clamp: false)
     }
 }
 
@@ -25,21 +25,25 @@ extension CGPoint: Interpolatable {
 extension CGRect: Interpolatable {
     /// Interpolates between two rectangles component-wise.
     public func interpolate(to: CGRect, progress: Double, easing: Easing) -> Self {
+        let interpolatedWidth = size.width.interpolate(to: to.size.width, progress: progress, easing: easing)
+        let interpolatedHeight = size.height.interpolate(to: to.size.height, progress: progress, easing: easing)
         return CGRect(
             x: origin.x.interpolate(to: to.origin.x, progress: progress, easing: easing),
             y: origin.y.interpolate(to: to.origin.y, progress: progress, easing: easing),
-            width: size.width.interpolate(to: to.size.width, progress: progress, easing: easing),
-            height: size.height.interpolate(to: to.size.height, progress: progress, easing: easing)
+            width: max(0, interpolatedWidth),
+            height: max(0, interpolatedHeight)
         )
     }
 }
 
 extension CGSize: Interpolatable {
     /// Interpolates between two sizes component-wise.
     public func interpolate(to: CGSize, progress: Double, easing: Easing) -> Self {
+        let interpolatedWidth = width.interpolate(to: to.width, progress: progress, easing: easing)
+        let interpolatedHeight = height.interpolate(to: to.height, progress: progress, easing: easing)
         return CGSize(
-            width: width.interpolate(to: to.width, progress: progress, easing: easing),
-            height: height.interpolate(to: to.height, progress: progress, easing: easing)
+            width: max(0, interpolatedWidth),
+            height: max(0, interpolatedHeight)
         )
     }
 }

Sources/Interpolatable/UIBezierPath+Interpolatable.swift

@@ -76,7 +76,7 @@ extension UIBezierPath: Interpolatable {
         assert(!foundMistmatch, "UIBezierPath.interpolate: path elements type should be the same")
 
         let interpolatedPath = Self(cgPath: CGPath.pathFromPathElements(interpolatedPathElements))
-        interpolatedPath.lineWidth = lineWidth.interpolate(to: to.lineWidth, progress: progress, easing: easing)
+        interpolatedPath.lineWidth = max(0, lineWidth.interpolate(to: to.lineWidth, progress: progress, easing: easing))
 
         interpolatedPath.lineCapStyle = lineCapStyle
         assert(
@@ -90,8 +90,8 @@ extension UIBezierPath: Interpolatable {
             "UIBezierPath.interpolate: lineJoinStyle should be the same"
         )
 
-        interpolatedPath.miterLimit = miterLimit.interpolate(to: to.miterLimit, progress: progress, easing: easing)
-        interpolatedPath.flatness = flatness.interpolate(to: to.flatness, progress: progress, easing: easing)
+        interpolatedPath.miterLimit = max(0, miterLimit.interpolate(to: to.miterLimit, progress: progress, easing: easing))
+        interpolatedPath.flatness = max(0, flatness.interpolate(to: to.flatness, progress: progress, easing: easing))
 
         // TODO: implement line dash pattern interpolation
 

Sources/Interpolatable/UIColor+Interpolatable.swift

@@ -9,6 +9,9 @@ import UIKit
 
 extension UIColor: Interpolatable {
     // TODO: check alternative interpolations https://raphlinus.github.io/color/2021/01/18/oklab-critique.html
+    private static func clamp01(_ value: CGFloat) -> CGFloat {
+        return min(1, max(0, value))
+    }
 
     private func rgbaComponents() -> (CGFloat, CGFloat, CGFloat, CGFloat) {
         var r: CGFloat = 0
@@ -82,10 +85,10 @@ extension UIColor: Interpolatable {
         let (h2, s2, b2, a2) = to.hsbComponents()
 
         return Self(
-            hue: h1.interpolate(to: h2, progress: progress, easing: easing),
-            saturation: s1.interpolate(to: s2, progress: progress, easing: easing),
-            brightness: b1.interpolate(to: b2, progress: progress, easing: easing),
-            alpha: a1.interpolate(to: a2, progress: progress, easing: easing)
+            hue: Self.clamp01(h1.interpolate(to: h2, progress: progress, easing: easing)),
+            saturation: Self.clamp01(s1.interpolate(to: s2, progress: progress, easing: easing)),
+            brightness: Self.clamp01(b1.interpolate(to: b2, progress: progress, easing: easing)),
+            alpha: Self.clamp01(a1.interpolate(to: a2, progress: progress, easing: easing))
         )
     }
 
@@ -95,10 +98,10 @@ extension UIColor: Interpolatable {
         let (r2, g2, b2, a2) = to.rgbaComponents()
 
         return Self(
-            red: r1.interpolate(to: r2, progress: progress, easing: easing),
-            green: g1.interpolate(to: g2, progress: progress, easing: easing),
-            blue: b1.interpolate(to: b2, progress: progress, easing: easing),
-            alpha: a1.interpolate(to: a2, progress: progress, easing: easing)
+            red: Self.clamp01(r1.interpolate(to: r2, progress: progress, easing: easing)),
+            green: Self.clamp01(g1.interpolate(to: g2, progress: progress, easing: easing)),
+            blue: Self.clamp01(b1.interpolate(to: b2, progress: progress, easing: easing)),
+            alpha: Self.clamp01(a1.interpolate(to: a2, progress: progress, easing: easing))
         )
     }
 }