@octane-xplat/lottie 0.9.0 → 0.11.0

package/platforms/macos/src/vendor/Lottie/Private/CoreAnimation/Animations/DropShadowAnimation.swift

@@ -0,0 +1,179 @@
+// Created by Cal Stephens on 8/15/23.
+// Copyright © 2023 Airbnb Inc. All rights reserved.
+
+import QuartzCore
+
+// MARK: - DropShadowModel
+
+protocol DropShadowModel {
+  /// The opacity of the drop shadow, from 0 to 100.
+  var _opacity: KeyframeGroup<LottieVector1D>? { get }
+
+  /// The shadow radius of the blur
+  var _radius: KeyframeGroup<LottieVector1D>? { get }
+
+  /// The color of the drop shadow
+  var _color: KeyframeGroup<LottieColor>? { get }
+
+  /// The angle of the drop shadow, in degrees,
+  /// with "90" resulting in a shadow directly beneath the layer.
+  /// Combines with the `distance` to form the `shadowOffset`.
+  var _angle: KeyframeGroup<LottieVector1D>? { get }
+
+  /// The distance of the drop shadow offset.
+  /// Combines with the `angle` to form the `shadowOffset`.
+  var _distance: KeyframeGroup<LottieVector1D>? { get }
+}
+
+// MARK: - DropShadowStyle + DropShadowModel
+
+extension DropShadowStyle: DropShadowModel {
+  var _opacity: KeyframeGroup<LottieVector1D>? {
+    opacity
+  }
+
+  var _color: KeyframeGroup<LottieColor>? {
+    color
+  }
+
+  var _angle: KeyframeGroup<LottieVector1D>? {
+    angle
+  }
+
+  var _distance: KeyframeGroup<LottieVector1D>? {
+    distance
+  }
+
+  var _radius: KeyframeGroup<LottieVector1D>? {
+    size.map { sizeValue in
+      // After Effects shadow softness uses a different range of values than CALayer.shadowRadius,
+      // so shadows render too softly if we directly use the value from After Effects. We find that
+      // dividing this value from After Effects by 2 produces results that are visually similar.
+      LottieVector1D(sizeValue.cgFloatValue / 2)
+    }
+  }
+}
+
+// MARK: - DropShadowEffect + DropShadowModel
+
+extension DropShadowEffect: DropShadowModel {
+  var _color: KeyframeGroup<LottieColor>? {
+    color?.value
+  }
+
+  var _distance: KeyframeGroup<LottieVector1D>? {
+    distance?.value
+  }
+
+  var _radius: KeyframeGroup<LottieVector1D>? {
+    softness?.value?.map { softnessValue in
+      // After Effects shadow softness uses a different range of values than CALayer.shadowRadius,
+      // so shadows render too softly if we directly use the value from After Effects. We find that
+      // dividing this value from After Effects by 5 produces results that are visually similar.
+      LottieVector1D(softnessValue.cgFloatValue / 5)
+    }
+  }
+
+  var _opacity: KeyframeGroup<LottieVector1D>? {
+    opacity?.value?.map { originalOpacityValue in
+      // `DropShadowEffect.opacity` is a value between 0 and 255,
+      // but `DropShadowModel._opacity` expects a value between 0 and 100.
+      LottieVector1D((originalOpacityValue.value / 255.0) * 100)
+    }
+  }
+
+  var _angle: KeyframeGroup<LottieVector1D>? {
+    direction?.value?.map { originalAngleValue in
+      // `DropShadowEffect.distance` is rotated 90º from the
+      // angle value representation expected by `DropShadowModel._angle`
+      LottieVector1D(originalAngleValue.value - 90)
+    }
+  }
+}
+
+// MARK: - CALayer + DropShadowModel
+
+extension CALayer {
+
+  // MARK: Internal
+
+  /// Adds drop shadow animations from the given `DropShadowModel` to this layer
+  @nonobjc
+  func addDropShadowAnimations(
+    for dropShadowModel: DropShadowModel,
+    context: LayerAnimationContext
+  ) throws {
+    try addShadowOpacityAnimation(from: dropShadowModel, context: context)
+    try addShadowColorAnimation(from: dropShadowModel, context: context)
+    try addShadowRadiusAnimation(from: dropShadowModel, context: context)
+    try addShadowOffsetAnimation(from: dropShadowModel, context: context)
+  }
+
+  // MARK: Private
+
+  private func addShadowOpacityAnimation(from model: DropShadowModel, context: LayerAnimationContext) throws {
+    guard let opacityKeyframes = model._opacity else { return }
+
+    try addAnimation(
+      for: .shadowOpacity,
+      keyframes: opacityKeyframes,
+      value: {
+        // Lottie animation files express opacity as a numerical percentage value
+        // (e.g. 0%, 50%, 100%) so we divide by 100 to get the decimal values
+        // expected by Core Animation (e.g. 0.0, 0.5, 1.0).
+        $0.cgFloatValue / 100
+      },
+      context: context
+    )
+  }
+
+  private func addShadowColorAnimation(from model: DropShadowModel, context: LayerAnimationContext) throws {
+    guard let shadowColorKeyframes = model._color else { return }
+
+    try addAnimation(
+      for: .shadowColor,
+      keyframes: shadowColorKeyframes,
+      value: \.cgColorValue,
+      context: context
+    )
+  }
+
+  private func addShadowRadiusAnimation(from model: DropShadowModel, context: LayerAnimationContext) throws {
+    guard let shadowSizeKeyframes = model._radius else { return }
+
+    try addAnimation(
+      for: .shadowRadius,
+      keyframes: shadowSizeKeyframes,
+      value: \.cgFloatValue,
+      context: context
+    )
+  }
+
+  private func addShadowOffsetAnimation(from model: DropShadowModel, context: LayerAnimationContext) throws {
+    guard
+      let angleKeyframes = model._angle,
+      let distanceKeyframes = model._distance
+    else { return }
+
+    let offsetKeyframes = Keyframes.combined(angleKeyframes, distanceKeyframes) { angleDegrees, distance -> CGSize in
+      // Lottie animation files express rotation in degrees
+      // (e.g. 90º, 180º, 360º) so we convert to radians to get the
+      // values expected by Core Animation (e.g. π/2, π, 2π)
+      let angleRadians = (angleDegrees.cgFloatValue * .pi) / 180
+
+      // Lottie animation files express the `shadowOffset` as (angle, distance) pair,
+      // which we convert to the expected x / y offset values:
+      let offsetX = distance.cgFloatValue * cos(angleRadians)
+      let offsetY = distance.cgFloatValue * sin(angleRadians)
+      return CGSize(width: offsetX, height: offsetY)
+    }
+
+    try addAnimation(
+      for: .shadowOffset,
+      keyframes: offsetKeyframes,
+      value: { $0 },
+      context: context
+    )
+  }
+
+}

package/platforms/macos/src/vendor/Lottie/Private/CoreAnimation/Animations/EllipseAnimation.swift

@@ -0,0 +1,53 @@
+// Created by Cal Stephens on 12/21/21.
+// Copyright © 2021 Airbnb Inc. All rights reserved.
+
+import QuartzCore
+
+extension CAShapeLayer {
+  /// Adds animations for the given `Ellipse` to this `CALayer`
+  @nonobjc
+  func addAnimations(
+    for ellipse: Ellipse,
+    context: LayerAnimationContext,
+    pathMultiplier: PathMultiplier
+  ) throws {
+    try addAnimation(
+      for: .path,
+      keyframes: ellipse.combinedKeyframes(),
+      value: { keyframe in
+        BezierPath.ellipse(
+          size: keyframe.size.sizeValue,
+          center: keyframe.position.pointValue,
+          direction: ellipse.direction
+        )
+        .cgPath()
+        .duplicated(times: pathMultiplier)
+      },
+      context: context
+    )
+  }
+}
+
+extension Ellipse {
+  /// Data that represents how to render an ellipse at a specific point in time
+  struct Keyframe: Interpolatable {
+    let size: LottieVector3D
+    let position: LottieVector3D
+
+    func interpolate(to: Ellipse.Keyframe, amount: CGFloat) -> Ellipse.Keyframe {
+      Keyframe(
+        size: size.interpolate(to: to.size, amount: amount),
+        position: position.interpolate(to: to.position, amount: amount)
+      )
+    }
+  }
+
+  /// Creates a single array of animatable keyframes from the separate arrays of keyframes in this Ellipse
+  func combinedKeyframes() throws -> KeyframeGroup<Ellipse.Keyframe> {
+    Keyframes.combined(
+      size,
+      position,
+      makeCombinedResult: Ellipse.Keyframe.init
+    )
+  }
+}

package/platforms/macos/src/vendor/Lottie/Private/CoreAnimation/Animations/GradientAnimations.swift

@@ -0,0 +1,287 @@
+// Created by Cal Stephens on 1/7/22.
+// Copyright © 2022 Airbnb Inc. All rights reserved.
+
+import QuartzCore
+
+// MARK: - GradientShapeItem
+
+/// A `ShapeItem` that represents a gradient
+protocol GradientShapeItem: OpacityAnimationModel {
+  var startPoint: KeyframeGroup<LottieVector3D> { get }
+  var endPoint: KeyframeGroup<LottieVector3D> { get }
+  var gradientType: GradientType { get }
+  var numberOfColors: Int { get }
+  var colors: KeyframeGroup<[Double]> { get }
+}
+
+// MARK: - GradientFill + GradientShapeItem
+
+extension GradientFill: GradientShapeItem { }
+
+// MARK: - GradientStroke + GradientShapeItem
+
+extension GradientStroke: GradientShapeItem { }
+
+// MARK: - GradientRenderLayer + GradientShapeItem
+
+extension GradientRenderLayer {
+
+  // MARK: Internal
+
+  /// Adds gradient-related animations to this layer, from the given `GradientFill`
+  ///  - 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: try gradientColorsCount(
+          in: context,
+          gradient: gradient
+        )
+      )
+
+    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,
+      value: { colorComponents in
+        gradient.colorConfiguration(from: colorComponents, type: type).map { $0.color }
+      },
+      context: context
+    )
+
+    try addAnimation(
+      for: .locations,
+      keyframes: gradient.colors,
+      value: { colorComponents in
+        gradient.colorConfiguration(from: colorComponents, type: type).map { $0.location }
+      },
+      context: context
+    )
+
+    try addOpacityAnimation(for: gradient, context: context)
+
+    switch gradient.gradientType {
+    case .linear:
+      try addLinearGradientAnimations(for: gradient, context: context)
+    case .radial:
+      try addRadialGradientAnimations(for: gradient, context: context)
+    case .none:
+      break
+    }
+  }
+
+  // MARK: Private
+
+  private func addLinearGradientAnimations(
+    for gradient: GradientShapeItem,
+    context: LayerAnimationContext
+  ) throws {
+    type = .axial
+
+    try addAnimation(
+      for: .startPoint,
+      keyframes: gradient.startPoint,
+      value: { absoluteStartPoint in
+        percentBasedPointInBounds(from: absoluteStartPoint.pointValue)
+      },
+      context: context
+    )
+
+    try addAnimation(
+      for: .endPoint,
+      keyframes: gradient.endPoint,
+      value: { absoluteEndPoint in
+        percentBasedPointInBounds(from: absoluteEndPoint.pointValue)
+      },
+      context: context
+    )
+  }
+
+  private func addRadialGradientAnimations(for gradient: GradientShapeItem, context: LayerAnimationContext) throws {
+    type = .radial
+
+    let combinedKeyframes = Keyframes.combined(
+      gradient.startPoint,
+      gradient.endPoint,
+      makeCombinedResult: { absoluteStartPoint, absoluteEndPoint -> RadialGradientKeyframes in
+        // Convert the absolute start / end points to the relative structure used by Core Animation
+        let relativeStartPoint = percentBasedPointInBounds(from: absoluteStartPoint.pointValue)
+        let radius = absoluteStartPoint.pointValue.distanceTo(absoluteEndPoint.pointValue)
+        let relativeEndPoint = percentBasedPointInBounds(
+          from: CGPoint(
+            x: absoluteStartPoint.x + radius,
+            y: absoluteStartPoint.y + radius
+          )
+        )
+
+        return RadialGradientKeyframes(startPoint: relativeStartPoint, endPoint: relativeEndPoint)
+      }
+    )
+
+    try addAnimation(
+      for: .startPoint,
+      keyframes: combinedKeyframes,
+      value: \.startPoint,
+      context: context
+    )
+
+    try addAnimation(
+      for: .endPoint,
+      keyframes: combinedKeyframes,
+      value: \.endPoint,
+      context: context
+    )
+  }
+
+  /// Core Animation ignores the gradient animation when the number of provided colors
+  /// does not match the expected count. For example, if the `colors` array is initialized
+  /// from a JSON value containing 3 colors, but a value provider supplies only 2 colors,
+  /// the animation will be ignored. To avoid this, always ensure the `CAGradientLayer`
+  /// color count matches the input colors, whether defined in the JSON or supplied via
+  /// a value provider.
+  private func gradientColorsCount(
+    in context: LayerAnimationContext,
+    gradient: GradientShapeItem
+  ) throws -> Int {
+    let colorsProperty = LayerProperty<[CGColor]>.colors.customizableProperty
+
+    guard
+      let colorsProperty,
+      let customKeyframes = try context.valueProviderStore.customKeyframes(
+        of: colorsProperty,
+        for: AnimationKeypath(
+          keys: context.currentKeypath.keys + colorsProperty.name.map { $0.rawValue }
+        ),
+        context: context
+      )
+    else {
+      return gradient.numberOfColors
+    }
+
+    return customKeyframes.keyframes[0].value.count
+  }
+}
+
+// MARK: - RadialGradientKeyframes
+
+private struct RadialGradientKeyframes: Interpolatable {
+  let startPoint: CGPoint
+  let endPoint: CGPoint
+
+  func interpolate(to: RadialGradientKeyframes, amount: CGFloat) -> RadialGradientKeyframes {
+    RadialGradientKeyframes(
+      startPoint: startPoint.interpolate(to: to.startPoint, amount: amount),
+      endPoint: endPoint.interpolate(to: to.endPoint, amount: amount)
+    )
+  }
+}
+
+// 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],
+    type: GradientContentType
+  ) -> GradientColorConfiguration {
+    switch type {
+    case .rgb:
+      precondition(
+        colorComponents.count >= numberOfColors * 4,
+        "Each color must have RGB components and a location component"
+      )
+
+      // Each group of four `Double` values represents a single `CGColor`,
+      // and its relative location within the gradient.
+      var colors = GradientColorConfiguration()
+
+      for colorIndex in 0 ..< numberOfColors {
+        let colorStartIndex = colorIndex * 4
+
+        let colorLocation = CGFloat(colorComponents[colorStartIndex])
+
+        let color = CGColor.rgb(
+          CGFloat(colorComponents[colorStartIndex + 1]),
+          CGFloat(colorComponents[colorStartIndex + 2]),
+          CGFloat(colorComponents[colorStartIndex + 3])
+        )
+
+        colors.append((color: color, location: colorLocation))
+      }
+
+      return colors
+
+    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 alphaValues
+    }
+  }
+}