> For the complete documentation index, see [llms.txt](https://docs-siticoneframework.gitbook.io/home/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-siticoneframework.gitbook.io/home/net-framework-or-net-core-ui/input-controls/siticone-togglebutton/animation-settings.md).

# Animation Settings

Controls how the SiticoneToggleButton visually transitions between its On and Off states, as well as parameters for shake and ripple animations.

## **Overview**

The **Animation Settings** feature allows you to tailor various transitions and feedback effects that occur when the toggle state changes. From **fade** and **slide** to more dynamic styles like **bounce** or **spin**, these animations help create a smooth, engaging user experience. Additionally, you can configure shake parameters (amplitude, frequency, duration) and the total animation duration for toggling.

***

### **Key API Members**

The following table outlines the main properties and event related to **Animation Settings**:

| **Property / Event**   | **Type**                      | **Description**                                                                                                      | **Example**                                            |
| ---------------------- | ----------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| **AnimationStyle**     | `ToggleAnimationStyle` (enum) | Defines the **visual style** of the toggle transition, e.g., `Fade`, `Slide`, `Flip`, `Zoom`, `Bounce`, `Spin`, etc. | `myToggle.AnimationStyle = ToggleAnimationStyle.Fade;` |
| **AnimationDuration**  | `int`                         | Specifies the total **time in milliseconds** for the On/Off toggle animation.                                        | `myToggle.AnimationDuration = 300;`                    |
| **ShakeDuration**      | `int`                         | The **length of time** (in ms) the button shakes for feedback (e.g., when read-only).                                | `myToggle.ShakeDuration = 500;`                        |
| **ShakeAmplitude**     | `float`                       | Determines **how far** the button moves left/right during the shake.                                                 | `myToggle.ShakeAmplitude = 5f;`                        |
| **ShakeFrequency**     | `float`                       | Defines the **number of oscillations** per second during the shake effect.                                           | `myToggle.ShakeFrequency = 15f;`                       |
| **ShakeDampingFactor** | `float`                       | Controls **how quickly** the shake effect diminishes over its duration.                                              | `myToggle.ShakeDampingFactor = 2f;`                    |
| **RippleDuration**     | `int`                         | Sets the **length of time** (in ms) the ripple animation (if enabled) will last.                                     | `myToggle.RippleDuration = 600;`                       |
| **AnimationCompleted** | `event`                       | Fires after the toggle **animation finishes**, allowing you to run code immediately after a successful transition.   | `myToggle.AnimationCompleted += (s, e) => { ... };`    |

**Note:** `ToggleAnimationStyle` is an `enum` that includes various styles like `Fade`, `Slide`, `Zoom`, `Bounce`, `Spin`, and more.

***

### **Key Points to Note**

1. **AnimationStyle vs. AnimationDuration**
   * Changing `AnimationStyle` affects the **visual pattern** of how the toggle transitions.
   * `AnimationDuration` affects **how long** the transition takes to complete, regardless of the style chosen.
2. **Shake Parameters**
   * The button may trigger a shake (if `CanShake` is enabled and `IsReadonly = true`, or you invoke it in custom scenarios).
   * **Amplitude**, **Frequency**, and **DampingFactor** control the shake’s intensity and decay.
3. **Ripple Effect Timing**
   * If `EnableRippleEffect` is `true`, the control uses `RippleDuration` to determine how long the ripple expands and fades after a click.
4. **AnimationCompleted Event**
   * This event provides a convenient spot to update other UI elements or perform any logic that should happen **after** the transition is done.
5. **Read-Only Feedback**
   * If the user attempts to toggle the button when it’s **read-only**, the shake animation parameters (`ShakeDuration`, `ShakeAmplitude`, etc.) can provide immediate feedback (along with an optional beep if `CanBeep` is enabled).

***

### **Usage Example**

#### **Configuring Animation in Code**

```csharp
// Assume you have a SiticoneToggleButton named myToggle

// Set a bounce effect style and 250 ms duration for the toggle transition
myToggle.AnimationStyle = SiticoneToggleButton.ToggleAnimationStyle.Bounce;
myToggle.AnimationDuration = 250;

// Configure shake parameters (for read-only or error feedback scenarios)
myToggle.ShakeDuration = 400;
myToggle.ShakeAmplitude = 6f;
myToggle.ShakeFrequency = 12f;
myToggle.ShakeDampingFactor = 2.5f;

// Optionally, customize the ripple duration if using EnableRippleEffect
myToggle.RippleDuration = 700;

// Hook the AnimationCompleted event
myToggle.AnimationCompleted += (s, e) =>
{
    // Perform some action after the toggle animation completes
    Console.WriteLine("Toggle animation finished!");
};
```

> **Tip:** The actual feel of each animation style can vary significantly based on `AnimationDuration`. Lower values create snappier transitions; higher values offer a more pronounced, detailed effect.

***

### **Best Practices to Create Beautiful UI and Apps**

| **Practice**                                                            | **Reason**                                                                                              |
| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| Match `AnimationStyle` to the **overall tone** of your app.             | A gentle fade may fit a clean, professional UI; a bouncy or spin effect might suit a more playful vibe. |
| Keep `AnimationDuration` **balanced** (100–300 ms).                     | Too short can feel abrupt; too long can frustrate users.                                                |
| Use **Shake** feedback sparingly.                                       | Reserve it for read-only or error states to emphasize unexpected user actions.                          |
| Combine **AnimationCompleted** with **StateChanged** for complex logic. | Allows you to separate “state changed” reactions from “animation finished” reactions.                   |
| Test accessibility and **performance**.                                 | Heavier animations or many toggles onscreen could affect lower-end systems and user accessibility.      |

***

### **Common Pitfalls and Design Considerations**

| **Pitfall**                                                       | **Mitigation / Recommendation**                                                                                          |
| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| Setting a **very long** `AnimationDuration` (e.g., >1 second).    | May make the UI feel unresponsive; keep transitions snappy for best user experience.                                     |
| Overusing **dramatic** animation styles in a conservative UI.     | Might clash visually with the rest of the design; ensure consistency with your branding and style guidelines.            |
| Not handling the **AnimationCompleted** event properly.           | If you need logic to run after a toggle completes, ensure you’re subscribed to this event rather than purely on `Click`. |
| Misconfiguring **shake** parameters (high frequency + amplitude). | Can produce an unnatural or jarring effect; tune them to achieve subtle feedback.                                        |

***

### **Review and Summary**

* **What You Learned**:\
  How to tweak the button’s toggle transitions (e.g., fade, slide, bounce), manage the duration of animations, and set up shake feedback parameters.
* **Why It’s Important**:\
  Animations can make toggles more intuitive and visually appealing, while providing feedback (like shakes) helps users understand restricted or invalid interactions.
* **How to Move Forward**:\
  Consider combining these animations with well-planned **Appearance & Text**, **Border**, and **Corner Radius** settings to craft polished, engaging toggles. Always balance aesthetics and user experience—too much animation may hinder performance or distract users.

By customizing the **Animation Settings**, you can inject personality and clarity into your toggle control, ensuring both a fun and functional experience for your users.