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.
- Add the ImageMorph class to your project.
- Add a CustomView in the Designer and set its type to ImageMorph.
- 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.