lottie-ios 3.4.1 → 3.4.2

package/Sources/Private/CoreAnimation/Layers/RepeaterLayer.swift

@@ -0,0 +1,85 @@
+// Created by Cal Stephens on 8/1/22.
+// Copyright © 2022 Airbnb Inc. All rights reserved.
+
+import QuartzCore
+
+// MARK: - RepeaterLayer
+
+/// A layer that renders a child layer at some offset using a `Repeater`
+final class RepeaterLayer: BaseAnimationLayer {
+
+  // MARK: Lifecycle
+
+  init(repeater: Repeater, childLayer: CALayer, index: Int) {
+    repeaterTransform = RepeaterTransform(repeater: repeater, index: index)
+    super.init()
+    addSublayer(childLayer)
+  }
+
+  required init?(coder _: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  /// Called by CoreAnimation to create a shadow copy of this layer
+  /// More details: https://developer.apple.com/documentation/quartzcore/calayer/1410842-init
+  override init(layer: Any) {
+    guard let typedLayer = layer as? Self else {
+      fatalError("\(Self.self).init(layer:) incorrectly called with \(type(of: layer))")
+    }
+
+    repeaterTransform = typedLayer.repeaterTransform
+    super.init(layer: typedLayer)
+  }
+
+  // MARK: Internal
+
+  override func setupAnimations(context: LayerAnimationContext) throws {
+    try super.setupAnimations(context: context)
+    try addTransformAnimations(for: repeaterTransform, context: context)
+  }
+
+  // MARK: Private
+
+  private let repeaterTransform: RepeaterTransform
+
+}
+
+// MARK: - RepeaterTransform
+
+/// A transform model created from a `Repeater`
+private struct RepeaterTransform {
+
+  // MARK: Lifecycle
+
+  init(repeater: Repeater, index: Int) {
+    anchorPoint = repeater.anchorPoint
+    scale = repeater.scale
+
+    rotation = repeater.rotation.map { rotation in
+      Vector1D(rotation.value * Double(index))
+    }
+
+    position = repeater.position.map { position in
+      Vector3D(
+        x: position.x * Double(index),
+        y: position.y * Double(index),
+        z: position.z * Double(index))
+    }
+  }
+
+  // MARK: Internal
+
+  let anchorPoint: KeyframeGroup<Vector3D>
+  let position: KeyframeGroup<Vector3D>
+  let rotation: KeyframeGroup<Vector1D>
+  let scale: KeyframeGroup<Vector3D>
+
+}
+
+// MARK: TransformModel
+
+extension RepeaterTransform: TransformModel {
+  var _position: KeyframeGroup<Vector3D>? { position }
+  var _positionX: KeyframeGroup<Vector1D>? { nil }
+  var _positionY: KeyframeGroup<Vector1D>? { nil }
+}

package/Sources/Private/CoreAnimation/Layers/ShapeItemLayer.swift

@@ -55,8 +55,13 @@ final class ShapeItemLayer: BaseAnimationLayer {
     /// A `ShapeItem` that should be rendered by this layer
     let item: ShapeItem
 
-    /// The group that contains this `ShapeItem`, if applicable
-    let parentGroup: Group?
+    /// The set of groups that this item descends from
+    ///  - Due to the way `GroupLayer`s are setup, the original `ShapeItem`
+    ///    hierarchy from the `ShapeLayer` data model may no longer exactly
+    ///    match the hierarchy of `GroupLayer` / `ShapeItemLayer`s constructed
+    ///    at runtime. Since animation keypaths need to match the original
+    ///    structure of the `ShapeLayer` data model, we track that info here.
+    let groupPath: [String]
   }
 
   override func setupAnimations(context: LayerAnimationContext) throws {
@@ -203,6 +208,13 @@ final class ShapeItemLayer: BaseAnimationLayer {
     var trimPathMultiplier: PathMultiplier? = nil
     if let (trim, context) = otherItems.first(Trim.self, context: context) {
       trimPathMultiplier = try shapeLayer.addAnimations(for: trim, context: context)
+
+      try context.compatibilityAssert(
+        otherItems.first(Fill.self) == nil,
+        """
+        The Core Animation rendering engine doesn't currently support applying
+        trims to filled shapes (only stroked shapes).
+        """)
     }
 
     try shapeLayer.addAnimations(for: shape.item, context: context.for(shape), pathMultiplier: trimPathMultiplier ?? 1)
@@ -227,6 +239,7 @@ final class ShapeItemLayer: BaseAnimationLayer {
       pathMultiplier: 1)
 
     if let (gradientFill, context) = otherItems.first(GradientFill.self, context: context) {
+      layers.shapeMaskLayer.fillRule = gradientFill.fillRule.caFillRule
       try layers.gradientColorLayer.addGradientAnimations(for: gradientFill, type: .rgb, context: context)
       try layers.gradientAlphaLayer?.addGradientAnimations(for: gradientFill, type: .alpha, context: context)
     }
@@ -292,8 +305,8 @@ extension LayerAnimationContext {
   func `for`(_ item: ShapeItemLayer.Item) -> LayerAnimationContext {
     var context = self
 
-    if let group = item.parentGroup {
-      context.currentKeypath.keys.append(group.name)
+    for parentGroupName in item.groupPath {
+      context.currentKeypath.keys.append(parentGroupName)
     }
 
     context.currentKeypath.keys.append(item.item.name)

package/Sources/Private/CoreAnimation/Layers/ShapeLayer.swift

@@ -13,7 +13,7 @@ final class ShapeLayer: BaseCompositionLayer {
   init(shapeLayer: ShapeLayerModel, context: LayerContext) throws {
     self.shapeLayer = shapeLayer
     super.init(layerModel: shapeLayer)
-    try setupGroups(from: shapeLayer.items, parentGroup: nil, context: context)
+    try setUpGroups(context: context)
   }
 
   required init?(coder _: NSCoder) {
@@ -35,6 +35,28 @@ final class ShapeLayer: BaseCompositionLayer {
 
   private let shapeLayer: ShapeLayerModel
 
+  private func setUpGroups(context: LayerContext) throws {
+    // If the layer has a `Repeater`, the `Group`s are duplicated and offset
+    // based on the copy count of the repeater.
+    if let repeater = shapeLayer.items.first(where: { $0 is Repeater }) as? Repeater {
+      try setUpRepeater(repeater, context: context)
+    } else {
+      try setupGroups(from: shapeLayer.items, parentGroup: nil, parentGroupPath: [], context: context)
+    }
+  }
+
+  private func setUpRepeater(_ repeater: Repeater, context: LayerContext) throws {
+    let items = shapeLayer.items.filter { !($0 is Repeater) }
+    let copyCount = Int(try repeater.copies.exactlyOneKeyframe(context: context, description: "repeater copies").value)
+
+    for index in 0..<copyCount {
+      for groupLayer in try makeGroupLayers(from: items, parentGroup: nil, parentGroupPath: [], context: context) {
+        let repeatedLayer = RepeaterLayer(repeater: repeater, childLayer: groupLayer, index: index)
+        addSublayer(repeatedLayer)
+      }
+    }
+  }
+
 }
 
 // MARK: - GroupLayer
@@ -44,9 +66,10 @@ final class GroupLayer: BaseAnimationLayer {
 
   // MARK: Lifecycle
 
-  init(group: Group, inheritedItems: [ShapeItemLayer.Item], context: LayerContext) throws {
+  init(group: Group, items: [ShapeItemLayer.Item], groupPath: [String], context: LayerContext) throws {
     self.group = group
-    self.inheritedItems = inheritedItems
+    self.items = items
+    self.groupPath = groupPath
     super.init()
     try setupLayerHierarchy(context: context)
   }
@@ -63,7 +86,8 @@ final class GroupLayer: BaseAnimationLayer {
     }
 
     group = typedLayer.group
-    inheritedItems = typedLayer.inheritedItems
+    items = typedLayer.items
+    groupPath = typedLayer.groupPath
     super.init(layer: typedLayer)
   }
 
@@ -82,52 +106,62 @@ final class GroupLayer: BaseAnimationLayer {
 
   private let group: Group
 
-  /// `ShapeItem`s that were listed in the parent's `items: [ShapeItem]` array
-  ///   - This layer's parent is either the root `ShapeLayerModel` or some other `Group`
-  private let inheritedItems: [ShapeItemLayer.Item]
+  /// `ShapeItemLayer.Item`s rendered by this `Group`
+  ///  - In the original `ShapeLayer` data model, these items could have originated from a different group
+  private let items: [ShapeItemLayer.Item]
+
+  /// The keypath that represents this group, with respect to the parent `ShapeLayer`
+  ///  - Due to the way `GroupLayer`s are setup, the original `ShapeItem`
+  ///    hierarchy from the `ShapeLayer` data model may no longer exactly
+  ///    match the hierarchy of `GroupLayer` / `ShapeItemLayer`s constructed
+  ///    at runtime. Since animation keypaths need to match the original
+  ///    structure of the `ShapeLayer` data model, we track that info here.
+  private let groupPath: [String]
 
-  /// `ShapeItem`s (other than nested `Group`s) that are included in this group
-  private lazy var nonGroupItems = group.items
-    .filter { !($0 is Group) }
-    .map { ShapeItemLayer.Item(item: $0, parentGroup: group) }
-    + inheritedItems
+  /// `ShapeItem`s (other than nested `Group`s) that are rendered by this layer
+  private lazy var nonGroupItems = items.filter { !($0.item is Group) }
 
   private func setupLayerHierarchy(context: LayerContext) throws {
     // Groups can contain other groups, so we may have to continue
     // recursively creating more `GroupLayer`s
-    try setupGroups(from: group.items, parentGroup: group, context: context)
+    try setupGroups(from: group.items, parentGroup: group, parentGroupPath: groupPath, context: context)
 
     // Create `ShapeItemLayer`s for each subgroup of shapes that should be rendered as a single unit
     //  - These groups are listed from front-to-back, so we have to add the sublayers in reverse order
     for shapeRenderGroup in nonGroupItems.shapeRenderGroups.reversed() {
-      // If all of the path-drawing `ShapeItem`s have keyframes with the same timing information,
-      // we can combine the `[KeyframeGroup<BezierPath>]` (which have to animate in separate layers)
-      // into a single `KeyframeGroup<[BezierPath]>`, which can be combined into a single CGPath animation.
-      //
-      // This is how Groups with multiple path-drawing items are supposed to be rendered,
-      // because combining multiple paths into a single `CGPath` (instead of rendering them in separate layers)
-      // allows `CAShapeLayerFillRule.evenOdd` to be applied if the paths overlap. We just can't do this
-      // in all cases, due to limitations of Core Animation.
-      //
-      // As a fall back when this is not possible, we render each shape in its own `CAShapeLayer`,
-      // which causes the `fillRule` to be applied incorrectly in cases where the paths overlap.
-      // We can't really detect when this happens, so this is a case where `RenderingEngineMode.automatic`
-      // can behave incorrectly. In the future we could fix this by precomputing the full combined CGPath for each
-      // individual frame in the animation (like we do for some trim animations as of #1612).
+      // When there are multiple path-drawing items, they're supposed to be rendered
+      // in a single `CAShapeLayer` (instead of rendering them in separate layers) so
+      // `CAShapeLayerFillRule.evenOdd` can be applied correctly if the paths overlap.
+      // Since a `CAShapeLayer` only supports animating a single `CGPath` from a single `KeyframeGroup<BezierPath>`,
+      // this requires combining all of the path-drawing items into a single set of keyframes.
       if
         shapeRenderGroup.pathItems.count > 1,
-        let combinedShapeKeyframes = Keyframes.combinedIfPossible(
-          shapeRenderGroup.pathItems.map { ($0.item as? Shape)?.path }),
+        // We currently only support this codepath for `Shape` items that directly contain bezier path keyframes.
+        // We could also support this for other path types like rectangles, ellipses, and polygons with more work.
+        shapeRenderGroup.pathItems.allSatisfy({ $0.item is Shape }),
         // `Trim`s are currently only applied correctly using individual `ShapeItemLayer`s,
         // because each path has to be trimmed separately.
         !shapeRenderGroup.otherItems.contains(where: { $0.item is Trim })
       {
-        let combinedShape = CombinedShapeItem(
-          shapes: combinedShapeKeyframes,
-          name: group.name)
+        let allPathKeyframes = shapeRenderGroup.pathItems.compactMap { ($0.item as? Shape)?.path }
+        let combinedShape: CombinedShapeItem
+
+        // If all of the path-drawing `ShapeItem`s have keyframes with the same timing information,
+        // we can combine the `[KeyframeGroup<BezierPath>]` (which have to animate in separate layers)
+        // into a single `KeyframeGroup<[BezierPath]>`, which can be combined into a single CGPath animation.
+        if let combinedShapeKeyframes = Keyframes.combinedIfPossible(allPathKeyframes) {
+          combinedShape = CombinedShapeItem(shapes: combinedShapeKeyframes, name: group.name)
+        }
+
+        // Otherwise, in order for the path fills to be rendered correctly, we have to manually
+        // interpolate the path for each shape at each frame ahead of time so we can combine them
+        // into a single set of bezier path keyframes.
+        else {
+          combinedShape = .manuallyInterpolating(shapes: allPathKeyframes, name: group.name, context: context)
+        }
 
         let sublayer = try ShapeItemLayer(
-          shape: ShapeItemLayer.Item(item: combinedShape, parentGroup: group),
+          shape: ShapeItemLayer.Item(item: combinedShape, groupPath: shapeRenderGroup.pathItems[0].groupPath),
           otherItems: shapeRenderGroup.otherItems,
           context: context)
 
@@ -135,7 +169,8 @@ final class GroupLayer: BaseAnimationLayer {
       }
 
       // Otherwise, if each `ShapeItem` that draws a `GGPath` animates independently,
-      // we have to create a separate `ShapeItemLayer` for each one.
+      // we have to create a separate `ShapeItemLayer` for each one. This may render
+      // incorrectly if there are multiple paths that overlap with each other.
       else {
         for pathDrawingItem in shapeRenderGroup.pathItems {
           let sublayer = try ShapeItemLayer(
@@ -155,42 +190,78 @@ extension CALayer {
   /// Sets up `GroupLayer`s for each `Group` in the given list of `ShapeItem`s
   ///  - Each `Group` item becomes its own `GroupLayer` sublayer.
   ///  - Other `ShapeItem` are applied to all sublayers
-  fileprivate func setupGroups(from items: [ShapeItem], parentGroup: Group?, context: LayerContext) throws {
-    var (groupItems, otherItems) = items.grouped(by: { $0 is Group })
+  fileprivate func setupGroups(
+    from items: [ShapeItem],
+    parentGroup: Group?,
+    parentGroupPath: [String],
+    context: LayerContext) throws
+  {
+    let groupLayers = try makeGroupLayers(
+      from: items,
+      parentGroup: parentGroup,
+      parentGroupPath: parentGroupPath,
+      context: context)
+
+    for groupLayer in groupLayers {
+      addSublayer(groupLayer)
+    }
+  }
+
+  /// Creates a `GroupLayer` for each `Group` in the given list of `ShapeItem`s
+  ///  - Each `Group` item becomes its own `GroupLayer` sublayer.
+  ///  - Other `ShapeItem` are applied to all sublayers
+  fileprivate func makeGroupLayers(
+    from items: [ShapeItem],
+    parentGroup: Group?,
+    parentGroupPath: [String],
+    context: LayerContext) throws
+    -> [GroupLayer]
+  {
+    var (groupItems, otherItems) = items
+      .filter { !$0.hidden }
+      .grouped(by: { $0 is Group })
 
     // If this shape doesn't have any groups but just has top-level shape items,
     // we can create a placeholder group with those items. (Otherwise the shape items
     // would be silently ignored, since we expect all shape layers to have a top-level group).
     if groupItems.isEmpty, parentGroup == nil {
-      groupItems = [Group(items: otherItems, name: "Group")]
+      groupItems = [Group(items: otherItems, name: "")]
       otherItems = []
     }
 
+    // `ShapeItem`s either draw a path, or modify how a path is rendered.
+    //  - If this group doesn't have any items that draw a path, then its
+    //    items are applied to all of this group's children.
+    let inheritedItemsForChildGroups: [ShapeItemLayer.Item]
+    if !otherItems.contains(where: { $0.drawsCGPath }) {
+      inheritedItemsForChildGroups = otherItems.map {
+        ShapeItemLayer.Item(item: $0, groupPath: parentGroupPath)
+      }
+    } else {
+      inheritedItemsForChildGroups = []
+    }
+
     // Groups are listed from front to back,
     // but `CALayer.sublayers` are listed from back to front.
     let groupsInZAxisOrder = groupItems.reversed()
 
-    for group in groupsInZAxisOrder {
-      guard let group = group as? Group else { continue }
+    return try groupsInZAxisOrder.compactMap { group in
+      guard let group = group as? Group else { return nil }
 
-      // `ShapeItem`s either draw a path, or modify how a path is rendered.
-      //  - If this group doesn't have any items that draw a path, then its
-      //    items are applied to all of this groups children.
-      let inheritedItems: [ShapeItemLayer.Item]
-      if !otherItems.contains(where: { $0.drawsCGPath }) {
-        inheritedItems = otherItems.map {
-          ShapeItemLayer.Item(item: $0, parentGroup: parentGroup)
-        }
-      } else {
-        inheritedItems = []
+      var pathForChildren = parentGroupPath
+      if !group.name.isEmpty {
+        pathForChildren.append(group.name)
+      }
+
+      let childItems = group.items.map {
+        ShapeItemLayer.Item(item: $0, groupPath: pathForChildren)
       }
 
-      let groupLayer = try GroupLayer(
+      return try GroupLayer(
         group: group,
-        inheritedItems: inheritedItems,
+        items: childItems + inheritedItemsForChildGroups,
+        groupPath: pathForChildren,
         context: context)
-
-      addSublayer(groupLayer)
     }
   }
 }

package/Sources/Private/CoreAnimation/Layers/TextLayer.swift

@@ -41,7 +41,7 @@ final class TextLayer: BaseCompositionLayer {
     // Instead, we use the same `CoreTextRenderLayer` (with a custom `draw` implementation)
     // used by the Main Thread rendering engine. This means the Core Animation engine can't
     // _animate_ text properties, but it can display static text without any issues.
-    let text = try textLayerModel.text.exactlyOneKeyframe(context: context, description: "text layer text").value
+    let text = try textLayerModel.text.exactlyOneKeyframe(context: context, description: "text layer text")
 
     // The Core Animation engine doesn't currently support `TextAnimator`s.
     //  - We could add support for animating the transform-related properties without much trouble.

package/Sources/Private/MainThread/LayerContainers/CompLayers/CompositionLayer.swift

@@ -17,7 +17,7 @@ class CompositionLayer: CALayer, KeypathSearchable {
 
   init(layer: LayerModel, size: CGSize) {
     transformNode = LayerTransformNode(transform: layer.transform)
-    if let masks = layer.masks {
+    if let masks = layer.masks?.filter({ $0.mode != .none }), !masks.isEmpty {
       maskLayer = MaskContainerLayer(masks: masks)
     } else {
       maskLayer = nil

package/Sources/Private/MainThread/LayerContainers/Utility/CoreTextRenderLayer.swift

@@ -151,6 +151,16 @@ final class CoreTextRenderLayer: CALayer {
       strokeFrame = nil
     }
 
+    // This fixes a vertical padding issue that arises when drawing some fonts.
+    // For some reason some fonts, such as Helvetica draw with and ascender that is greater than the one reported by CTFontGetAscender.
+    // I suspect this is actually an issue with the Attributed string, but cannot reproduce.
+
+    if let fillFrame = fillFrame {
+      ctx.adjustWithLineOrigins(in: fillFrame, with: font)
+    } else if let strokeFrame = strokeFrame {
+      ctx.adjustWithLineOrigins(in: strokeFrame, with: font)
+    }
+
     if !strokeOnTop, let strokeFrame = strokeFrame {
       CTFrameDraw(strokeFrame, ctx)
     }
@@ -318,3 +328,22 @@ final class CoreTextRenderLayer: CALayer {
   }
 
 }
+
+extension CGContext {
+
+  fileprivate func adjustWithLineOrigins(in frame: CTFrame, with font: CTFont?) {
+    guard let font = font else { return }
+
+    let count = CFArrayGetCount(CTFrameGetLines(frame))
+
+    guard count > 0 else { return }
+
+    var o = [CGPoint](repeating: .zero, count: 1)
+    CTFrameGetLineOrigins(frame, CFRange(location: count - 1, length: 1), &o)
+
+    let diff = CTFontGetDescent(font) - o[0].y
+    if diff > 0 {
+      translateBy(x: 0, y: diff)
+    }
+  }
+}

package/Sources/Private/MainThread/LayerContainers/Utility/InvertedMatteLayer.swift

@@ -42,6 +42,7 @@ final class InvertedMatteLayer: CALayer, CompositionLayerDelegate {
   let wrapperLayer = CALayer()
 
   func frameUpdated(frame _: CGFloat) {
+    setNeedsDisplay()
     displayIfNeeded()
   }
 

package/Sources/Private/MainThread/NodeRenderSystem/Extensions/ItemsExtension.swift

@@ -79,6 +79,11 @@ extension Array where Element == ShapeItem {
         /// Now add all child paths to current tree
         nodeTree.paths.append(contentsOf: tree.paths)
         nodeTree.renderContainers.append(node.container)
+      } else if item is Repeater {
+        LottieLogger.shared.assertionFailure("""
+          The Main Thread rendering engine doesn't currently support repeaters.
+          To play an animation with repeaters, you can use the Core Animation rendering engine instead.
+          """)
       }
 
       if let pathNode = nodeTree.rootNode as? PathNode {

package/Sources/Private/MainThread/NodeRenderSystem/Nodes/OutputNodes/Renderables/GradientFillRenderer.swift

@@ -198,6 +198,11 @@ final class GradientFillRenderer: PassThroughOutputNode, Renderable {
     }
   }
 
+  var fillRule: CAShapeLayerFillRule {
+    get { maskLayer.fillRule }
+    set { maskLayer.fillRule = newValue }
+  }
+
   func render(_: CGContext) {
     // do nothing
   }

package/Sources/Private/MainThread/NodeRenderSystem/Nodes/RenderNodes/GradientFillNode.swift

@@ -22,6 +22,7 @@ final class GradientFillProperties: NodePropertyMap, KeypathSearchable {
     colors = NodeProperty(provider: KeyframeInterpolator(keyframes: gradientfill.colors.keyframes))
     gradientType = gradientfill.gradientType
     numberOfColors = gradientfill.numberOfColors
+    fillRule = gradientfill.fillRule
     keypathProperties = [
       "Opacity" : opacity,
       "Start Point" : startPoint,
@@ -42,6 +43,7 @@ final class GradientFillProperties: NodePropertyMap, KeypathSearchable {
 
   let gradientType: GradientType
   let numberOfColors: Int
+  let fillRule: FillRule
 
   let keypathProperties: [String: AnyNodeProperty]
   let properties: [AnyNodeProperty]
@@ -98,5 +100,6 @@ final class GradientFillNode: AnimatorNode, RenderNode {
     fillRender.colors = fillProperties.colors.value.map { CGFloat($0) }
     fillRender.type = fillProperties.gradientType
     fillRender.numberOfColors = fillProperties.numberOfColors
+    fillRender.fillRule = fillProperties.fillRule.caFillRule
   }
 }

package/Sources/Private/MainThread/NodeRenderSystem/Nodes/RenderNodes/GradientStrokeNode.swift

@@ -140,7 +140,7 @@ final class GradientStrokeNode: AnimatorNode, RenderNode {
 
     /// Get dash lengths
     let dashLengths = strokeProperties.dashPattern.value.map { $0.cgFloatValue }
-    if dashLengths.count > 0 {
+    if dashLengths.count > 0, !dashLengths.allSatisfy({ $0.isZero }) {
       strokeRender.strokeRender.dashPhase = strokeProperties.dashPhase.value.cgFloatValue
       strokeRender.strokeRender.dashLengths = dashLengths
     } else {

package/Sources/Private/MainThread/NodeRenderSystem/Nodes/RenderNodes/StrokeNode.swift

@@ -118,7 +118,7 @@ final class StrokeNode: AnimatorNode, RenderNode {
 
     /// Get dash lengths
     let dashLengths = strokeProperties.dashPattern.value.map { $0.cgFloatValue }
-    if dashLengths.count > 0 {
+    if dashLengths.count > 0, !dashLengths.allSatisfy({ $0.isZero }) {
       strokeRender.dashPhase = strokeProperties.dashPhase.value.cgFloatValue
       strokeRender.dashLengths = dashLengths
     } else {
@@ -148,6 +148,22 @@ extension Array where Element == DashElement {
         dashPatterns.append(dash.value.keyframes)
       }
     }
+
+    dashPatterns = ContiguousArray(dashPatterns.map { pattern in
+      ContiguousArray(pattern.map { keyframe -> Keyframe<Vector1D> in
+        // The recommended way to create a stroke of round dots, in theory,
+        // is to use a value of 0 followed by the stroke width, but for
+        // some reason Core Animation incorrectly (?) renders these as pills
+        // instead of circles. As a workaround, for parity with Lottie on other
+        // platforms, we can change `0`s to `0.01`: https://stackoverflow.com/a/38036486
+        if keyframe.value.cgFloatValue == 0 {
+          return keyframe.withValue(Vector1D(0.01))
+        } else {
+          return keyframe
+        }
+      })
+    })
+
     return (dashPatterns, dashPhase)
   }
 }

package/Sources/Private/Model/Animation.swift

@@ -31,8 +31,8 @@ public final class Animation: Codable, DictionaryInitializable {
     startFrame = try container.decode(AnimationFrameTime.self, forKey: .startFrame)
     endFrame = try container.decode(AnimationFrameTime.self, forKey: .endFrame)
     framerate = try container.decode(Double.self, forKey: .framerate)
-    width = try container.decode(Int.self, forKey: .width)
-    height = try container.decode(Int.self, forKey: .height)
+    width = try container.decode(Double.self, forKey: .width)
+    height = try container.decode(Double.self, forKey: .height)
     layers = try container.decode([LayerModel].self, ofFamily: LayerType.self, forKey: .layers)
     glyphs = try container.decodeIfPresent([Glyph].self, forKey: .glyphs)
     fonts = try container.decodeIfPresent(FontList.self, forKey: .fonts)
@@ -137,10 +137,10 @@ public final class Animation: Codable, DictionaryInitializable {
   let type: CoordinateSpace
 
   /// The height of the composition in points.
-  let width: Int
+  let width: Double
 
   /// The width of the composition in points.
-  let height: Int
+  let height: Double
 
   /// The list of animation layers
   let layers: [LayerModel]

package/Sources/Private/Model/Keyframes/KeyframeGroup.swift

@@ -195,3 +195,28 @@ extension Keyframe {
       spatialOutTangent: spatialOutTangent)
   }
 }
+
+extension KeyframeGroup {
+  /// Maps the values of each individual keyframe in this group
+  func map<NewValue>(_ transformation: (T) throws -> NewValue) rethrows -> KeyframeGroup<NewValue> {
+    KeyframeGroup<NewValue>(keyframes: ContiguousArray(try keyframes.map { keyframe in
+      keyframe.withValue(try transformation(keyframe.value))
+    }))
+  }
+}
+
+// MARK: - AnyKeyframeGroup
+
+/// A type-erased wrapper for `KeyframeGroup`s
+protocol AnyKeyframeGroup {
+  var untyped: KeyframeGroup<Any> { get }
+}
+
+// MARK: - KeyframeGroup + AnyKeyframeGroup
+
+extension KeyframeGroup: AnyKeyframeGroup {
+  /// An untyped copy of these keyframes
+  var untyped: KeyframeGroup<Any> {
+    map { $0 as Any }
+  }
+}

package/Sources/Private/Model/ShapeItems/Ellipse.swift

@@ -17,7 +17,6 @@ enum PathDirection: Int, Codable {
 
 // MARK: - Ellipse
 
-/// An item that define an ellipse shape
 final class Ellipse: ShapeItem {
 
   // MARK: Lifecycle

package/Sources/Private/Model/ShapeItems/Fill.swift

@@ -17,7 +17,6 @@ enum FillRule: Int, Codable {
 
 // MARK: - Fill
 
-/// An item that defines a fill render
 final class Fill: ShapeItem {
 
   // MARK: Lifecycle
@@ -54,6 +53,7 @@ final class Fill: ShapeItem {
   /// The color keyframes for the fill
   let color: KeyframeGroup<Color>
 
+  /// The fill rule to use when filling a path
   let fillRule: FillRule
 
   override func encode(to encoder: Encoder) throws {