Abnormal CPU Usage and Severe Main Thread Stutter on First Call to display() in CoreAnimationLayer

[Mervin1024]

Environment:

Lottie-ios 4.4.1,
Xcode 16.3,
Swift 5,
tested on iPhone devices running iOS 16.3 and iOS 18.4.

Issue Description

After upgrading lottie-ios from version 2.5.3 to 4.4.1, a severe main thread stutter occurs during the first call to play() on LottieAnimationView. The animation runs smoothly in version 2.5.3 with no stuttering. However, in 4.4.1, initializing the view and calling play() triggers a prolonged freeze (lasting several seconds) on the main thread. Once the freeze ends, the animation plays normally.

Steps to Reproduce

1. Initialize a LottieAnimationView with the attached JSON.
2. Call play().
3. Observe significant CPU spikes and main thread blockage during the first frame rendering.

Attachments

player-audioReplay-vertical.json

[Mervin1024]

I created a new demo project and integrated the latest version of lottie-ios (4.5.1), but the stuttering issue persists.
If the animation JSON file needs optimization, what are the optimization directions? Our animation JSON is provided by the design department. How should I put forward requirements to them?

[calda]

Have you tried using the Main Thread rendering engine for this animation?

The two rendering engines have different performance characteristics:

• The Core Animation engine has better animation playback performance, but worse initialization performance.
• The Main Thread engine has better initialization performance, but worse animation playback performance.

[Mervin1024]

I did not set the rendering engine during initialization and used the default value. I will test the performance under both engines next Monday.

[Mervin1024]

I tried using the Main Thread rendering engine for this animation. which resulted in no lag during initialization but the frame rate stabilized around 25 fps during animation playback, an unacceptable trade-off. The Core Animation Engine, on the other hand, had a longer initialization lag (1040ms) but offered smooth playback without affecting frame rate.

Using Time Profiler, I found that the most time-consuming methods were swift_getAssociatedTypeWitness and swift_getAssociatedConformanceWitness , both called within Bezierpath.addvertex(:) -> splitCurve(toVertex: CurveVertex, position: CGFloat). These appear to be Swift runtime methods handling generic protocol associated types.

    /// Cutting by amount gives incorrect length....
    /// One option is to cut by a stride until it gets close then edge it down.
    /// Measuring a percentage of the spans does not equal the same as measuring a percentage of length.
    /// This is where the historical trim path bugs come from.
    let a = point.interpolate(to: outTangent, amount: position)
    let b = outTangent.interpolate(to: toVertex.inTangent, amount: position)
    let c = toVertex.inTangent.interpolate(to: toVertex.point, amount: position)
    let d = a.interpolate(to: b, amount: position)
    let e = b.interpolate(to: c, amount: position)
    let f = d.interpolate(to: e, amount: position)

Changing these method calls to static methods significantly reduced the lag. (1040ms -> 560ms)

    /// Cutting by amount gives incorrect length....
    /// One option is to cut by a stride until it gets close then edge it down.
    /// Measuring a percentage of the spans does not equal the same as measuring a percentage of length.
    /// This is where the historical trim path bugs come from.
    func interpolateCGPoint(from: CGPoint, to: CGPoint, amount: CGFloat) -> CGPoint {
       func interpolateCGFloat(from: CGFloat, to: CGFloat, amount: CGFloat) -> CGFloat {
           from + ((to - from) * CGFloat(amount))
       }
    
       return CGPoint(
         x: interpolateCGFloat(from:from.x, to: to.x, amount: amount),
         y: interpolateCGFloat(from:from.y, to: to.y, amount: amount))
    }
    
   let a = interpolateCGPoint(from: point, to: outTangent, amount: position)
   let b = interpolateCGPoint(from: outTangent, to: toVertex.inTangent, amount: position)
   let c = interpolateCGPoint(from: toVertex.inTangent, to: toVertex.point, amount: position)
   let d = interpolateCGPoint(from: a, to: b, amount: position)
   let e = interpolateCGPoint(from: b, to: c, amount: position)
   let f = interpolateCGPoint(from: d, to: e, amount: position)

Can I pre-process this calculation in a background thread beforehand? Or how should I inform the design department colleagues to optimize this animation file?