feat: Route the transform CSS transition to Core Animation on iOS#9692
Draft
MatiPl01 wants to merge 2 commits into
Draft
feat: Route the transform CSS transition to Core Animation on iOS#9692MatiPl01 wants to merge 2 commits into
MatiPl01 wants to merge 2 commits into
Conversation
Routes the transform CSS transition property to iOS Core Animation (rotate, scale, translate, skew, transform-origin), falling back to the C++ loop for cases CA cannot express (percent translates, perspective, steps/linear-stops easing). Transform preprocessing and per-transition state live in common C++; the platform layer receives a finished TransformAnimationPlan and only orchestrates Core Animation.
The reverse-add order matches the loop empirically (pinned down on device), not via a documented Core Animation contract; flag it for future maintainers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds native iOS Core Animation support for the
transformCSS transition property.transform(andtransform-origin) now animate on the render server through an additive Core Animation stack instead of the C++ loop, matching the loop's output. Cases Core Animation cannot express - percent translates, perspective, and steps / linear-stops easings - keep running on the loop.Builds on #9654 (platform-routed CSS transitions).
How it works
CSSPlatformTransitionProxy): endpoint resolution, the transform-origin bake, reverse-shortening, in-flight sampling and plan building.TransformAnimationPlanand only orchestrates Core Animation (animateTransformForTag:plan:). No view, layout or interpolator state crosses the boundary.transform-originis baked into the plan asTranslate(+offset) * M * Translate(-offset), mirroring RN'sBaseViewProps::resolveTransform.Testing
Verified on device (iPhone 16 Pro simulator) by running each transition on Core Animation (red) next to the loop (blue) and measuring per-frame box centroids: they track within a couple of pixels across rotate / scale / translate / skew, multi-op stacks,
transform-origincorner pivots and mid-flight reversal.Comparison recordings
CA (red) vs loop (blue) - rotate + scale about the top-left origin:
drag rf_min.mp4 here
Mid-flight reversal (reverse-shortening):
drag rfrev_min.mp4 here