Fix infinite loop when setting LottieAnimationView.viewportFrame (#2316)

Sources/Public/Animation/LottieAnimationView.swift

@@ -855,7 +855,6 @@ open class LottieAnimationView: LottieAnimationViewBase {
     var shouldForceUpdates = false
 
     if let viewportFrame {
-      setNeedsLayout()
       shouldForceUpdates = contentMode == .redraw
 
       let compAspect = viewportFrame.size.width / viewportFrame.size.height

Tests/Samples/Issues/issue_2310.json

@@ -0,0 +1 @@
+{"v":"5.6.8","fr":60,"ip":0,"op":70,"w":85,"h":85,"nm":"loader 2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 3 Outlines 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":[0]},{"t":70,"s":[360]}],"ix":10},"p":{"a":0,"k":[42.711,38.518,0],"ix":2},"a":{"a":0,"k":[20.133,28.209,0],"ix":1},"s":{"a":0,"k":[43.854,43.854,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1.054,2.5],[1.274,-0.538],[-0.537,-1.272],[0,-2.06],[3.363,-3.074],[3.521,0.315],[0.781,0.166],[0,0],[0.705,1.187],[1.186,-0.708],[0,0],[0.16,-0.65],[-0.351,-0.57],[0,0],[-0.84,0],[-0.409,0.252],[0.724,1.176],[0,0],[-0.778,-0.07],[-0.472,0],[-3.73,3.408],[0,5.514]],"o":[[-0.536,-1.272],[-1.273,0.536],[0.793,1.883],[0,4.114],[-3.089,2.823],[-1.025,-0.092],[0,0],[1.187,-0.705],[-0.705,-1.186],[0,0],[-0.575,0.341],[-0.16,0.65],[0,0],[0.472,0.768],[0.446,0],[1.175,-0.724],[0,0],[0.672,0.112],[0.468,0.042],[4.484,0],[4.397,-4.019],[0,-2.73]],"v":[[14.254,-17.014],[10.98,-18.347],[9.647,-15.073],[10.842,-9.131],[5.55,2.179],[-4.852,6.121],[-7.563,5.717],[-1.122,1.889],[-0.25,-1.537],[-3.677,-2.409],[-14.532,4.043],[-15.682,5.594],[-15.383,7.502],[-9.109,17.695],[-6.977,18.885],[-5.669,18.514],[-4.851,15.074],[-7.469,10.821],[-5.301,11.101],[-3.891,11.164],[8.923,5.87],[15.842,-9.131]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[24.173,37.283],"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":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.352,0.57],[0,0],[1.176,-0.724],[-0.724,-1.176],[0,0],[0.778,0.07],[4.122,-3.767],[0,-5.514],[-1.054,-2.498],[-0.975,0],[-0.317,0.134],[0.536,1.272],[0,2.062],[-3.363,3.074],[-3.522,-0.318],[-0.781,-0.166],[0,0],[-0.705,-1.187],[-0.853,0],[-0.4,0.238],[0,0],[-0.16,0.651]],"o":[[0,0],[-0.725,-1.175],[-1.176,0.723],[0,0],[-0.671,-0.112],[-4.911,-0.443],[-4.397,4.019],[0,2.733],[0.403,0.955],[0.325,0],[1.272,-0.537],[-0.793,-1.88],[0,-4.113],[3.088,-2.822],[1.025,0.092],[0,0],[-1.187,0.706],[0.467,0.786],[0.434,0],[0,0],[0.577,-0.342],[0.16,-0.65]],"v":[[15.383,-7.155],[9.109,-17.349],[5.669,-18.167],[4.85,-14.728],[7.467,-10.475],[5.299,-10.754],[-8.923,-5.523],[-15.842,9.478],[-14.253,17.362],[-11.949,18.891],[-10.979,18.694],[-9.646,15.419],[-10.842,9.478],[-5.549,-1.832],[4.852,-5.774],[7.562,-5.371],[1.122,-1.542],[0.249,1.885],[2.402,3.108],[3.676,2.756],[14.531,-3.696],[15.682,-5.247]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[16.091,19.141],"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":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":74,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[42.572,42.129,0],"ix":2},"a":{"a":0,"k":[25.143,31.47,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.005,0.112],[4.805,4.824],[9.72,-9.76],[0.959,-4.586],[-0.253,0.254],[-2.648,-2.658],[-0.329,-0.743],[-1.582,1.589],[-5.198,-5.218],[-0.066,-3.33],[-0.001,-0.101],[-0.003,-0.074],[-1.059,-1.068],[-2.267,2.265],[-0.071,1.389],[-0.001,0.08]],"o":[[-0.055,-6.323],[-9.721,-9.76],[-3.546,3.56],[0.204,-0.282],[2.647,-2.658],[0.607,0.61],[0.618,-2.007],[5.197,-5.218],[2.53,2.541],[-0.004,0.101],[0,0.075],[0.062,1.396],[2.256,2.276],[1.058,-1.059],[0.005,-0.079],[0.001,-0.111]],"v":[[24.618,10.279],[17.331,-7.174],[-17.87,-7.174],[-24.626,5.341],[-23.945,4.535],[-14.357,4.535],[-12.956,6.585],[-9.658,1.098],[9.163,1.098],[13.055,10.279],[13.049,10.583],[13.055,10.807],[14.734,14.65],[22.923,14.669],[24.617,10.852],[24.626,10.615]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[25.41,17.183],"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":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.215,-0.214],[2.642,2.664],[0.328,0.751],[1.557,-1.564],[5.197,5.218],[0.019,3.394],[0,0],[1.118,1.124],[2.261,-2.27],[0.014,-1.47],[0,0],[-4.831,-4.85],[0,0],[-4.709,4.727],[-0.999,4.454]],"o":[[-2.652,2.652],[-0.61,-0.614],[-0.624,1.971],[-5.198,5.218],[-2.579,-2.59],[0,0],[-0.012,-1.472],[-2.262,-2.27],[-1.117,1.122],[0,0],[0.03,6.356],[5.012,5.033],[0,0],[3.452,-3.467],[-0.18,0.235]],"v":[[23.998,-8.204],[14.411,-8.225],[13.007,-10.294],[9.739,-4.902],[-9.082,-4.902],[-12.978,-14.275],[-12.982,-14.275],[-14.676,-18.339],[-22.864,-18.339],[-24.559,-14.281],[-24.584,-14.281],[-17.294,3.273],[0.164,20.609],[17.907,3.273],[24.584,-8.88]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[24.834,42.082],"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":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":74,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Layer 5 Outlines","sr":1,"ks":{"o":{"a":0,"k":70,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[42.5,42.5,0],"ix":2},"a":{"a":0,"k":[42.75,42.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[4.419,0],[0,0],[0,4.418],[0,0],[-4.418,0],[0,0],[0,-4.418],[0,0]],"o":[[0,0],[-4.418,0],[0,0],[0,-4.418],[0,0],[4.419,0],[0,0],[0,4.418]],"v":[[34.5,42.5],[-34.5,42.5],[-42.5,34.5],[-42.5,-34.5],[-34.5,-42.5],[34.5,-42.5],[42.5,-34.5],[42.5,34.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[42.75,42.75],"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":"Group 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":74,"st":0,"bm":0}],"markers":[]}

Tests/SnapshotConfiguration.swift

@@ -46,6 +46,9 @@ struct SnapshotConfiguration {
 
   /// The maximum size to allow for the resulting snapshot image
   var maxSnapshotDimension: CGFloat = 500
+
+  /// A `viewportFrame` value to apply to the `LottieAnimationView`, which crops the animation
+  var customViewportFrame: CGRect?
 }
 
 // MARK: Custom mapping
@@ -200,6 +203,10 @@ extension SnapshotConfiguration {
     /// Animations which are very expensive to render using the Core Animation rendering engine,
     /// and should fall back to the Main Thread engine when using `RenderingEngineOption.automatic`.
     "Issues/pr_2286": .excludeCoreAnimationRenderingEngine,
+
+    // Other misc test cases
+    "Issues/issue_2310": .customViewportFrame(
+      CGRect(x: 0, y: 0, width: 85, height: 85).insetBy(dx: 10, dy: 10)),
   ]
 }
 
@@ -280,6 +287,13 @@ extension SnapshotConfiguration {
     return configuration
   }
 
+  /// A `SnapshotConfiguration` using the given custom `viewportFrame`
+  static func customViewportFrame(_ viewportFrame: CGRect) -> SnapshotConfiguration {
+    var configuration = SnapshotConfiguration.default
+    configuration.customViewportFrame = viewportFrame
+    return configuration
+  }
+
   /// A copy of this `SnapshotConfiguration` with `customProgressValuesToSnapshot` updated to `[0]`
   func nonanimating(_ isNonanimating: Bool = true) -> SnapshotConfiguration {
     var copy = self

Tests/SnapshotTests.swift

@@ -366,6 +366,10 @@ extension SnapshotConfiguration {
       animationView.fontProvider = customFontProvider
     }
 
+    if let customViewportFrame = snapshotConfiguration.customViewportFrame {
+      animationView.viewportFrame = customViewportFrame
+    }
+
     return animationView
   }
 }

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

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