Repository navigation
feat(layers): spin and flip layer animations - #909
Merged
Merged
Conversation
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.
This was referenced Oct 29, 2026
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
marked this pull request as ready for review
October 29, 2026 09:06
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
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.
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.spinturns a layer around its center byLayerAnimation.turnsfull 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.flipturns a layer around its vertical or horizontal axis (FlipAxis, onLayerAnimation.flipAxis) byturns. 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.loopboth keep turning, byturnsevery 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.turncarries 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 anyturnsvalue joins up seamlessly.LayerTimelineVisibilityapplies 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.Not changed. The existing types and how they render. The new enum values are appended; a
switchoverLayerAnimationTypehas to handle them.CHANGELOG 14.22.0.
Tests.
layer_animation_test:turnsandflipAxisround-trip throughtoMap/fromMap, an unknown axis name is dropped, andcopyWith, equality and the enum values cover the new fields.layer_animation_progress_test: a spin turns from-turnsto0entering and from0toturnsleaving; 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 analyzeis clean, and all 1280 tests pass.Related Issue: Closes #none; requested in divinevideo/divine-mobile#10397.
Type of Change