Skip to content

Fixes #21 — Infinite rotate animation around Z axis does not loop as expected on iOS#25

Merged
janicduplessis merged 2 commits intomainfrom
eq/fix-loop
Apr 5, 2026
Merged

Fixes #21 — Infinite rotate animation around Z axis does not loop as expected on iOS#25
janicduplessis merged 2 commits intomainfrom
eq/fix-loop

Conversation

@EQuimper
Copy link
Copy Markdown
Member

@EQuimper EQuimper commented Apr 1, 2026

Fix: #21

Root cause: On iOS, initial transform animations were composed into a single CATransform3D matrix and animated via the
transform key path. When animating rotate: 0 → 360, both the initial and target matrices are mathematically identical
(cos(2π) = cos(0)), so CATransform3DEqualToTransform returned YES and the animation was silently skipped. Android was not
affected since it already animates per-property using ObjectAnimator.

Fix: Refactored the iOS first-mount code path to animate each transform sub-property individually using Core Animation key
paths (transform.rotation.z, transform.scale.x, transform.translation.x, etc.) instead of interpolating the full composed
matrix. This lets Core Animation interpolate raw angle values correctly, enabling seamless infinite rotation loops.

Changes

  • ios/EaseView.mm — Replace matrix equality check with raw prop value comparisons; animate transform sub-properties via
    individual key paths on first mount
  • src/tests/EaseView.test.tsx — Add tests for rotate 0→360 loop and combined rotate+scale loop props
  • example/src/demos/SpinDemo.tsx — New demo: infinite Z-axis rotation (loop: 'repeat') and rotation+scale (loop:
    'reverse')
  • example/src/demos/index.ts — Register SpinDemo in the Loop section
Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-04-01.at.19.03.31.mov

@EQuimper EQuimper requested a review from janicduplessis April 2, 2026 14:05
EQuimper added 2 commits April 4, 2026 02:51
On iOS, initial transform animations were composed into a single
CATransform3D matrix and animated via the "transform" key path.
This caused rotate 0→360 with loop to silently fail because both
matrices are mathematically identical (cos(2π) = cos(0)).

Switch the first-mount code path to animate each changed sub-property
individually using key paths like transform.rotation.z, transform.scale.x,
etc. This lets Core Animation interpolate raw angle values correctly,
enabling seamless infinite rotation loops.

Closes #21
Adds SpinDemo with two examples:
- Infinite Z-axis rotation with loop: 'repeat'
- Rotation + scale with loop: 'reverse'
@janicduplessis janicduplessis merged commit f406ad9 into main Apr 5, 2026
4 checks passed
@janicduplessis janicduplessis deleted the eq/fix-loop branch April 5, 2026 08:23
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.

Infinite rotate animation around Z axis does not loop as expected

2 participants