Fix support for customizing color of SolidLayer using ColorValueProvi…

…der (airbnb#2154)

Example/Example/AnimationPreviewView.swift

@@ -50,6 +50,7 @@ struct AnimationPreviewView: View {
         LoadingIndicator()
           .frame(width: 50, height: 50)
       }
+      .configuration(LottieConfiguration(renderingEngine: renderingEngine))
       .imageProvider(.exampleAppSampleImages)
       .resizable()
       .reloadAnimationTrigger(currentURLIndex, showPlaceholder: false)

Sources/Private/CoreAnimation/Layers/SolidLayer.swift

@@ -30,16 +30,31 @@ final class SolidLayer: BaseCompositionLayer {
     super.init(layer: typedLayer)
   }
 
+  // MARK: Internal
+
+  override func setupAnimations(context: LayerAnimationContext) throws {
+    try super.setupAnimations(context: context)
+
+    // Even though the Lottie json schema provides a fixed `solidLayer.colorHex` value,
+    // we still need to create a set of keyframes and go through the standard `CAAnimation`
+    // codepath so that this value can be customized using the custom `ValueProvider`s API.
+    try shapeLayer.addAnimation(
+      for: .fillColor,
+      keyframes: KeyframeGroup(solidLayer.colorHex.cgColor),
+      value: { $0 },
+      context: context)
+  }
+
   // MARK: Private
 
   private let solidLayer: SolidLayerModel
 
+  /// Render the fill color in a child `CAShapeLayer`
+  ///  - Using a `CAShapeLayer` specifically, instead of a `CALayer` with a `backgroundColor`,
+  ///    allows the size of the fill shape to be different from `contentsLayer.size`.
+  private let shapeLayer = CAShapeLayer()
+
   private func setupContentLayer() {
-    // Render the fill color in a child `CAShapeLayer`
-    //  - Using a `CAShapeLayer` specifically, instead of a `CALayer` with a `backgroundColor`,
-    //    allows the size of the fill shape to be different from `contentsLayer.size`.
-    let shapeLayer = CAShapeLayer()
-    shapeLayer.fillColor = solidLayer.colorHex.cgColor
     shapeLayer.path = CGPath(rect: .init(x: 0, y: 0, width: solidLayer.width, height: solidLayer.height), transform: nil)
     addSublayer(shapeLayer)
   }

Tests/Samples/Issues/issue_2150.json

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 1.1.0","a":"","k":"","d":"","tc":""},"fr":60,"ip":0,"op":85,"w":512,"h":512,"nm":"Arrow_Up Black","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 1","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":256,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":51,"s":[-98]},{"t":83,"s":[256]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":85,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":1,"nm":"Dark Gray Solid 4","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2},"a":{"a":0,"k":[256,256,0],"ix":1},"s":{"a":0,"k":[2135,2135,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[257,260.172],[262.587,254.586],[264.001,256],[256,264],[247.999,255.999],[249.413,254.585],[255,260.172],[255,248],[257,248]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"sw":512,"sh":512,"sc":"#111111","ip":0,"op":85,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":3,"nm":"Null 1","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"s":true,"x":{"a":0,"k":256,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":40,"s":[256]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":72,"s":[604]},{"t":83,"s":[684]}],"ix":4}},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":85,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":1,"nm":"Dark Gray Solid 5","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2},"a":{"a":0,"k":[256,256,0],"ix":1},"s":{"a":0,"k":[2135,2135,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[257,260.172],[262.587,254.586],[264.001,256],[256,264],[247.999,255.999],[249.413,254.585],[255,260.172],[255,248],[257,248]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"sw":512,"sh":512,"sc":"#111111","ip":0,"op":85,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Pre-comp_Arrow","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":180,"ix":10},"p":{"a":0,"k":[256,256,0],"ix":2},"a":{"a":0,"k":[256,256,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[512,75],[0,75],[0,437],[512,437]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"w":512,"h":512,"ip":0,"op":85,"st":0,"bm":0}],"markers":[]}

Tests/SnapshotConfiguration.swift

@@ -95,6 +95,10 @@ extension SnapshotConfiguration {
       AnimationKeypath(keypath: "**.Stroke 1.**.Color"): ColorValueProvider(.red),
     ]),
 
+    "Issues/issue_2150": .customValueProviders([
+      AnimationKeypath(keypath: "**.Color"): ColorValueProvider(.red),
+    ]),
+
     // Test cases for `AnimatedImageProvider`
     "Nonanimating/_dog": .customImageProvider(HardcodedImageProvider(imageName: "Samples/Images/dog.png")),
 

Tests/SnapshotTests.swift

@@ -124,7 +124,7 @@ class SnapshotTests: XCTestCase {
           matching: animationView,
           as: .imageOfPresentationLayer(
             precision: SnapshotConfiguration.forSample(named: sampleAnimationName).precision,
-            perceptualPrecision: 0.985),
+            perceptualPrecision: 0.98),
           named: "\(sampleAnimationName) (\(Int(percent * 100))%)",
           testName: testName)
       }

Tests/__Snapshots__/AutomaticEngineTests/testAutomaticEngineDetection.Issues-issue_2150.txt

@@ -0,0 +1 @@
+Supports Core Animation engine