Add support for customizing stroke width values using FloatValueProvi…

…der (airbnb#2179)

Sources/Private/CoreAnimation/Animations/LayerProperty.swift

@@ -76,6 +76,7 @@ enum PropertyName: String, CaseIterable {
   case scale = "Scale"
   case position = "Position"
   case rotation = "Rotation"
+  case strokeWidth = "Stroke Width"
 }
 
 // MARK: CALayer properties
@@ -220,7 +221,7 @@ extension LayerProperty {
     .init(
       caLayerKeypath: #keyPath(CAShapeLayer.lineWidth),
       defaultValue: 1,
-      customizableProperty: nil /* currently unsupported */ )
+      customizableProperty: .floatValue(.strokeWidth))
   }
 
   static var lineDashPhase: LayerProperty<CGFloat> {
@@ -356,4 +357,13 @@ extension CustomizableProperty {
       name: [.position],
       conversion: { ($0 as? LottieVector3D)?.pointValue })
   }
+
+  static func floatValue(_ name: PropertyName...) -> CustomizableProperty<CGFloat> {
+    .init(
+      name: name,
+      conversion: { typeErasedValue in
+        guard let vector = typeErasedValue as? LottieVector1D else { return nil }
+        return vector.cgFloatValue
+      })
+  }
 }

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

@@ -48,7 +48,7 @@ final class GradientStrokeProperties: NodePropertyMap, KeypathSearchable {
       "Start Point" : startPoint,
       "End Point" : endPoint,
       "Colors" : colors,
-      "Stroke Width" : width,
+      PropertyName.strokeWidth.rawValue : width,
       "Dashes" : dashPattern,
       "Dash Phase" : dashPhase,
     ]

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

@@ -38,7 +38,7 @@ final class StrokeNodeProperties: NodePropertyMap, KeypathSearchable {
     keypathProperties = [
       PropertyName.opacity.rawValue : opacity,
       PropertyName.color.rawValue : color,
-      "Stroke Width" : width,
+      PropertyName.strokeWidth.rawValue : width,
       "Dashes" : dashPattern,
       "Dash Phase" : dashPhase,
     ]

Sources/Private/MainThread/NodeRenderSystem/Nodes/Text/TextAnimatorNode.swift

@@ -99,7 +99,7 @@ final class TextAnimatorNodeProperties: NodePropertyMap, KeypathSearchable {
 
     if let keyframeGroup = textAnimator.strokeWidth {
       strokeWidth = NodeProperty(provider: KeyframeInterpolator(keyframes: keyframeGroup.keyframes))
-      properties["Stroke Width"] = strokeWidth
+      properties[PropertyName.strokeWidth.rawValue] = strokeWidth
     } else {
       strokeWidth = nil
     }

Tests/Samples/Issues/issue_2094.json

@@ -0,0 +1 @@
+{"v":"5.7.1","fr":60,"ip":0,"op":110,"w":64,"h":64,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"outer circle","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[180]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":60,"s":[450]},{"t":110,"s":[540]}],"ix":10},"p":{"a":0,"k":[32,32,0],"ix":2},"a":{"a":0,"k":[-0.205,-0.041,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[40,40],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.666666666667,0.8,0.988235294118,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.205,-0.041],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[1]},{"t":50,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":60,"s":[0]},{"t":110,"s":[99]}],"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[-2]},{"t":110,"s":[2]}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"inner circle 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[180]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":60,"s":[450]},{"t":110,"s":[540]}],"ix":10},"p":{"a":0,"k":[32,32,0],"ix":2},"a":{"a":0,"k":[-7.528,-5.028,0],"ix":1},"s":{"a":0,"k":[-100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.333333333333,0.450980392157,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-7.528,-5.028],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[100]},{"t":50,"s":[1]}],"ix":1},"e":{"a":0,"k":0,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"t":50,"s":[-2]}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"inner circle 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[180]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":60,"s":[450]},{"t":110,"s":[540]}],"ix":10},"p":{"a":0,"k":[32,32,0],"ix":2},"a":{"a":0,"k":[-7.528,-5.028,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[16,16],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.333333333333,0.450980392157,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":8,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-7.528,-5.028],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":60,"s":[0]},{"t":110,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0}],"markers":[]}

Tests/SnapshotConfiguration.swift

@@ -105,6 +105,10 @@ extension SnapshotConfiguration {
       AnimationKeypath(keypath: "**.Color"): ColorValueProvider(.red),
     ]),
 
+    "Issues/issue_2094": .customValueProviders([
+      AnimationKeypath(keypath: "**.Stroke Width"): FloatValueProvider(2),
+    ]),
+
     // Test cases for `AnimatedImageProvider`
     //  - These snapshots are pretty large (2 MB) by default, so we limit their number and size.
     "Nonanimating/dog": .customImageProvider(HardcodedImageProvider(imageName: "Samples/Images/dog.png"))

Tests/__Snapshots__/AnimationKeypathTests/testCoreAnimationEngineKeypathLogging.Issues-issue_1664.txt

@@ -12,6 +12,7 @@ card_depth.base_color.card_depth.Fill 1.Color
 card_depth.base_color.card_depth.Fill 1.Opacity
 card_depth.base_color.card_depth.Stroke 1.Color
 card_depth.base_color.card_depth.Stroke 1.Opacity
+card_depth.base_color.card_depth.Stroke 1.Stroke Width
 card_depth.base_color.card_depth.Transform.Opacity
 card_depth.base_color.card_depth.Transform.Position
 card_depth.base_color.card_depth.Transform.Rotation
@@ -48,6 +49,7 @@ card_front.base_color.graph.Transform.Scale
 card_front.base_color.graph.Transform.Scale
 card_front.base_color.lines.Stroke 1.Color
 card_front.base_color.lines.Stroke 1.Opacity
+card_front.base_color.lines.Stroke 1.Stroke Width
 card_front.base_color.lines.Transform.Opacity
 card_front.base_color.lines.Transform.Position
 card_front.base_color.lines.Transform.Rotation
@@ -90,6 +92,7 @@ finger_L.accent_color.circle_fade.Transform.Scale
 finger_L.accent_color.circle_fade.Transform.Scale
 finger_L.accent_color.ring_fade.Stroke 1.Color
 finger_L.accent_color.ring_fade.Stroke 1.Opacity
+finger_L.accent_color.ring_fade.Stroke 1.Stroke Width
 finger_L.accent_color.ring_fade.Transform.Opacity
 finger_L.accent_color.ring_fade.Transform.Position
 finger_L.accent_color.ring_fade.Transform.Rotation
@@ -102,6 +105,7 @@ finger_L.base_color.Transform.Scale
 finger_L.base_color.Transform.Scale
 finger_L.base_color.ring.Stroke 1.Color
 finger_L.base_color.ring.Stroke 1.Opacity
+finger_L.base_color.ring.Stroke 1.Stroke Width
 finger_L.base_color.ring.Transform.Opacity
 finger_L.base_color.ring.Transform.Position
 finger_L.base_color.ring.Transform.Rotation
@@ -132,6 +136,7 @@ finger_R.accent_color.circle_fade.Transform.Scale
 finger_R.accent_color.circle_fade.Transform.Scale
 finger_R.accent_color.ring_fade.Stroke 1.Color
 finger_R.accent_color.ring_fade.Stroke 1.Opacity
+finger_R.accent_color.ring_fade.Stroke 1.Stroke Width
 finger_R.accent_color.ring_fade.Transform.Opacity
 finger_R.accent_color.ring_fade.Transform.Position
 finger_R.accent_color.ring_fade.Transform.Rotation
@@ -144,6 +149,7 @@ finger_R.base_color.Transform.Scale
 finger_R.base_color.Transform.Scale
 finger_R.base_color.ring.Stroke 1.Color
 finger_R.base_color.ring.Stroke 1.Opacity
+finger_R.base_color.ring.Stroke 1.Stroke Width
 finger_R.base_color.ring.Transform.Opacity
 finger_R.base_color.ring.Transform.Position
 finger_R.base_color.ring.Transform.Rotation

Tests/__Snapshots__/AnimationKeypathTests/testCoreAnimationEngineKeypathLogging.Switch.txt

@@ -1,5 +1,6 @@
 Checkmark Outlines 2.Group 1.Stroke 1.Color
 Checkmark Outlines 2.Group 1.Stroke 1.Opacity
+Checkmark Outlines 2.Group 1.Stroke 1.Stroke Width
 Checkmark Outlines 2.Group 1.Transform.Opacity
 Checkmark Outlines 2.Group 1.Transform.Position
 Checkmark Outlines 2.Group 1.Transform.Rotation
@@ -12,6 +13,7 @@ Checkmark Outlines 2.Transform.Scale
 Checkmark Outlines 2.Transform.Scale
 Checkmark Outlines.Group 1.Stroke 1.Color
 Checkmark Outlines.Group 1.Stroke 1.Opacity
+Checkmark Outlines.Group 1.Stroke 1.Stroke Width
 Checkmark Outlines.Group 1.Transform.Opacity
 Checkmark Outlines.Group 1.Transform.Position
 Checkmark Outlines.Group 1.Transform.Rotation
@@ -60,6 +62,7 @@ White BG Outlines.Transform.Scale
 White BG Outlines.Transform.Scale
 X Outlines.Group 1.Stroke 1.Color
 X Outlines.Group 1.Stroke 1.Opacity
+X Outlines.Group 1.Stroke 1.Stroke Width
 X Outlines.Group 1.Transform.Opacity
 X Outlines.Group 1.Transform.Position
 X Outlines.Group 1.Transform.Rotation

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

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