lottie-ios 4.3.3 → 4.4.0

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

@@ -10,28 +10,54 @@ extension CALayer {
     inFrame: AnimationFrameTime,
     outFrame: AnimationFrameTime,
     context: LayerAnimationContext)
+    throws
   {
-    let animation = CAKeyframeAnimation(keyPath: #keyPath(isHidden))
-    animation.calculationMode = .discrete
+    /// If this layer uses `complexTimeRemapping`, use the `addAnimation` codepath
+    /// which uses `Keyframes.manuallyInterpolatedWithTimeRemapping`.
+    if context.mustUseComplexTimeRemapping {
+      let isHiddenKeyframes = KeyframeGroup(keyframes: [
+        Keyframe(value: true, time: 0, isHold: true), // hidden, before `inFrame`
+        Keyframe(value: false, time: inFrame, isHold: true), // visible
+        Keyframe(value: true, time: outFrame, isHold: true), // hidden, after `outFrame`
+      ])
 
-    animation.values = [
-      true, // hidden, before `inFrame`
-      false, // visible
-      true, // hidden, after `outFrame`
-    ]
+      try addAnimation(
+        for: .isHidden,
+        keyframes: isHiddenKeyframes.map { Hold(value: $0) },
+        value: { $0.value },
+        context: context)
+    }
 
-    // From the documentation of `keyTimes`:
-    //  - If the calculationMode is set to discrete, the first value in the array
-    //    must be 0.0 and the last value must be 1.0. The array should have one more
-    //    entry than appears in the values array. For example, if there are two values,
-    //    there should be three key times.
-    animation.keyTimes = [
-      NSNumber(value: 0.0),
-      NSNumber(value: max(Double(context.progressTime(for: inFrame)), 0)),
-      NSNumber(value: min(Double(context.progressTime(for: outFrame)), 1)),
-      NSNumber(value: 1.0),
-    ]
+    /// Otherwise continue using the legacy codepath that doesn't support complex time remapping.
+    ///  - TODO: We could remove this codepath in favor of always using the simpler codepath above,
+    ///    but would have to solve https://github.com/airbnb/lottie-ios/pull/2254 for that codepath.
+    else {
+      let animation = CAKeyframeAnimation(keyPath: #keyPath(isHidden))
+      animation.calculationMode = .discrete
 
-    add(animation, timedWith: context)
+      animation.values = [
+        true, // hidden, before `inFrame`
+        false, // visible
+        true, // hidden, after `outFrame`
+      ]
+
+      // From the documentation of `keyTimes`:
+      //  - If the calculationMode is set to discrete, the first value in the array
+      //    must be 0.0 and the last value must be 1.0. The array should have one more
+      //    entry than appears in the values array. For example, if there are two values,
+      //    there should be three key times.
+      animation.keyTimes = [
+        NSNumber(value: 0.0),
+        NSNumber(value: max(Double(try context.progressTime(for: inFrame)), 0)),
+        // Anything visible during the last frame should stay visible until the absolute end of the animation.
+        //  - This matches the behavior of the main thread rendering engine.
+        context.simpleTimeRemapping(outFrame) == context.animation.endFrame
+          ? NSNumber(value: Double(1.0))
+          : NSNumber(value: min(Double(try context.progressTime(for: outFrame)), 1)),
+        NSNumber(value: 1.0),
+      ]
+
+      add(animation, timedWith: context)
+    }
   }
 }

package/Sources/Private/CoreAnimation/CoreAnimationLayer.swift

@@ -1,7 +1,6 @@
 // Created by Cal Stephens on 12/13/21.
 // Copyright © 2021 Airbnb Inc. All rights reserved.
 
-import Foundation
 import QuartzCore
 
 // MARK: - CoreAnimationLayer
@@ -161,7 +160,7 @@ final class CoreAnimationLayer: BaseAnimationLayer {
     //    allocate a very large amount of memory (400mb+).
     //  - Alternatively this layer could subclass `CATransformLayer`,
     //    but this causes Core Animation to emit unnecessary logs.
-    if var pendingAnimationConfiguration = pendingAnimationConfiguration {
+    if var pendingAnimationConfiguration {
       pendingAnimationConfigurationModification?(&pendingAnimationConfiguration.animationConfiguration)
       pendingAnimationConfigurationModification = nil
       self.pendingAnimationConfiguration = nil
@@ -249,6 +248,8 @@ final class CoreAnimationLayer: BaseAnimationLayer {
     try setupLayerHierarchy(
       for: animation.layers,
       context: layerContext)
+
+    try validateReasonableNumberOfTimeRemappingLayers()
   }
 
   /// Immediately builds and begins playing `CAAnimation`s for each sublayer
@@ -387,7 +388,10 @@ extension CoreAnimationLayer: RootAnimationLayer {
       let requiredAnimationConfiguration = AnimationConfiguration(
         animationContext: AnimationContext(
           playFrom: animation.startFrame,
-          playTo: animation.endFrame,
+          // Normal animation playback (like when looping) skips the last frame.
+          // However when the animation is paused, we need to be able to render the final frame.
+          // To allow this we have to extend the length of the animation by one frame.
+          playTo: animation.endFrame + 1,
           closure: nil),
         timingConfiguration: CAMediaTimingConfiguration(speed: 0))
 
@@ -529,6 +533,18 @@ extension CoreAnimationLayer: RootAnimationLayer {
     }
   }
 
+  /// Time remapping in the Core Animation rendering engine requires manually interpolating
+  /// every frame of every animation. For very large animations with a huge number of layers,
+  /// this can be prohibitively expensive.
+  func validateReasonableNumberOfTimeRemappingLayers() throws {
+    try layerContext.compatibilityAssert(
+      numberOfLayersWithTimeRemapping < 500,
+      """
+      This animation has a very large number of layers with time remapping (\(numberOfLayersWithTimeRemapping)),
+      so will perform poorly with the Core Animation rendering engine.
+      """)
+  }
+
 }
 
 // MARK: - CALayer + allSublayers
@@ -546,4 +562,23 @@ extension CALayer {
 
     return allSublayers
   }
+
+  /// The number of layers in this layer hierarchy that have a time remapping applied
+  @nonobjc
+  var numberOfLayersWithTimeRemapping: Int {
+    var numberOfSublayersWithTimeRemapping = 0
+
+    for sublayer in sublayers ?? [] {
+      if 
+        let preCompLayer = sublayer as? PreCompLayer,
+        preCompLayer.preCompLayer.timeRemapping != nil
+      {
+        numberOfSublayersWithTimeRemapping += preCompLayer.allSublayers.count
+      } else {
+        numberOfSublayersWithTimeRemapping += sublayer.numberOfLayersWithTimeRemapping
+      }
+    }
+
+    return numberOfSublayersWithTimeRemapping
+  }
 }

package/Sources/Private/CoreAnimation/Extensions/CALayer+fillBounds.swift

@@ -10,7 +10,7 @@ extension CALayer {
   /// without setting `frame` (which is not permitted if the layer can rotate)
   @nonobjc
   func fillBoundsOfSuperlayer() {
-    guard let superlayer = superlayer else { return }
+    guard let superlayer else { return }
 
     if let customLayerLayer = self as? CustomLayoutLayer {
       customLayerLayer.layout(superlayerBounds: superlayer.bounds)

package/Sources/Private/CoreAnimation/Extensions/Keyframes+combined.swift

@@ -256,7 +256,11 @@ enum Keyframes {
 
     let minimumTime = times.min() ?? 0
     let maximumTime = times.max() ?? 0
-    let animationLocalTimeRange = Int(minimumTime)...Int(maximumTime)
+
+    // We disable Core Animation interpolation when using manually interpolated keyframes,
+    // so we don't animate between these values. To prevent the animation from being choppy
+    // even at low playback speed, we have to interpolate at a very high fidelity.
+    let animationLocalTimeRange = stride(from: minimumTime, to: maximumTime, by: 0.1)
 
     let interpolatedKeyframes = try animationLocalTimeRange.compactMap { localTime -> Keyframe<CombinedResult>? in
       let interpolatedValues = untypedInterpolators.map { interpolator in
@@ -272,7 +276,10 @@ enum Keyframes {
 
       return Keyframe(
         value: combinedResult,
-        time: AnimationFrameTime(localTime))
+        time: AnimationFrameTime(localTime),
+        // Since we already manually interpolated the keyframes, have Core Animation display
+        // each value as a static keyframe rather than trying to interpolate between them.
+        isHold: true)
     }
 
     return KeyframeGroup(keyframes: ContiguousArray(interpolatedKeyframes))

package/Sources/Private/CoreAnimation/Extensions/Keyframes+timeRemapping.swift

@@ -0,0 +1,46 @@
+// Created by Cal Stephens on 1/8/24.
+// Copyright © 2024 Airbnb Inc. All rights reserved.
+
+extension Keyframes {
+  /// Manually interpolates the given keyframes, and applies `context.complexTimeRemapping`.
+  ///  - Since `complexTimeRemapping` is a mapping from "global time" to "local time",
+  ///    we have to manually interpolate the keyframes at every frame in the animation.
+  static func manuallyInterpolatedWithTimeRemapping<T: AnyInterpolatable>(
+    _ keyframes: KeyframeGroup<T>,
+    context: LayerAnimationContext)
+    -> KeyframeGroup<T>
+  {
+    let minimumTime = context.animation.startFrame
+    let maximumTime = context.animation.endFrame
+    let animationLocalTimeRange = stride(from: minimumTime, to: maximumTime, by: 1.0)
+
+    let interpolator = keyframes.interpolator
+
+    // Since potentially many global times can refer to the same local time,
+    // we can cache and reused these local-time values.
+    var localTimeCache = [AnimationFrameTime: T]()
+
+    let interpolatedRemappedKeyframes = animationLocalTimeRange.compactMap { globalTime -> Keyframe<T>? in
+      let remappedLocalTime = context.complexTimeRemapping(globalTime)
+
+      let valueAtRemappedTime: T
+      if let cachedValue = localTimeCache[remappedLocalTime] {
+        valueAtRemappedTime = cachedValue
+      } else if let interpolatedValue = interpolator.value(frame: remappedLocalTime) as? T {
+        valueAtRemappedTime = interpolatedValue
+        localTimeCache[remappedLocalTime] = interpolatedValue
+      } else {
+        LottieLogger.shared.assertionFailure("""
+          Failed to cast untyped keyframe values to expected type. This is an internal error.
+          """)
+        return nil
+      }
+
+      return Keyframe(
+        value: valueAtRemappedTime,
+        time: AnimationFrameTime(globalTime))
+    }
+
+    return KeyframeGroup(keyframes: ContiguousArray(interpolatedRemappedKeyframes))
+  }
+}

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

@@ -52,8 +52,37 @@ struct LayerAnimationContext {
   var recordHierarchyKeypath: ((String) -> Void)?
 
   /// A closure that remaps the given frame in the child layer's local time to a frame
-  /// in the animation's overall global time
-  private(set) var timeRemapping: ((AnimationFrameTime) -> AnimationFrameTime) = { $0 }
+  /// in the animation's overall global time.
+  ///  - This time remapping is simple and only used `preCompLayer.timeStretch` and `preCompLayer.startTime`,
+  ///    so is a trivial function and is invertible. This allows us to invert the time remapping from
+  ///    "global time to local time" to instead be "local time to global time".
+  private(set) var simpleTimeRemapping: ((_ localTime: AnimationFrameTime) -> AnimationFrameTime) = { $0 }
+
+  /// A complex time remapping closure that remaps the given frame in the animation's overall global time
+  /// into the child layer's local time.
+  ///  - This time remapping is arbitrarily complex because it includes the full `preCompLayer.timeRemapping`.
+  ///  - Since it isn't possible to invert the time remapping function, this can only be applied by converting
+  ///    from global time to local time. This requires using `Keyframes.manuallyInterpolatedWithTimeRemapping`.
+  private(set) var complexTimeRemapping: ((_ globalTime: AnimationFrameTime) -> AnimationFrameTime) = { $0 }
+
+  /// Whether or not this layer is required to use the `complexTimeRemapping` via
+  /// the more expensive `Keyframes.manuallyInterpolatedWithTimeRemapping` codepath.
+  var mustUseComplexTimeRemapping = false
+
+  /// The duration of the animation
+  var animationDuration: AnimationFrameTime {
+    // Normal animation playback (like when looping) skips the last frame.
+    // However when the animation is paused, we need to be able to render the final frame.
+    // To allow this we have to extend the length of the animation by one frame.
+    let animationEndFrame: AnimationFrameTime
+    if timingConfiguration.speed == 0 {
+      animationEndFrame = animation.endFrame + 1
+    } else {
+      animationEndFrame = animation.endFrame
+    }
+
+    return Double(animationEndFrame - animation.startFrame) / animation.framerate
+  }
 
   /// Adds the given component string to the `AnimationKeypath` stored
   /// that describes the current path being configured by this context value
@@ -64,28 +93,63 @@ struct LayerAnimationContext {
   }
 
   /// The `AnimationProgressTime` for the given `AnimationFrameTime` within this layer,
-  /// accounting for the `timeRemapping` applied to this layer
-  func progressTime(for frame: AnimationFrameTime) -> AnimationProgressTime {
-    animation.progressTime(forFrame: timeRemapping(frame), clamped: false)
+  /// accounting for the `simpleTimeRemapping` applied to this layer.
+  func progressTime(for frame: AnimationFrameTime) throws -> AnimationProgressTime {
+    try compatibilityAssert(
+      !mustUseComplexTimeRemapping,
+      "LayerAnimationContext.time(forFrame:) does not support complex time remapping")
+
+    let animationFrameCount = animationDuration * animation.framerate
+    return (simpleTimeRemapping(frame) - animation.startFrame) / animationFrameCount
   }
 
   /// The real-time `TimeInterval` for the given `AnimationFrameTime` within this layer,
-  /// accounting for the `timeRemapping` applied to this layer
-  func time(for frame: AnimationFrameTime) -> TimeInterval {
-    animation.time(forFrame: timeRemapping(frame))
+  /// accounting for the `simpleTimeRemapping` applied to this layer.
+  func time(forFrame frame: AnimationFrameTime) throws -> TimeInterval {
+    try compatibilityAssert(
+      !mustUseComplexTimeRemapping,
+      "LayerAnimationContext.time(forFrame:) does not support complex time remapping")
+
+    return animation.time(forFrame: simpleTimeRemapping(frame))
   }
 
-  /// Chains an additional `timeRemapping` closure onto this layer context
-  func withTimeRemapping(
-    _ additionalTimeRemapping: @escaping (AnimationFrameTime) -> AnimationFrameTime)
+  /// Chains an additional time remapping closure onto the `simpleTimeRemapping` closure
+  func withSimpleTimeRemapping(
+    _ additionalSimpleTimeRemapping: @escaping (_ localTime: AnimationFrameTime) -> AnimationFrameTime)
     -> LayerAnimationContext
   {
     var copy = self
-    copy.timeRemapping = { [existingTimeRemapping = timeRemapping] time in
-      existingTimeRemapping(additionalTimeRemapping(time))
+    copy.simpleTimeRemapping = { [existingSimpleTimeRemapping = simpleTimeRemapping] time in
+      existingSimpleTimeRemapping(additionalSimpleTimeRemapping(time))
     }
     return copy
   }
+
+  /// Chains an additional time remapping closure onto the `complexTimeRemapping` closure.
+  ///  - If `required` is `true`, all subsequent child layers will be required to use the expensive
+  ///    `complexTimeRemapping` / `Keyframes.manuallyInterpolatedWithTimeRemapping` codepath.
+  ///  - `required: true` is necessary when this time remapping is not available via `simpleTimeRemapping`.
+  func withComplexTimeRemapping(
+    required: Bool,
+    _ additionalComplexTimeRemapping: @escaping (_ globalTime: AnimationFrameTime) -> AnimationFrameTime)
+    -> LayerAnimationContext
+  {
+    var copy = self
+    copy.mustUseComplexTimeRemapping = copy.mustUseComplexTimeRemapping || required
+    copy.complexTimeRemapping = { [existingComplexTimeRemapping = complexTimeRemapping] time in
+      additionalComplexTimeRemapping(existingComplexTimeRemapping(time))
+    }
+    return copy
+  }
+
+  /// Returns a copy of this context with time remapping removed
+  func withoutTimeRemapping() -> LayerAnimationContext {
+    var copy = self
+    copy.simpleTimeRemapping = { $0 }
+    copy.complexTimeRemapping = { $0 }
+    copy.mustUseComplexTimeRemapping = false
+    return copy
+  }
 }
 
 // MARK: - LoggingState

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

@@ -63,7 +63,7 @@ class BaseCompositionLayer: BaseAnimationLayer {
     if renderLayerContents {
       try contentsLayer.addOpacityAnimation(for: baseLayerModel.transform, context: transformContext)
 
-      contentsLayer.addVisibilityAnimation(
+      try contentsLayer.addVisibilityAnimation(
         inFrame: CGFloat(baseLayerModel.inFrame),
         outFrame: CGFloat(baseLayerModel.outFrame),
         context: context)

package/Sources/Private/CoreAnimation/Layers/CALayer+setupLayerHierarchy.swift

@@ -67,7 +67,7 @@ extension CALayer {
 
       // Create the `mask` layer for this layer, if it has a `MatteType`
       if
-        let mask = mask,
+        let mask,
         let maskLayer = try maskLayer(for: mask.model, type: mask.matteType, context: context)
       {
         let maskParentTransformLayer = makeParentTransformLayer(
@@ -138,7 +138,7 @@ extension CALayer {
 
 }
 
-extension Collection where Element == LayerModel {
+extension Collection<LayerModel> {
   /// Pairs each `LayerModel` within this array with
   /// a `LayerModel` to use as its mask, if applicable
   /// based on the layer's `MatteType` configuration.

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

@@ -65,7 +65,7 @@ extension ImageLayer: CustomLayoutLayer {
   func layout(superlayerBounds: CGRect) {
     anchorPoint = .zero
 
-    guard let imageAsset = imageAsset else {
+    guard let imageAsset else {
       bounds = superlayerBounds
       return
     }

package/Sources/Private/CoreAnimation/Layers/LayerModel+makeAnimationLayer.swift

@@ -1,8 +1,6 @@
 // Created by Cal Stephens on 12/20/21.
 // Copyright © 2021 Airbnb Inc. All rights reserved.
 
-import QuartzCore
-
 // MARK: - LayerContext
 
 /// Context available when constructing an `AnimationLayer`
@@ -53,11 +51,7 @@ extension LayerModel {
     case (.null, _):
       return TransformLayer(layerModel: self)
 
-    default:
-      try context.logCompatibilityIssue("""
-        Unexpected layer type combination ("\(type)" and "\(Swift.type(of: self))")
-        """)
-
+    case (.unknown, _), (.precomp, _), (.solid, _), (.image, _), (.shape, _), (.text, _):
       return nil
     }
   }

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

@@ -27,12 +27,13 @@ final class PreCompLayer: BaseCompositionLayer {
     }
 
     preCompLayer = typedLayer.preCompLayer
-    timeRemappingInterpolator = typedLayer.timeRemappingInterpolator
     super.init(layer: typedLayer)
   }
 
   // MARK: Internal
 
+  let preCompLayer: PreCompLayerModel
+
   /// Post-init setup for `PreCompLayer`s.
   /// Should always be called after `PreCompLayer.init(preCompLayer:)`.
   ///
@@ -51,12 +52,6 @@ final class PreCompLayer: BaseCompositionLayer {
   ///  - `PreCompLayer.init(preCompLayer:context:)`
   ///
   func setup(context: LayerContext) throws {
-    if let timeRemappingKeyframes = preCompLayer.timeRemapping {
-      timeRemappingInterpolator = try .timeRemapping(keyframes: timeRemappingKeyframes, context: context)
-    } else {
-      timeRemappingInterpolator = nil
-    }
-
     try setupLayerHierarchy(
       for: context.animation.assetLibrary?.precompAssets[preCompLayer.referenceID]?.layers ?? [],
       context: context)
@@ -67,24 +62,28 @@ final class PreCompLayer: BaseCompositionLayer {
     context = context.addingKeypathComponent(preCompLayer.name)
     try setupLayerAnimations(context: context)
 
-    // Precomp layers can adjust the local time of their child layers (relative to the
-    // animation's global time) via `timeRemapping` or a custom `startTime` / `timeStretch`
-    let contextForChildren = context.withTimeRemapping { [preCompLayer, timeRemappingInterpolator] layerLocalFrame in
-      if let timeRemappingInterpolator = timeRemappingInterpolator {
-        return timeRemappingInterpolator.value(frame: layerLocalFrame) as? AnimationFrameTime ?? layerLocalFrame
-      } else {
-        return (layerLocalFrame * AnimationFrameTime(preCompLayer.timeStretch)) + AnimationFrameTime(preCompLayer.startTime)
+    let timeRemappingInterpolator = preCompLayer.timeRemapping.flatMap { KeyframeInterpolator(keyframes: $0.keyframes) }
+
+    let contextForChildren = context
+      // `timeStretch` and `startTime` are a simple linear function so can be inverted from a
+      // "global time to local time" function into the simpler "local time to global time".
+      .withSimpleTimeRemapping { [preCompLayer] layerLocalFrame in
+        (layerLocalFrame * AnimationFrameTime(preCompLayer.timeStretch)) + AnimationFrameTime(preCompLayer.startTime)
+      }
+      // `timeRemappingInterpolator` is arbitrarily complex and cannot be inverted,
+      // so can only be applied via `complexTimeRemapping` from global time to local time.
+      .withComplexTimeRemapping(required: preCompLayer.timeRemapping != nil) { [preCompLayer] globalTime in
+        if let timeRemappingInterpolator {
+          let remappedLocalTime = timeRemappingInterpolator.value(frame: globalTime) as! LottieVector1D
+          return remappedLocalTime.cgFloatValue * context.animation.framerate
+        } else {
+          return (globalTime - preCompLayer.startTime) / preCompLayer.timeStretch
+        }
       }
-    }
 
     try setupChildAnimations(context: contextForChildren)
   }
 
-  // MARK: Private
-
-  private let preCompLayer: PreCompLayerModel
-  private var timeRemappingInterpolator: KeyframeInterpolator<AnimationFrameTime>?
-
 }
 
 // MARK: CustomLayoutLayer
@@ -104,36 +103,3 @@ extension PreCompLayer: CustomLayoutLayer {
     contentsLayer.masksToBounds = true
   }
 }
-
-extension KeyframeInterpolator where ValueType == AnimationFrameTime {
-  /// A `KeyframeInterpolator` for the given `timeRemapping` keyframes
-  static func timeRemapping(
-    keyframes timeRemappingKeyframes: KeyframeGroup<LottieVector1D>,
-    context: LayerContext)
-    throws -> KeyframeInterpolator<AnimationFrameTime>
-  {
-    try context.logCompatibilityIssue("""
-      The Core Animation rendering engine partially supports time remapping keyframes,
-      but this is somewhat experimental and has some known issues. Since it doesn't work
-      in all cases, we have to fall back to using the main thread engine when using
-      `RenderingEngineOption.automatic`.
-      """)
-
-    // `timeRemapping` is a mapping from the animation's global time to the layer's local time.
-    // In the Core Animation engine, we need to perform the opposite calculation -- convert
-    // the layer's local time into the animation's global time. We can get this by inverting
-    // the time remapping, swapping the x axis (global time) and the y axis (local time).
-    let localTimeToGlobalTimeMapping = timeRemappingKeyframes.keyframes.map { keyframe in
-      Keyframe(
-        value: keyframe.time,
-        time: keyframe.value.cgFloatValue * CGFloat(context.animation.framerate),
-        isHold: keyframe.isHold,
-        inTangent: keyframe.inTangent,
-        outTangent: keyframe.outTangent,
-        spatialInTangent: keyframe.spatialInTangent,
-        spatialOutTangent: keyframe.spatialOutTangent)
-    }
-
-    return KeyframeInterpolator(keyframes: .init(localTimeToGlobalTimeMapping))
-  }
-}

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

@@ -67,7 +67,7 @@ final class ShapeItemLayer: BaseAnimationLayer {
   override func setupAnimations(context: LayerAnimationContext) throws {
     try super.setupAnimations(context: context)
 
-    guard let sublayerConfiguration = sublayerConfiguration else { return }
+    guard let sublayerConfiguration else { return }
 
     switch sublayerConfiguration.fill {
     case .solidFill(let shapeLayer):
@@ -299,7 +299,7 @@ final class ShapeItemLayer: BaseAnimationLayer {
 
 // MARK: - [ShapeItem] helpers
 
-extension Array where Element == ShapeItemLayer.Item {
+extension [ShapeItemLayer.Item] {
   /// The first `ShapeItem` in this array of the given type
   func first<ItemType: ShapeItem>(
     _: ItemType.Type,