Add drop shadow support to main thread rendering engine (#2423)

Co-authored-by: Lan Xu <[email protected]>
Co-authored-by: Cal Stephens <[email protected]>

Lottie.xcodeproj/project.pbxproj

@@ -1151,6 +1151,14 @@
 		D453D8B228FF9EA900D3F49C /* DefaultAnimationCache.swift in Sources */ = {isa = PBXBuildFile; fileRef = D453D8B028FF9E3A00D3F49C /* DefaultAnimationCache.swift */; };
 		D453D8B328FF9EAA00D3F49C /* DefaultAnimationCache.swift in Sources */ = {isa = PBXBuildFile; fileRef = D453D8B028FF9E3A00D3F49C /* DefaultAnimationCache.swift */; };
 		D453D8B428FF9EAA00D3F49C /* DefaultAnimationCache.swift in Sources */ = {isa = PBXBuildFile; fileRef = D453D8B028FF9E3A00D3F49C /* DefaultAnimationCache.swift */; };
+		E95C386F2C14B7FC00329910 /* DropShadowNode.swift in Sources */ = {isa = PBXBuildFile; fileRef = E95C386E2C14B7FC00329910 /* DropShadowNode.swift */; };
+		E95C38712C14D14300329910 /* LayerEffectNode.swift in Sources */ = {isa = PBXBuildFile; fileRef = E95C38702C14D14300329910 /* LayerEffectNode.swift */; };
+		E95C38722C15559500329910 /* DropShadowNode.swift in Sources */ = {isa = PBXBuildFile; fileRef = E95C386E2C14B7FC00329910 /* DropShadowNode.swift */; };
+		E95C38732C15559600329910 /* DropShadowNode.swift in Sources */ = {isa = PBXBuildFile; fileRef = E95C386E2C14B7FC00329910 /* DropShadowNode.swift */; };
+		E95C38742C15559700329910 /* DropShadowNode.swift in Sources */ = {isa = PBXBuildFile; fileRef = E95C386E2C14B7FC00329910 /* DropShadowNode.swift */; };
+		E95C38752C15559D00329910 /* LayerEffectNode.swift in Sources */ = {isa = PBXBuildFile; fileRef = E95C38702C14D14300329910 /* LayerEffectNode.swift */; };
+		E95C38762C15559E00329910 /* LayerEffectNode.swift in Sources */ = {isa = PBXBuildFile; fileRef = E95C38702C14D14300329910 /* LayerEffectNode.swift */; };
+		E95C38772C15559F00329910 /* LayerEffectNode.swift in Sources */ = {isa = PBXBuildFile; fileRef = E95C38702C14D14300329910 /* LayerEffectNode.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -1476,6 +1484,8 @@
 		D453D8AA28FE6EE300D3F49C /* LottieAnimationCache.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LottieAnimationCache.swift; sourceTree = "<group>"; };
 		D453D8AE28FF9BC600D3F49C /* AnimationCacheProviderTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AnimationCacheProviderTests.swift; sourceTree = "<group>"; };
 		D453D8B028FF9E3A00D3F49C /* DefaultAnimationCache.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DefaultAnimationCache.swift; sourceTree = "<group>"; };
+		E95C386E2C14B7FC00329910 /* DropShadowNode.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropShadowNode.swift; sourceTree = "<group>"; };
+		E95C38702C14D14300329910 /* LayerEffectNode.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LayerEffectNode.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -1959,6 +1969,7 @@
 		2E9C95662822F43000677516 /* Nodes */ = {
 			isa = PBXGroup;
 			children = (
+				E95C386D2C14B7DC00329910 /* LayerEffectNodes */,
 				2E9C95672822F43000677516 /* ModifierNodes */,
 				2E9C95692822F43000677516 /* RenderContainers */,
 				2E9C956B2822F43000677516 /* OutputNodes */,
@@ -2446,6 +2457,15 @@
 			path = DotLottie;
 			sourceTree = "<group>";
 		};
+		E95C386D2C14B7DC00329910 /* LayerEffectNodes */ = {
+			isa = PBXGroup;
+			children = (
+				E95C386E2C14B7FC00329910 /* DropShadowNode.swift */,
+				E95C38702C14D14300329910 /* LayerEffectNode.swift */,
+			);
+			path = LayerEffectNodes;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXHeadersBuildPhase section */
@@ -2710,11 +2730,13 @@
 				080DEF6F2A95709700BE2D96 /* RenderingEngineOption.swift in Sources */,
 				080DEFB22A9570FE00BE2D96 /* ErasedContentProviding.swift in Sources */,
 				080DF0772A95717D00BE2D96 /* CompoundBezierPath.swift in Sources */,
+				E95C38742C15559700329910 /* DropShadowNode.swift in Sources */,
 				080DEF8E2A9570D500BE2D96 /* LottieColor.swift in Sources */,
 				080DF0162A95713800BE2D96 /* PathOutputNode.swift in Sources */,
 				080DF00A2A95713000BE2D96 /* InvertedMatteLayer.swift in Sources */,
 				080DEFCD2A95711400BE2D96 /* Archive.swift in Sources */,
 				080DEF912A9570DD00BE2D96 /* LRUAnimationCache.swift in Sources */,
+				E95C38772C15559F00329910 /* LayerEffectNode.swift in Sources */,
 				080DF05D2A95716A00BE2D96 /* ImageAsset.swift in Sources */,
 				080DF0722A95717D00BE2D96 /* UnitBezier.swift in Sources */,
 				080DF05E2A95716D00BE2D96 /* EffectValue.swift in Sources */,
@@ -3005,6 +3027,7 @@
 				2E9C96152822F43100677516 /* Transform.swift in Sources */,
 				2E9C97472822F43100677516 /* CGFloatExtensions.swift in Sources */,
 				2EAF5AC527A0798700E00531 /* UIColorExtension.swift in Sources */,
+				E95C386F2C14B7FC00329910 /* DropShadowNode.swift in Sources */,
 				2E9C967E2822F43100677516 /* GradientStrokeRenderer.swift in Sources */,
 				08E207182A56014E002DCE17 /* SwiftUIView.swift in Sources */,
 				2E9C96932822F43100677516 /* PolygonNode.swift in Sources */,
@@ -3186,6 +3209,7 @@
 				2E9C97652822F43100677516 /* CurveVertex.swift in Sources */,
 				0820D5C52A8BF60F007D705C /* EffectValue.swift in Sources */,
 				08C002042A46150D00AB54BA /* FileManager+ZIP.swift in Sources */,
+				E95C38712C14D14300329910 /* LayerEffectNode.swift in Sources */,
 				08E2072A2A56014E002DCE17 /* DidSelectProviding.swift in Sources */,
 				0820D5CD2A8BF6FF007D705C /* ColorEffectValue.swift in Sources */,
 				2E9C96482822F43100677516 /* NullCompositionLayer.swift in Sources */,
@@ -3318,6 +3342,7 @@
 				0887347028F0CBDE00458627 /* LottieAnimation.swift in Sources */,
 				2E9C97422822F43100677516 /* TestHelpers.swift in Sources */,
 				08EF21DD289C643B0097EA47 /* KeyframeInterpolator.swift in Sources */,
+				E95C38722C15559500329910 /* DropShadowNode.swift in Sources */,
 				2E9C96162822F43100677516 /* Transform.swift in Sources */,
 				2E9C97482822F43100677516 /* CGFloatExtensions.swift in Sources */,
 				0820D5942A8ACD67007D705C /* LottieButton.swift in Sources */,
@@ -3499,6 +3524,7 @@
 				2E9C96492822F43100677516 /* NullCompositionLayer.swift in Sources */,
 				2EAF5AFF27A0798700E00531 /* GradientValueProvider.swift in Sources */,
 				2E9C96BE2822F43100677516 /* AnyValueContainer.swift in Sources */,
+				E95C38752C15559D00329910 /* LayerEffectNode.swift in Sources */,
 				08E2072B2A56014E002DCE17 /* DidSelectProviding.swift in Sources */,
 				2E9C96612822F43100677516 /* LayerFontProvider.swift in Sources */,
 				6C7698442A38A71200E9BEF4 /* DotLottieConfiguration.swift in Sources */,
@@ -3605,6 +3631,7 @@
 				2E9C97492822F43100677516 /* CGFloatExtensions.swift in Sources */,
 				2EAF5AC727A0798700E00531 /* UIColorExtension.swift in Sources */,
 				2E9C96802822F43100677516 /* GradientStrokeRenderer.swift in Sources */,
+				E95C38732C15559600329910 /* DropShadowNode.swift in Sources */,
 				2E9C96952822F43100677516 /* PolygonNode.swift in Sources */,
 				08E2071A2A56014E002DCE17 /* SwiftUIView.swift in Sources */,
 				2E9C96E62822F43100677516 /* MaskCompositionLayer.swift in Sources */,
@@ -3786,6 +3813,7 @@
 				2E9C97672822F43100677516 /* CurveVertex.swift in Sources */,
 				0820D5C72A8BF60F007D705C /* EffectValue.swift in Sources */,
 				2E9C964A2822F43100677516 /* NullCompositionLayer.swift in Sources */,
+				E95C38762C15559E00329910 /* LayerEffectNode.swift in Sources */,
 				08E2072C2A56014E002DCE17 /* DidSelectProviding.swift in Sources */,
 				0820D5CF2A8BF6FF007D705C /* ColorEffectValue.swift in Sources */,
 				08C002ED2A46196300AB54BA /* Archive+Helpers.swift in Sources */,

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

@@ -36,6 +36,10 @@ class CompositionLayer: CALayer, KeypathSearchable {
       "bounds" : NSNull(),
       "anchorPoint" : NSNull(),
       "sublayerTransform" : NSNull(),
+      "shadowOpacity" : NSNull(),
+      "shadowOffset" : NSNull(),
+      "shadowColor" : NSNull(),
+      "shadowRadius" : NSNull(),
     ]
 
     contentsLayer.anchorPoint = .zero
@@ -55,6 +59,14 @@ class CompositionLayer: CALayer, KeypathSearchable {
       contentsLayer.mask = maskLayer
     }
 
+    // There are two different drop shadow schemas, either using `DropShadowEffect` or `DropShadowStyle`.
+    // If both happen to be present, prefer the `DropShadowEffect` (which is the drop shadow schema
+    // supported on other platforms).
+    let dropShadowEffect = layer.effects.first(where: { $0 is DropShadowEffect }) as? DropShadowModel
+    let dropShadowStyle = layer.styles.first(where: { $0 is DropShadowStyle }) as? DropShadowModel
+    if let dropShadowModel = dropShadowEffect ?? dropShadowStyle {
+      layerEffectNodes.append(DropShadowNode(model: dropShadowModel))
+    }
     name = layer.name
   }
 
@@ -72,6 +84,7 @@ class CompositionLayer: CALayer, KeypathSearchable {
     keypathName = layer.keypathName
     childKeypaths = [transformNode.transformProperties]
     maskLayer = nil
+    layerEffectNodes = layer.layerEffectNodes
     super.init(layer: layer)
   }
 
@@ -96,6 +109,8 @@ class CompositionLayer: CALayer, KeypathSearchable {
   let startFrame: CGFloat
   let timeStretch: CGFloat
 
+  var layerEffectNodes: [LayerEffectNode] = []
+
   // MARK: Keypath Searchable
 
   let keypathName: String
@@ -142,6 +157,10 @@ class CompositionLayer: CALayer, KeypathSearchable {
     contentsLayer.opacity = transformNode.opacity
     contentsLayer.isHidden = !layerVisible
     layerDelegate?.frameUpdated(frame: frame)
+
+    for layerEffectNode in layerEffectNodes {
+      layerEffectNode.updateWithFrame(layer: self, frame: frame)
+    }
   }
 
   func displayContentsWithFrame(frame _: CGFloat, forceUpdates _: Bool) {

Sources/Private/MainThread/NodeRenderSystem/Nodes/LayerEffectNodes/DropShadowNode.swift

@@ -0,0 +1,102 @@
+// Created by Lan Xu on 2024/6/7.
+// Copyright © 2024 Airbnb Inc. All rights reserved.
+
+import QuartzCore
+
+// MARK: - DropShadowNode
+
+final class DropShadowNode: LayerEffectNode {
+
+  // MARK: Lifecycle
+
+  init(model: DropShadowModel) {
+    properties = DropShadowNodeProperties(model: model)
+  }
+
+  // MARK: Internal
+
+  var properties: DropShadowNodeProperties
+
+  var propertyMap: any NodePropertyMap {
+    properties
+  }
+
+  func applyEffect(to layer: CALayer) {
+    if let opacity = properties.opacity?.value.cgFloatValue {
+      // 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).
+      layer.shadowOpacity = Float(opacity / 100)
+    }
+    if
+      let angleDegrees = properties.angle?.value.cgFloatValue,
+      let distance = properties.distance?.value.cgFloatValue
+    {
+      // 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 * .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 * cos(angleRadians)
+      let offsetY = distance * sin(angleRadians)
+      layer.shadowOffset = .init(width: offsetX, height: offsetY)
+    }
+    layer.shadowColor = properties.color?.value.cgColorValue
+    layer.shadowRadius = properties.radius?.value.cgFloatValue ?? 0
+  }
+
+}
+
+// MARK: - DropShadowNodeProperties
+
+final class DropShadowNodeProperties: NodePropertyMap {
+
+  // MARK: Lifecycle
+
+  init(model: DropShadowModel) {
+    if let opacityKeyframes = model._opacity?.keyframes {
+      opacity = NodeProperty(provider: KeyframeInterpolator(keyframes: opacityKeyframes))
+      propertyMap[PropertyName.opacity.rawValue] = opacity
+    } else {
+      opacity = nil
+    }
+    if let radiusKeyframes = model._radius?.keyframes {
+      radius = NodeProperty(provider: KeyframeInterpolator(keyframes: radiusKeyframes))
+      propertyMap["Radius"] = radius
+    } else {
+      radius = nil
+    }
+    if let colorKeyFrames = model._color?.keyframes {
+      color = NodeProperty(provider: KeyframeInterpolator(keyframes: colorKeyFrames))
+      propertyMap[PropertyName.color.rawValue] = color
+    } else {
+      color = nil
+    }
+    if let angleKeyFrames = model._angle?.keyframes {
+      angle = NodeProperty(provider: KeyframeInterpolator(keyframes: angleKeyFrames))
+      propertyMap["Angle"] = angle
+    } else {
+      angle = nil
+    }
+    if let distanceKeyFrame = model._distance?.keyframes {
+      distance = NodeProperty(provider: KeyframeInterpolator(keyframes: distanceKeyFrame))
+      propertyMap["Distance"] = distance
+    } else {
+      distance = nil
+    }
+    properties = Array(propertyMap.values)
+  }
+
+  // MARK: Internal
+
+  var propertyMap: [String: AnyNodeProperty] = [:]
+  var properties: [AnyNodeProperty]
+
+  let opacity: NodeProperty<LottieVector1D>?
+  let radius: NodeProperty<LottieVector1D>?
+  let color: NodeProperty<LottieColor>?
+  let angle: NodeProperty<LottieVector1D>?
+  let distance: NodeProperty<LottieVector1D>?
+}

Sources/Private/MainThread/NodeRenderSystem/Nodes/LayerEffectNodes/LayerEffectNode.swift

@@ -0,0 +1,24 @@
+// Created by Lan Xu on 2024/6/8.
+// Copyright © 2024 Airbnb Inc. All rights reserved.
+
+import QuartzCore
+
+// MARK: - LayerEffectNode
+
+protocol LayerEffectNode {
+  func applyEffect(to layer: CALayer)
+  var propertyMap: NodePropertyMap { get }
+}
+
+extension LayerEffectNode {
+
+  func updateWithFrame(layer: CALayer, frame: CGFloat) {
+    for property in propertyMap.properties {
+      if property.needsUpdate(frame: frame) {
+        property.update(frame: frame)
+      }
+    }
+    applyEffect(to: layer)
+  }
+
+}