Skip to content

perf: cap animated polylines at 30 fps - #108

Merged
lodev09 merged 3 commits into
mainfrom
eric/route-animation-30fps
Nov 9, 2026
Merged

lodev09 merged 3 commits into
mainfrom
eric/route-animation-30fps

Conversation

@erickreutz

Copy link
Copy Markdown
Member

Animated polylines redrew the route on every display frame. On iOS the animator's CADisplayLink had no frame-rate limit, so on ProMotion iPhones, in apps that set CADisableMinimumFrameDurationOnPhone, it rebuilt the path and gradient spans up to 120 times a second. Each rebuild makes the Google map render a frame. On an iPhone Air, in a Release build of a test app that animates a route the way Lugg's consumer app does (1250 ms, easeInOut, trailLength 1, two-color gradient), the animated route alone used half a core:

Route on the quote screen App CPU Render server CPU
Static 4.5% 2.3%
Animated, before 49.7% 37.6%
Animated, capped at 60 fps 38.2% 37.1%
Animated, capped at 30 fps 24.8% 34.1%

Every animator now redraws at most 30 times a second:

  • iOS (Google and Apple providers): the display link asks for 30 fps through preferredFrameRateRange, and progress advances by the real time between ticks. CADisplayLink.duration stays the display's refresh interval when the link runs slower than the display, so stepping by it would have slowed the animation. The step is clamped to 0.1 s and resets on pause and resume, so a stall or a drag doesn't jump the trail.
  • Android: the existing update throttle in PolylineAnimator (60 fps, added for CONSUMER-APP-44Y) drops to 30 fps. Progress was already time-based through ValueAnimator.
  • Web: the requestAnimationFrame loop skips redraws closer than 32 ms apart. Progress was already time-based.

The animation's timing and the animatedOptions API don't change, only how often the line redraws. On iOS the cap is kPolylineAnimationFrameRate in PolylineAnimatorBase.h. The measurements are iOS only; Android and web weren't measured on hardware, and the change there lines them up with iOS.

@vercel

vercel Bot commented Nov 9, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
lugg-maps Ready Ready Preview Nov 9, 2026 8:12pm UTC

Request Review

@lodev09

lodev09 commented Nov 9, 2026

Copy link
Copy Markdown
Member

Fixed a web throttle edge case: the cycle could reset on a skipped redraw, leaving a short trail frozen before the endpoint during the loop delay. The throttle now runs before the cycle reset.

  • Added regression coverage at 60, 90, 120, and 144 Hz; confirms the endpoint, loop restart, and redraw interval.
  • Verified in Chrome with real Google Maps: five loops reached the endpoint before each delay and resumed correctly.
  • Merged latest main, including the web example startup fixes from fix(example): restore Expo web startup #109.

All 12 tests and typecheck pass. No native builds or device tests run.

@lodev09
lodev09 merged commit e69bd8a into main Nov 9, 2026
5 checks passed
@lodev09
lodev09 deleted the eric/route-animation-30fps branch November 9, 2026 20:13

This branch was successfully deployed

1 active deployment
Preview — 8a20c347 Deployed Nov 9, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants