Skip to content

feat(layers): spin and flip layer animations - #909

Merged
hm21 merged 2 commits into
stablefrom
feat/layer-spin-flip-animations
Oct 29, 2026
Merged

hm21 merged 2 commits into
stablefrom
feat/layer-spin-flip-animations

Conversation

@hm21

@hm21 hm21 commented Oct 29, 2026 •

Copy link
Copy Markdown
Owner

Description

Problem. Enter and leave animations offered fade, slide, scale, wiggle and bounce, and loops offered wiggle, hop and pulse. Spinning and flipping, among the most common title and sticker animations in short-video editors, were missing (divinevideo/divine-mobile#10397).

Change.

  • LayerAnimationType.spin turns a layer around its center by LayerAnimation.turns full turns, clockwise for a positive value. It turns into place on enter and away on leave in the same direction, so both read as one clockwise motion rather than a turn and its rewind.
  • LayerAnimationType.flip turns a layer around its vertical or horizontal axis (FlipAxis, on LayerAnimation.flipAxis) by turns. A layer is flat, so the turn shows as a squeeze across that axis: to nothing at a quarter turn and to a mirror image at half a turn. A quarter turn in starts edge-on and turns the layer to face the viewer.
  • In a loop both keep turning, by turns every cycle, instead of swinging out and back like the other types. The curve eases each cycle from start to end, so a linear spin turns at an even pace without stopping. LayerAnimationProgress.turn carries the angle. The cycles already done are reduced by whole turns before the current cycle is added, so a long video keeps its precision and any turns value joins up seamlessly.
  • LayerTimelineVisibility applies the flip inside the rotation: it squeezes the image as laid out, the layer's own rotation included, and keyframes, a wiggle and a spin then turn the squeezed layer. Why this order: pro_video_editor's Android (Media3) and Darwin (Core Graphics) renderers both scale an overlay along its own axes before they turn it, and the exported image of a layer is already turned by its rotation. Squeezing along the screen's axes after the turn would need a shear that neither renderer can express, so this is the order the export can reproduce exactly.
  • Mirrors pro_video_editor 2.48.0 (feat: spin and flip layer animations, release 2.48.0 pro_video_editor#267), which renders the same types natively.

Not changed. The existing types and how they render. The new enum values are appended; a switch over LayerAnimationType has to handle them.

CHANGELOG 14.22.0.

Tests.

  • layer_animation_test: turns and flipAxis round-trip through toMap/fromMap, an unknown axis name is dropped, and copyWith, equality and the enum values cover the new fields.
  • layer_animation_progress_test: a spin turns from -turns to 0 entering and from 0 to turns leaving; a quarter-turn loop picks up where the last cycle stopped and drops whole turns; an eased flip loop; other types do not turn.
  • layer_timeline_visibility_test: a spin turns clockwise, a flip mirrors and goes edge-on across the axis it turns around, and a flip squeezes the layer before a spin turns it (the reverse order gives a different box, so the test fails if the transforms are swapped).
  • flutter analyze is clean, and all 1280 tests pass.
  • Verified on Galaxy S26 in Divine's editor: preview and export.

Related Issue: Closes #none; requested in divinevideo/divine-mobile#10397.

Type of Change

  • ✨ New feature (non-breaking change which adds functionality)
  • 🛠️ Bug fix (non-breaking change which fixes an issue)
  • ❌ Breaking change (fix or feature that would cause existing functionality to change)
  • 🧹 Code refactor
  • ✅ Build configuration change
  • 📝 Documentation
  • 🗑️ Chore

Add LayerAnimationType.spin, which turns a layer around its center, and
LayerAnimationType.flip, which turns it around its vertical or horizontal
axis like a card (FlipAxis), both by LayerAnimation.turns full turns. In a
loop they keep turning by their turns every cycle instead of swinging back.

The preview squeezes a flipped layer as it is laid out, before keyframes,
a spin or a wiggle turn it, matching the export of pro_video_editor.
Pin that a flip without an axis turns around the vertical one, on its
way out, rewrap the LayerTimelineVisibility doc and shorten the 14.22.0
entry.
@hm21
hm21 marked this pull request as ready for review October 29, 2026 09:06
@hm21
hm21 merged commit 38143df into stable Oct 29, 2026
3 checks passed
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.

1 participant