lottie-ios 3.4.0 → 3.4.3

package/Sources/Private/CoreAnimation/Animations/GradientAnimations.swift

@@ -29,18 +29,36 @@ extension GradientRenderLayer {
   // MARK: Internal
 
   /// Adds gradient-related animations to this layer, from the given `GradientFill`
-  func addGradientAnimations(for gradient: GradientShapeItem, context: LayerAnimationContext) throws {
-    // We have to set `colors` to a non-nil value with some valid number of colors
-    // for the color animation below to have any effect
-    colors = .init(
-      repeating: CGColor.rgb(0, 0, 0),
-      count: gradient.numberOfColors)
+  ///  - The RGB components and alpha components can have different color stops / locations,
+  ///    so have to be rendered in separate `CAGradientLayer`s.
+  func addGradientAnimations(
+    for gradient: GradientShapeItem,
+    type: GradientContentType,
+    context: LayerAnimationContext) throws
+  {
+    // We have to set `colors` and `locations` to non-nil values
+    // for the animations below to actually take effect
+    locations = []
+
+    // The initial value for `colors` must be an array with the exact same number of colors
+    // as the gradient that will be applied in the `CAAnimation`
+    switch type {
+    case .rgb:
+      colors = .init(
+        repeating: CGColor.rgb(0, 0, 0),
+        count: gradient.numberOfColors)
+
+    case .alpha:
+      colors = .init(
+        repeating: CGColor.rgb(0, 0, 0),
+        count: gradient.colorConfiguration(from: gradient.colors.keyframes[0].value, type: .alpha).count)
+    }
 
     try addAnimation(
       for: .colors,
       keyframes: gradient.colors.keyframes,
       value: { colorComponents in
-        try gradient.colorConfiguration(from: colorComponents, context: context).map { $0.color }
+        gradient.colorConfiguration(from: colorComponents, type: type).map { $0.color }
       },
       context: context)
 
@@ -48,7 +66,7 @@ extension GradientRenderLayer {
       for: .locations,
       keyframes: gradient.colors.keyframes,
       value: { colorComponents in
-        try gradient.colorConfiguration(from: colorComponents, context: context).map { $0.location }
+        gradient.colorConfiguration(from: colorComponents, type: type).map { $0.location }
       },
       context: context)
 
@@ -98,10 +116,10 @@ extension GradientRenderLayer {
     // at any given time requires knowing the current `startPoint`,
     // we can't allow them to animate separately.
     let absoluteStartPoint = try gradient.startPoint
-      .exactlyOneKeyframe(context: context, description: "gradient startPoint").value.pointValue
+      .exactlyOneKeyframe(context: context, description: "gradient startPoint").pointValue
 
     let absoluteEndPoint = try gradient.endPoint
-      .exactlyOneKeyframe(context: context, description: "gradient endPoint").value.pointValue
+      .exactlyOneKeyframe(context: context, description: "gradient endPoint").pointValue
 
     startPoint = percentBasedPointInBounds(from: absoluteStartPoint)
 
@@ -113,55 +131,92 @@ extension GradientRenderLayer {
   }
 }
 
+// MARK: - GradientContentType
+
+/// Each type of gradient that can be constructed from a `GradientShapeItem`
+enum GradientContentType {
+  case rgb
+  case alpha
+}
+
+/// `colors` and `locations` configuration for a `CAGradientLayer`
+typealias GradientColorConfiguration = [(color: CGColor, location: CGFloat)]
+
 extension GradientShapeItem {
+
+  // MARK: Internal
+
+  /// Whether or not this `GradientShapeItem` includes an alpha component
+  /// that has to be rendered as a separate `CAGradientLayer` from the
+  /// layer that renders the rgb color components
+  var hasAlphaComponent: Bool {
+    for colorComponentsKeyframe in colors.keyframes {
+      let colorComponents = colorComponentsKeyframe.value
+      let alphaConfiguration = colorConfiguration(from: colorComponents, type: .alpha)
+
+      let notFullyOpaque = alphaConfiguration.contains(where: { color, _ in
+        color.alpha < 0.999
+      })
+
+      if notFullyOpaque {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  // MARK: Fileprivate
+
   /// Converts the compact `[Double]` color components representation
   /// into an array of `CGColor`s and the location of those colors within the gradient.
   ///  - The color components array is a repeating list of `[location, red, green, blue]` values
   ///    for each color in the gradient, followed by an optional repeating list of
   ///    `[location, alpha]` values that control the colors' alpha values.
+  ///  - The RGB and alpha values can have different color stops / locations,
+  ///    so each has to be rendered in a separate `CAGradientLayer`.
   fileprivate func colorConfiguration(
     from colorComponents: [Double],
-    context: LayerAnimationContext) throws
-    -> [(color: CGColor, location: CGFloat)]
+    type: GradientContentType)
+    -> GradientColorConfiguration
   {
-    precondition(
-      colorComponents.count >= numberOfColors * 4,
-      "Each color must have RGB components and a location component")
+    switch type {
+    case .rgb:
+      precondition(
+        colorComponents.count >= numberOfColors * 4,
+        "Each color must have RGB components and a location component")
 
-    var cgColors = [(color: CGColor, location: CGFloat)]()
+      // Each group of four `Double` values represents a single `CGColor`,
+      // and its relative location within the gradient.
+      var colors = GradientColorConfiguration()
 
-    // Each group of four `Double` values represents a single `CGColor`,
-    // and its relative location within the gradient.
-    for colorIndex in 0..<numberOfColors {
-      let colorStartIndex = colorIndex * 4
+      for colorIndex in 0..<numberOfColors {
+        let colorStartIndex = colorIndex * 4
 
-      let colorLocation = CGFloat(colorComponents[colorStartIndex])
+        let colorLocation = CGFloat(colorComponents[colorStartIndex])
 
-      // Alpha values aren't stored contiguously with the RGB color components,
-      // but are instead optionally listed at the end of the array
-      var alpha = 1.0
-      let alphaIndex = (numberOfColors * 4) + (colorIndex * 2)
-      if alphaIndex < colorComponents.count {
-        let alphaLocation = CGFloat(colorComponents[alphaIndex])
-        if alphaLocation == colorLocation {
-          alpha = colorComponents[alphaIndex + 1]
-        } else {
-          try context.logCompatibilityIssue("""
-            The Core Animation rendering engine currently expects gradient colors and alpha values
-            to be in the same order, with the same color stops / locations.
-            """)
-        }
+        let color = CGColor.rgb(
+          CGFloat(colorComponents[colorStartIndex + 1]),
+          CGFloat(colorComponents[colorStartIndex + 2]),
+          CGFloat(colorComponents[colorStartIndex + 3]))
+
+        colors.append((color: color, location: colorLocation))
       }
 
-      let color = CGColor.rgba(
-        CGFloat(colorComponents[colorStartIndex + 1]),
-        CGFloat(colorComponents[colorStartIndex + 2]),
-        CGFloat(colorComponents[colorStartIndex + 3]),
-        CGFloat(alpha))
+      return colors
 
-      cgColors.append((color, colorLocation))
-    }
+    case .alpha:
+      // After the rgb color components, there can be arbitrary number of repeating
+      // `[alphaLocation, alphaValue]` pairs that define a separate alpha gradient.
+      var alphaValues = GradientColorConfiguration()
+
+      for alphaIndex in stride(from: numberOfColors * 4, to: colorComponents.endIndex, by: 2) {
+        let alphaLocation = CGFloat(colorComponents[alphaIndex])
+        let alphaValue = CGFloat(colorComponents[alphaIndex + 1])
+        alphaValues.append((color: .rgba(0, 0, 0, alphaValue), location: alphaLocation))
+      }
 
-    return cgColors
+      return alphaValues
+    }
   }
 }

package/Sources/Private/CoreAnimation/Animations/LayerProperty.swift

@@ -58,56 +58,56 @@ extension LayerProperty {
     .init(
       caLayerKeypath: "transform.translation",
       defaultValue: CGPoint(x: 0, y: 0),
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var positionX: LayerProperty<CGFloat> {
     .init(
       caLayerKeypath: "transform.translation.x",
       defaultValue: 0,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var positionY: LayerProperty<CGFloat> {
     .init(
       caLayerKeypath: "transform.translation.y",
       defaultValue: 0,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var scale: LayerProperty<CGFloat> {
     .init(
       caLayerKeypath: "transform.scale",
       defaultValue: 1,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var scaleX: LayerProperty<CGFloat> {
     .init(
       caLayerKeypath: "transform.scale.x",
       defaultValue: 1,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var scaleY: LayerProperty<CGFloat> {
     .init(
       caLayerKeypath: "transform.scale.y",
       defaultValue: 1,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var rotation: LayerProperty<CGFloat> {
     .init(
       caLayerKeypath: "transform.rotation",
       defaultValue: 0,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var rotationY: LayerProperty<CGFloat> {
     .init(
       caLayerKeypath: "transform.rotation.y",
       defaultValue: 0,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var anchorPoint: LayerProperty<CGPoint> {
@@ -116,14 +116,14 @@ extension LayerProperty {
       // This is intentionally not `GGPoint(x: 0.5, y: 0.5)` (the actual default)
       // to opt `anchorPoint` out of the KVC `setValue` flow, which causes issues.
       defaultValue: nil,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var opacity: LayerProperty<CGFloat> {
     .init(
       caLayerKeypath: #keyPath(CALayer.opacity),
       defaultValue: 1,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 }
 
@@ -134,7 +134,7 @@ extension LayerProperty {
     .init(
       caLayerKeypath: #keyPath(CAShapeLayer.path),
       defaultValue: nil,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var fillColor: LayerProperty<CGColor> {
@@ -148,14 +148,14 @@ extension LayerProperty {
     .init(
       caLayerKeypath: #keyPath(CAShapeLayer.lineWidth),
       defaultValue: 1,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var lineDashPhase: LayerProperty<CGFloat> {
     .init(
       caLayerKeypath: #keyPath(CAShapeLayer.lineDashPhase),
       defaultValue: 0,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var strokeColor: LayerProperty<CGColor> {
@@ -169,14 +169,14 @@ extension LayerProperty {
     .init(
       caLayerKeypath: #keyPath(CAShapeLayer.strokeStart),
       defaultValue: 0,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var strokeEnd: LayerProperty<CGFloat> {
     .init(
       caLayerKeypath: #keyPath(CAShapeLayer.strokeEnd),
       defaultValue: 1,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 }
 
@@ -187,28 +187,28 @@ extension LayerProperty {
     .init(
       caLayerKeypath: #keyPath(CAGradientLayer.colors),
       defaultValue: nil,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var locations: LayerProperty<[CGFloat]> {
     .init(
       caLayerKeypath: #keyPath(CAGradientLayer.locations),
       defaultValue: nil,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var startPoint: LayerProperty<CGPoint> {
     .init(
       caLayerKeypath: #keyPath(CAGradientLayer.startPoint),
       defaultValue: nil,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 
   static var endPoint: LayerProperty<CGPoint> {
     .init(
       caLayerKeypath: #keyPath(CAGradientLayer.endPoint),
       defaultValue: nil,
-      customizableProperty: nil /* currently unsupported */)
+      customizableProperty: nil /* currently unsupported */ )
   }
 }
 

package/Sources/Private/CoreAnimation/Animations/RectangleAnimation.swift

@@ -14,14 +14,12 @@ extension CAShapeLayer {
   {
     try addAnimation(
       for: .path,
-      keyframes: rectangle.size.keyframes,
-      value: { sizeKeyframe in
+      keyframes: try rectangle.combinedKeyframes(context: context).keyframes,
+      value: { keyframe in
         BezierPath.rectangle(
-          position: try rectangle.position
-            .exactlyOneKeyframe(context: context, description: "rectangle position").value.pointValue,
-          size: sizeKeyframe.sizeValue,
-          cornerRadius: try rectangle.cornerRadius
-            .exactlyOneKeyframe(context: context, description: "rectangle cornerRadius").value.cgFloatValue,
+          position: keyframe.position.pointValue,
+          size: keyframe.size.sizeValue,
+          cornerRadius: keyframe.cornerRadius.cgFloatValue,
           direction: rectangle.direction)
           .cgPath()
           .duplicated(times: pathMultiplier)
@@ -29,3 +27,32 @@ extension CAShapeLayer {
       context: context)
   }
 }
+
+extension Rectangle {
+  /// Data that represents how to render a rectangle at a specific point in time
+  struct Keyframe {
+    let size: Vector3D
+    let position: Vector3D
+    let cornerRadius: Vector1D
+  }
+
+  /// Creates a single array of animatable keyframes from the separate arrays of keyframes in this Rectangle
+  func combinedKeyframes(context: LayerAnimationContext) throws-> KeyframeGroup<Rectangle.Keyframe> {
+    let combinedKeyframes = Keyframes.combinedIfPossible(
+      size, position, cornerRadius,
+      makeCombinedResult: Rectangle.Keyframe.init)
+
+    if let combinedKeyframes = combinedKeyframes {
+      return combinedKeyframes
+    } else {
+      // If we weren't able to combine all of the keyframes, we have to take the timing values
+      // from one property and use a fixed value for the other properties.
+      return try size.map { sizeValue in
+        Keyframe(
+          size: sizeValue,
+          position: try position.exactlyOneKeyframe(context: context, description: "rectangle position"),
+          cornerRadius: try cornerRadius.exactlyOneKeyframe(context: context, description: "rectangle cornerRadius"))
+      }
+    }
+  }
+}

package/Sources/Private/CoreAnimation/Animations/ShapeAnimation.swift

@@ -120,25 +120,36 @@ extension Trim {
     let interpolatedStrokeEnd = strokeEnd.manuallyInterpolateKeyframes()
     let interpolatedStrokeOffset = offset.manuallyInterpolateKeyframes()
 
-    let adjustedStrokeStart = try adjustKeyframesForTrimOffsets(
-      strokeKeyframes: interpolatedStrokeStart,
-      offsetKeyframes: interpolatedStrokeOffset,
-      context: context)
-
-    let adjustedStrokeEnd = try adjustKeyframesForTrimOffsets(
-      strokeKeyframes: interpolatedStrokeEnd,
-      offsetKeyframes: interpolatedStrokeOffset,
-      context: context)
+    var adjustedStrokeStart = KeyframeGroup(
+      keyframes: try adjustKeyframesForTrimOffsets(
+        strokeKeyframes: interpolatedStrokeStart,
+        offsetKeyframes: interpolatedStrokeOffset,
+        context: context))
+
+    var adjustedStrokeEnd = KeyframeGroup(
+      keyframes: try adjustKeyframesForTrimOffsets(
+        strokeKeyframes: interpolatedStrokeEnd,
+        offsetKeyframes: interpolatedStrokeOffset,
+        context: context))
 
     // If maximum stroke value is larger than 100%, then we have to create copies of the path
     // so the total path length includes the maximum stroke
-    let maximumStroke = adjustedStrokeEnd.map { $0.value.cgFloatValue }.max() ?? 100
-    let pathMultiplier = Int(ceil(maximumStroke / 100.0))
+    let startStrokes = adjustedStrokeStart.keyframes.map { $0.value.cgFloatValue }
+    let endStrokes = adjustedStrokeEnd.keyframes.map { $0.value.cgFloatValue }
+    let minimumStrokeMultiplier = Double(floor((startStrokes.min() ?? 0) / 100.0))
+    let maximumStrokeMultiplier = Double(ceil((endStrokes.max() ?? 100) / 100.0))
+
+    if minimumStrokeMultiplier < 0 {
+      // Core Animation doesn't support negative stroke offsets, so we have to
+      // shift all of the offset values up by the minimum
+      adjustedStrokeStart = adjustedStrokeStart.map { Vector1D($0.value + (abs(minimumStrokeMultiplier) * 100.0)) }
+      adjustedStrokeEnd = adjustedStrokeEnd.map { Vector1D($0.value + (abs(minimumStrokeMultiplier) * 100.0)) }
+    }
 
     return (
-      strokeStart: KeyframeGroup<Vector1D>(keyframes: adjustedStrokeStart),
-      strokeEnd: KeyframeGroup<Vector1D>(keyframes: adjustedStrokeEnd),
-      pathMultiplier: pathMultiplier)
+      strokeStart: adjustedStrokeStart,
+      strokeEnd: adjustedStrokeEnd,
+      pathMultiplier: Int(abs(maximumStrokeMultiplier) + abs(minimumStrokeMultiplier)))
   }
 
   // MARK: Private

package/Sources/Private/CoreAnimation/Animations/StarAnimation.swift

@@ -36,25 +36,16 @@ extension CAShapeLayer {
   {
     try addAnimation(
       for: .path,
-      keyframes: star.position.keyframes,
-      value: { position in
-        // We can only use one set of keyframes to animate a given CALayer keypath,
-        // so we currently animate `position` and ignore any other keyframes.
-        // TODO: Is there a way to support this properly?
+      keyframes: try star.combinedKeyframes(context: context).keyframes,
+      value: { keyframe in
         BezierPath.star(
-          position: position.pointValue,
-          outerRadius: try star.outerRadius
-            .exactlyOneKeyframe(context: context, description: "outerRadius").value.cgFloatValue,
-          innerRadius: try star.innerRadius?
-            .exactlyOneKeyframe(context: context, description: "innerRadius").value.cgFloatValue ?? 0,
-          outerRoundedness: try star.outerRoundness
-            .exactlyOneKeyframe(context: context, description: "outerRoundness").value.cgFloatValue,
-          innerRoundedness: try star.innerRoundness?
-            .exactlyOneKeyframe(context: context, description: "innerRoundness").value.cgFloatValue ?? 0,
-          numberOfPoints: try star.points
-            .exactlyOneKeyframe(context: context, description: "points").value.cgFloatValue,
-          rotation: try star.rotation
-            .exactlyOneKeyframe(context: context, description: "rotation").value.cgFloatValue,
+          position: keyframe.position.pointValue,
+          outerRadius: keyframe.outerRadius.cgFloatValue,
+          innerRadius: keyframe.innerRadius.cgFloatValue,
+          outerRoundedness: keyframe.outerRoundness.cgFloatValue,
+          innerRoundedness: keyframe.innerRoundness.cgFloatValue,
+          numberOfPoints: keyframe.points.cgFloatValue,
+          rotation: keyframe.rotation.cgFloatValue,
           direction: star.direction)
           .cgPath()
           .duplicated(times: pathMultiplier)
@@ -71,21 +62,14 @@ extension CAShapeLayer {
   {
     try addAnimation(
       for: .path,
-      keyframes: star.position.keyframes,
-      value: { position in
-        // We can only use one set of keyframes to animate a given CALayer keypath,
-        // so we currently animate `position` and ignore any other keyframes.
-        // TODO: Is there a way to support this properly?
+      keyframes: try star.combinedKeyframes(context: context).keyframes,
+      value: { keyframe in
         BezierPath.polygon(
-          position: position.pointValue,
-          numberOfPoints: try star.points
-            .exactlyOneKeyframe(context: context, description: "numberOfPoints").value.cgFloatValue,
-          outerRadius: try star.outerRadius
-            .exactlyOneKeyframe(context: context, description: "outerRadius").value.cgFloatValue,
-          outerRoundedness: try star.outerRoundness
-            .exactlyOneKeyframe(context: context, description: "outerRoundedness").value.cgFloatValue,
-          rotation: try star.rotation
-            .exactlyOneKeyframe(context: context, description: "rotation").value.cgFloatValue,
+          position: keyframe.position.pointValue,
+          numberOfPoints: keyframe.points.cgFloatValue,
+          outerRadius: keyframe.outerRadius.cgFloatValue,
+          outerRoundedness: keyframe.outerRoundness.cgFloatValue,
+          rotation: keyframe.rotation.cgFloatValue,
           direction: star.direction)
           .cgPath()
           .duplicated(times: pathMultiplier)
@@ -93,3 +77,48 @@ extension CAShapeLayer {
       context: context)
   }
 }
+
+extension Star {
+  /// Data that represents how to render a star at a specific point in time
+  struct Keyframe {
+    let position: Vector3D
+    let outerRadius: Vector1D
+    let innerRadius: Vector1D
+    let outerRoundness: Vector1D
+    let innerRoundness: Vector1D
+    let points: Vector1D
+    let rotation: Vector1D
+  }
+
+  /// Creates a single array of animatable keyframes from the separate arrays of keyframes in this star/polygon
+  func combinedKeyframes(context: LayerAnimationContext) throws -> KeyframeGroup<Keyframe> {
+    let combinedKeyframes = Keyframes.combinedIfPossible(
+      position,
+      outerRadius,
+      innerRadius ?? KeyframeGroup(Vector1D(0)),
+      outerRoundness,
+      innerRoundness ?? KeyframeGroup(Vector1D(0)),
+      points,
+      rotation,
+      makeCombinedResult: Star.Keyframe.init)
+
+    if let combinedKeyframes = combinedKeyframes {
+      return combinedKeyframes
+    } else {
+      // If we weren't able to combine all of the keyframes, we have to take the timing values
+      // from one property and use a fixed value for the other properties.
+      return try position.map { positionValue in
+        Keyframe(
+          position: positionValue,
+          outerRadius: try outerRadius.exactlyOneKeyframe(context: context, description: "star outerRadius"),
+          innerRadius: try innerRadius?.exactlyOneKeyframe(context: context, description: "star innerRadius")
+            ?? Vector1D(0),
+          outerRoundness: try outerRoundness.exactlyOneKeyframe(context: context, description: "star outerRoundness"),
+          innerRoundness: try innerRoundness?.exactlyOneKeyframe(context: context, description: "star innerRoundness")
+            ?? Vector1D(0),
+          points: try points.exactlyOneKeyframe(context: context, description: "star points"),
+          rotation: try rotation.exactlyOneKeyframe(context: context, description: "star rotation"))
+      }
+    }
+  }
+}

package/Sources/Private/CoreAnimation/Animations/StrokeAnimation.swift

@@ -55,9 +55,13 @@ extension CAShapeLayer {
     try addOpacityAnimation(for: stroke, context: context)
 
     if let (dashPattern, dashPhase) = stroke.dashPattern?.shapeLayerConfiguration {
-      lineDashPattern = try dashPattern.map {
+      let lineDashPattern = try dashPattern.map {
         try KeyframeGroup(keyframes: $0)
-          .exactlyOneKeyframe(context: context, description: "stroke dashPattern").value.cgFloatValue as NSNumber
+          .exactlyOneKeyframe(context: context, description: "stroke dashPattern").cgFloatValue
+      }
+
+      if lineDashPattern.isSupportedLayerDashPattern {
+        self.lineDashPattern = lineDashPattern as [NSNumber]
       }
 
       try addAnimation(