Share My Creation [B4J] ImageMorph - "Metamorphosis" Transition

morph.gif

Description: A Custom View that creates an organic "whirlpool" metamorphosis between two images. It uses easing and elastic bounce to achieve a natural, non-linear feel.

Use Cases:
  • Dynamic Status Icons: Perfect for animating a "Lock" turning into an "Unlock" icon, or a "Play" button morphing into "Pause".
  • Interactive Logos: Switch between a monochrome and a full-color version of your brand logo.
  • Modern Onboarding: Use it to transition between steps in a tutorial, making the app feel high-end and polished.
  • State Indicators: Smoothly swap a "Cloud Sync" icon to a "Checkmark" when a process finishes.

Technical Requirements:
  • Images: Use transparent PNGs. The effect works best when the images have no background, allowing the dynamic color to shine through.
  • Dynamic Background: The view automatically animates the background color to match the target state.
How to use:
  1. Add the ImageMorph class to your project.
  2. Add a CustomView in the Designer and set its type to ImageMorph.
  3. Call SetImages with your PNGs and colors:
B4X:
' Setup transparent PNGs and dynamic background colors
ImageMorph1.SetImages(bmpStart, bmpEnd, xui.Color_White, xui.Color_RGB(30, 144, 255))

' Start infinite loop with 1 second delay
ImageMorph1.StartAutoMorph(1000)

Note: If you are testing in B4J, make sure to use Release mode to see the true smoothness of the animation.
 

Attachments

  • imageMorph.zip
    219.9 KB · Views: 4
Top