Interactive Effects

Enhance user experience with hover, press, shake, and ripple effects that provide visual and tactile feedback.

Overview

The SiticoneToggleSwitch includes interactive effects such as hover animations, press effects, ripples, and shake feedback. These effects help make the toggle switch feel more responsive, modern, and engaging.

---

1. Hover & Press Animations

1.1 Hover Effect

The control supports hover animations to visually indicate user interaction.

Property	Type	Description
EnableHoverAnimation	bool	Enables/disables hover effect.
HoverProgress	float	Determines the intensity of the hover effect.

Usage Example

myToggleSwitch.EnableHoverAnimation = true;

---

1.2 Press Animation

The press effect provides visual feedback when the toggle switch is clicked or tapped.

Property	Type	Description
EnablePressAnimation	bool	Enables/disables press effect.
PressedProgress	float	Controls the size reduction of the thumb during press.

Usage Example

myToggleSwitch.EnablePressAnimation = true;

---

2. Ripple Effect 🌊

The SiticoneToggleSwitch includes a ripple effect that expands outward when the switch is toggled.

Property	Type	Description
EnableRippleEffect	bool	Enables/disables the ripple effect.
RippleColor	Color	Defines the color of the ripple animation.
RippleExpansionRate	float	Controls how fast the ripple expands.
RippleOpacityDecay	float	Controls how fast the ripple fades out.

Usage Example

myToggleSwitch.EnableRippleEffect = true;
myToggleSwitch.RippleColor = Color.LightBlue;

---

3. Shake Effect 🚨

The shake animation provides feedback when an action is restricted (e.g., a readonly toggle).

Property	Type	Description
CanShake	bool	Enables/disables the shake effect.
ShakeDuration	int	Duration of the shake animation (in ms).
ShakeIntensity	int	Controls how far the control moves during shaking.

Usage Example

myToggleSwitch.CanShake = true;

---

4. When to Use These Features? ✅

Feature	Use Case
Hover Animation	Provide visual feedback when the mouse hovers over the toggle.
Press Animation	Improve user interaction by simulating a press effect.
Ripple Effect	Indicate a toggle action with an expanding visual cue.
Shake Effect	Alert users when an action is restricted.

---

5. Common Pitfalls & Design Considerations 🛑

Pitfall	Cause	Solution
Ripple effect not visible	EnableRippleEffect = false	Set EnableRippleEffect = true.
Shake effect not working	CanShake = false	Enable CanShake = true and ensure conditions trigger it.
Press effect does not show	EnablePressAnimation = false	Enable EnablePressAnimation = true.
Hover effect too subtle	HoverProgress is too low	Adjust HoverProgress for more visibility.

---

6. Points Learned 🎯

Point	Description
Interactive effects make the control feel modern and responsive.	Enhances user experience and improves UI feedback.
Shake animation provides useful restrictions feedback.	Alerts users when toggling is restricted.
Hover and press effects improve usability and accessibility.	Helps users understand interactions more intuitively.
Ripple effects enhance touch and mouse interactions.	Makes toggling visually engaging.

---

7. Review Checklist ✔️

Item	Check
Is the hover effect enabled?	✅
Is press animation smooth and responsive?	✅
Are ripples visible when toggling?	✅
Does shake feedback trigger when necessary?	✅

---

8. Key Takeaways

Key Takeaway	Description
Interactive effects enhance user experience.	They make the toggle switch more engaging and visually responsive.
Ripple effect provides clear toggle feedback.	Users can see the toggle action with an expanding ripple.
Shake animation prevents invalid actions.	Useful for readonly or restricted toggles.
Press and hover effects improve UI intuitiveness.	Users understand interactions better through visual changes.

---

9. Summary 📌

9.1 Feature Summary

Feature	Type	Description
EnableHoverAnimation	bool	Enables hover effect.
EnablePressAnimation	bool	Enables press effect.
EnableRippleEffect	bool	Enables ripple effect.
RippleColor	Color	Defines ripple color.
CanShake	bool	Enables shake effect.

9.2 Key Benefits

Benefit	Description
Boosts user engagement with smooth animations.	Helps users easily understand interactions.
Improves UI feedback and accessibility.	Makes it easier to see and interact with the toggle.
Helps restrict invalid actions with shake effect.	Prevents unauthorized toggling.
Provides a modern look & feel with interactive elements.	Keeps the UI visually appealing.