This mini project showcases a captivating and interactive user interface element - a liquid effect action button with a holographic twist. Built using SwiftUI, the application employs CoreMotion to introduce a holographic effect to the UI as the user moves their device.
- Liquid Effect: The action button is surrounded by a fluid-like animation, giving it a mesmerizing and playful appearance.
- Holographic UI: The UI responds to the device's motion, creating a holographic effect that enhances the visual appeal and engagement.
| Liquid Action Button | Holographic effect |
|---|---|
-
The MotionManager class utilizes CoreMotion to track the device's orientation and motion.
-
The icons view displays a set of icons, such as credit card, key, and face ID symbols, which animate and blur as the action button expands.
-
The circle view generates connecting strokes between the icons, adding to the visual effect of the liquid animation.
-
The motion view produces the holographic effect using gradients and reflections that respond to the device's roll motion.
-
The canvas view utilizes SwiftUI's Canvas to draw circles around the icons, creating the illusion of liquid movement.
Interactivity is achieved by tapping the action button, triggering an animation that expands and reveals the icons, enhancing the liquid effect and holographic UI. The use of gradients, blurs, and animations brings depth and dimension to the interface.
- Clone the repository.
- Open the project in Xcode.
- Run the application on a physical device to experience the interactive liquid holographic action button.
This project demonstrates the creative possibilities of SwiftUI and CoreMotion, offering a unique and visually appealing interaction for users.