skia-flowmotion

Delphi RAD Studio Skia Flowmotion - Animated Image gallery/grid component alpha v0.57

Skia-FlowMotion

Animated Image Flow Gallery – Delphi FMX + Skia4Delphi (Google's Skia)
Skia4Delphi

Sample video:
(https://www.youtube.com/watch?v=JWn37m4JwYM)

Started as a simple port of my D7 VCL Flowmotion component...which was "let only show a few pictures of search results somehow" at begin
From zero to this beast in ~3 months (with pauses):
0 → VCL → FMX/Skia4Delphi

3 days later: Fully ported to Skia/FMX + extreme improvements (rotation with handle, particles on click, perspective-correct shadows, holographic animated background, tech brackets...).

No big deal to port old code when delphi & Skia4delphi is involved 😉
Should had tried it earlier, its so much fun with skia4delphi... TRY it, is easier than u think to port d7 canvas to skia4delphi!

Features at a glance (v0.57)

• Pinterest-like masonry layout
• Animated appearance (slide-in, “falling” effects, breathing)
• HotTrack & HotZoom hover effects
• Dragging selected
• Animated clear into any direction or to position
• Paging with falling animation
• ActivationZone move selected to defined areas and trigger event
• Free rotation with corner handle
• Particle explosions on click
• Realistic drop shadows (dynamic scaling based on zoom/breath)
• ZoomSelectedToFull, RotateAllBy, PutAllToAngle and more functions
• Holographic background effect (triple layer sine-wave refraction)
• RealMatrix background effect (using live data of items)
• NeuralLink background effect (connections between each with same infotxt)
• InfoPanel with animated slide-in on selected pic from any direction with different styles
• HoverAlive – gentle micro-hovering (floating around center)
• Wall Sliding physics (respect screen edges)
• AliveHighlighter - An organic, physics-based entity that orbits target
• Collision avoidance – images dynamically move out of the way
• Full live editor in demo (colors, sizes, toggles)

...and many more...

Try it!

Grab the repo, run the sample, and watch the magic.
Feedback, stars or ideas very welcome – happy to discuss code or add features!

Tip: You can play memory on it now. Enable infopanel on some, unselect, and try recognize which all it was :D

Current Development Status & Platform

Alpha – everything from the old VCL version is implemented now, still a lot to do, but getting usable slowly 😄
Lots bugs for sure crawling around everywhere, but hey its just few days old... but already impressive nice looking...

Especially all draggable is still making problems with some things,
but normal is getting very stable now – even with SelectedDraggable and not zoom to center.
Physics are running almost perfectly fine already.

Right now everything is being built and tested only on Windows (Delphi 11/12, FMX + Skia4Delphi).
I have no idea yet how well (or if at all) it already runs on Android, iOS, macOS or Linux – simply because I haven't tried it there.

This is my first real longer project in the newer Delphi versions (after years mostly in D7/2009), so I'm taking it step by step:

1. Get it first on Windows 100 % stable, smooth and fun
2. Then look at other platforms, learn the quirks, fix what breaks

If someone wants to try it on another OS right now and finds issues (or even gets it running) – feel free!
If you know where it breaks and why, or even send a PR/fix – that would be awesome and super helpful :)

No pressure though – Windows is the main focus for now.

Zipped sample exe (small enough for upload)

If you want to tip me a coffee.. :)

Latest Changes

v 0.57

• Fixed AliveHighlighter not wanted leave anymore when moodswings forbidden
  (understandable that he not likes it)
• Added TriggerHotZoomItem (Hotzooms up only one imageitem)
• Fixed Info Panel hide gesture direction
  (now correctly swipes opposite to panel position)
• Fixed TriggerHotZoomWave not working when nothing else was animating
  cause of our idle-skip optimization

v 0.56

• Added propertys: AliveHighlighterAllowMoodSwings, AliveHighlighterRageColor
• Added TriggerHotZoomWave -> Wave Propagation Logic to HotZoom physics Introduced FWaveActive, FWaveRadius, and FWaveWidth states. The animation loop calculates distance from a dynamic wave center to modulate FHotZoomTarget for individual items in real-time.
• Some small bugfixes and improvements/fine tuning

v 0.55

• AliveHighlighter now respects all screen edges
• New AliveHighlighter TAliveStyle: asSnake, asEnergyBeam, asFirefly
• New properties: AliveHighlighterColor, AliveHighlighterShadowColor, AliveHighlighterGlowAmount, AliveHighlighterBlur, AliveHighlighterOffset
• AliveHighlighter AI upgrade: gets sometimes grumpy when mouse too close – bites, tries to smash glass or runs away…
  mostly cool tho… don't push him too far :D
• Improved NeuralLinks rendering

v 0.54

• Implemented Idle-Skip Physics (CPU+GPU optimization).
  The animation loop now intelligently skips heavy math if the UI is static (no animations, background, hoveralive),
  reducing idle CPU+GPU usage to zero.
• Optimized text caching to prevent redundant re-rasterization every animation cycle.
• Optimized Matrix Data String generation and Particle Drawing.
• Added new animated background: beNeuralLinks
• Automatically draws connection lines between items that share
  the same InfoText
• Animated Lines: Connections are recalculated in real-time,
  allowing them to follow images during layout changes,
  zooming, and dragging.
• Color Coding: Connections are color-coded based on the
  group name (InfoText). Same text = Same Color.
• Added new ImageEntryStyle: iesReplicatorLaser.
  "Replicator/Laser Printer" effect where the image is scanned into existence.
  Note: Currently working but still annoys me really heavy with some eeeeevil bug.
• Added new AliveHighlighter (uSkiaAliveHighlighter.pas).
  An organic, physics-based entity that navigates obstacles and orbits targets naturally.

v 0.53

• New SetExternalStreamImage -> Pipeline for override selected img, show video snapshot or whatever
• Added Texture Caching for UI Text.
  Text overlays (Captions, Info Panels) are now baked to high-resolution surfaces.
  This decouples text layout from the animation loop, completely removing visual jitter
  during zoom and breath effects.

v 0.52

• Added new propertys: TargetFPS, MitchellQuality, InfoIndicatorOnlyOnHover
• Pagechange animated clear re-added/must be nonthreaded here for now
• Excluded threadpriority for non Windows platforms, thanks to Mauro :)
• Improved: Smartnavigation

v 0.51 – Day 14

• some small bugfixes/improvements and fine tuning
• switched to 60fps now and with 80 pagesize still nice but way smoother

v 0.50 – Day 13

• Fixed wrong max zoom after clear and load new pics (that beast...was hard to catch)
• Freefloat is now a property
• Major Engine Optimization: Implemented Snapshot Caching.
• Images are pre-scaled to grid size, eliminating 99% of redundant resize operations per frame.
• Backgrounds are now pre-scaled on Window Resize.
• Massive performance improvement: Renders now 110 images same time visible moving still fine here, before around 80.
• Enabled "Mitchell" (High-Quality) scaling for images

v 0.49 – Day 12 -stopping dailys now before i fall from my chair :D

• Some fine tuning and small bugfixes
• Improved thread stability in draw function
• Added adaptive frame skipping to prevent UI freezing under heavy load or on toy pcs.
• Added new unit -> uSkFlowButtons - creates panel of definable animated buttons,
  compiles but not working fully so far
• Added property: ShowInfoIndicatoralways

v 0.48 – Day 11

• Added Skia v7.01 binaries (libSkia.dll) to sample folder.
• Important: Updated from godknows how much older version yesterday.
• (Discovered i need it this morning via "runtime error shock" on my little dual-core Zenbook UX305CA, yes it runs still on that one too)
• switched to MIT license, sounds cooler :D
• Started some code refactoring across multiple functions
• Moved background effects into new unit -> uSkFlowEffects
• Added property ItemBorderColor
• Fixed av at threaded clear, using a local reference to FImages list

v 0.47 – Day 10

• Fixed Infoindicator showing again before panel outside
• Fixed sometimes selected getting directly back to gridposition and not animate to it when clickng like mad around and select others :D
• Fixed sometimes item from fullscreen animating back in line getting a moment invisible
• Added property HoverAliveOnFullscreen en/disables HoverAlive for selected only at fullscreen
• Implemented basic videoplayer inside of selected image (not working, but starting already, threadhopping works :D)
• Implemented base for smartnavigation (GetSpatialCandidate -> TSmartImageAction = (siaSelectNorth, siaSelectSouth, siaSelectWest, siaSelectEast) not finished
• Added property AlwaysShowInfo
• Added property DeleteClicked -> if active clicked pic gets destroyed

v 0.46 – Day 9

• Added new TBackgroundEffect -> beHolographic, beRealMatrix
• beRealMatrix using live data of items (smallpics too but instable atm, commented out)
• New propertys -> MatrixFont, MatrixColor, MatrixHeadColor, MatrixSpeed, MatrixFontSize
• Fixed: Hoveralive not stops anymore at fullscreen
• some fine tuning, small bugfixes, code cleaning, remove var corpses...
• Improved InfoIndicator: stops breathing on mouseover
• Added propertys -> InfoIndicatorHotColor, ShowInfoOnMiddleClick
• Added OnFullscreenEnter event.
  Fires when the selected image animation finishes (is fully zoomed).
  Requires synchronization with Main Thread for UI safety.
• Added Swipe Gesture support for InfoPanel when SelectedMovable false or fullscreen
  Mouse Swipe (Left/Right/Up/Down) opens/closes the info panel depending on TInfoPanelDirection.

v 0.45 – Day 8

• Added HoverAlive feature (Micro-Hovering).
  Images now gently float around their center position with customizable range and speed.
• Aded propertys -> HoverAliveRange, HoverAlive, HoverAliveSpeed
• Added new TInfoPanelDirection: ipdAuto, ipdTop, ipdBottom, ipdLeft, ipdRight
• Fixed: InfoPanelWidthPercent now working
• Added new InfoIndicator -> propertys FInfoIndicatorColor, FShowInfoIndicator
  shows arrows when info text in imageitem and on click show infos
• Added new TFullscreenAngle: fsa0, fsa90, fsa180, fsa270
• Improved shadow rendering: breathing selected now raises shadow more than hotzoomed
• Improved RotateDot: stops breathing on mouseover + larger clickable area
• Improved smallpic & rotatedot positioning with roundedges + smallpicmargin
• Added property RotateHandleSize
• New: Set OwnerForm Quality to HighPerformance by default
• Improved wall sliding physics – now calculates with rotation (commented out for now, more TODO)
• Split DrawFluidInfo into separate functions for easier extension: DrawFluidInfo_BlurEdge, DrawFluidInfo_Static
• Fixed: Info text now supports new line at '|'
• Added new TInfoAnimationStyle: iasTransparent (transparency tied to zoom factor)
• Added new properties: HotZoomMaxFactor, EnableParticlesOnMouseClick

v 0.44 – Day 7

• Implemented Imageitem TargetAlpha for smooth fade alpha.
• Animated Clear method now runs in our physics thread + alpha fade-out.
• Fixed shadow perspective alignment for small rotated images too now.
• Fixed Z-order layering issues during un-zooming(from fullzoomed) and hot-tracking.
• Fixed live UI updates for SetCaption, SetHint, and SetSmallPicIndex.
• Added BreathRotationEnabled for subtle breathing rotation effects.
• Added Imageitem - FInfoText
• Added propertys FInfoFont, FInfoTextColor
• Added new ShowInfoPanel -> overlays more infos txt, animated slidein and look
• Added property FInfoPanelWidthPercent
• Changed - MidMousebtn now shows/Hides infopanel and on rotatebtn reset angle
• Added TInfoAnimationStyle = (iasBlurEdge, iasStatic)

v 0.43 – Day 6

• skFLM now automatically resizes large images
• Added MaxInternalPicSize property (default 720px)
• Implemented real-time collision avoidance
  Images now dynamically move out of the way when the selected is dragged across the screen
  This creates a natural, magnetic interaction effect when KeepSpaceforZoomed is combined with SelectedMovable
• We disable breathing/hotzoom if we are currently dragging the image
  This prevents the "Jitter/Flicker" effect caused by size changes while moving
• Implemented dynamic shadow scaling based on zoom/breath state
• Wall Sliding: Hotzoom and breathing effects now respect screen edges. Images smoothly slide against borders.
• lots fine tuning and bugfixes

v 0.42 – Day 5

• Fixed some mem leaks at clear and showpage
• Added SurfaceEffects -> sueGlow, sueAmbient
• Added function RotateAllBy
• Added function ZoomSelectedToFull

v 0.41 – Day 5

• FKeepSpaceforZoomed now working
  Layout keeps space free under centered Selected pic
• added onSmallpicclicked
• added techbracketwidth property

v 0.4 – Day 4

• added propertys RotateDotColor, FRotateDotHotColor, FRotateDotDownColor
• added property ShowSmallPicOnlyOnHover
• fixed Glowwidth, Hotwidth
• added internal TargetRotation
• added putalltoAngle function

v 0.3 – Day 3

• Added property smallpicmargin, effects rotatedot too
• middleclick on rotate now resets rotation
• rotate dot now changes color onmousedown
• added ResetAllRotations
• lot small improvements and bugfixes

v 0.2 – Day 2

• Caption & Smallimg working now
• Fixed last missing functions from vcl version
• Added TSurfaceEffect - sueNone, sueShadow
• Added property RoundEdges
• Added TPictureBorderType - btTech, btFull
• Added propertys AlphaStatic, AlphaHotPhase, AlphaHotSelected

v 0.1 – Day 1

• Ported basic VCL Flowmotion functionality to Skia.

• Added basic particle effects on click.

• Added corner dot for rotating images.

• Added basic glitch effect while rotating.

• Added Shadow effect under selected image.

• Added HotTrack TechBrackets.

• Implemented "Holographic" Background Effect: Draws the background image three times (Normal + 2 Ghost layers). Layers are offset by Sine waves (WaveX, WaveY) to simulate liquid refraction or a heat haze over the entire picture.

• fixed shadow perspective when rotated

• improved pos calculation of rotatecircle for mousedown

• added lots more of functions from vcl version

  ---

Tip: Nice smooth radio stream without commercials, listening it all the time just:
60 North Radio

Requirements

Delphi 11+ or 12 (RAD Studio)
Skia4Delphi installed and enabled

VCL Version: https://github.com/LaMitaOne/Flowmotion