creating-wpf-animations

WPF Animation Patterns

WPF animations create visual effects by changing property values over time.

Animation Components

Storyboard (container) ├── Timeline (time control) │ ├── Animation (value change) │ │ ├── DoubleAnimation │ │ ├── ColorAnimation │ │ └── ... │ └── AnimationUsingKeyFrames (keyframes) │ ├── DoubleAnimationUsingKeyFrames │ └── ... └── EasingFunction (acceleration/deceleration)

Basic Animation (XAML)

2.1 DoubleAnimation

2.2 ColorAnimation

2.3 ThicknessAnimation (Margin, Padding)

EasingFunction

3.1 Main Easing Types

        &#x3C;!-- Smooth deceleration -->
        &#x3C;QuadraticEase EasingMode="EaseOut"/>

        &#x3C;!-- Elastic effect -->
        &#x3C;!--&#x3C;ElasticEase Oscillations="3" Springiness="5"/>-->

        &#x3C;!-- Bounce effect -->
        &#x3C;!--&#x3C;BounceEase Bounces="3" Bounciness="2"/>-->

        &#x3C;!-- Back effect (overshoot) -->
        &#x3C;!--&#x3C;BackEase Amplitude="0.3"/>-->

        &#x3C;!-- Circular easing -->
        &#x3C;!--&#x3C;CircleEase EasingMode="EaseInOut"/>-->
    &#x3C;/DoubleAnimation.EasingFunction>
&#x3C;/DoubleAnimation>

</Storyboard>

3.2 EasingMode

Mode Description

EaseIn Slow at start, fast at end

EaseOut Fast at start, slow at end

EaseInOut Slow at both ends, fast in middle

KeyFrame Animation

4.1 DoubleAnimationUsingKeyFrames

4.2 ObjectAnimationUsingKeyFrames (Discrete Values)

Transform Animation

5.1 RenderTransform Animation

5.2 Composite Transform Animation

Animation in Code

6.1 Basic Animation

namespace MyApp.Animations;

using System; using System.Windows; using System.Windows.Media.Animation;

public static class AnimationHelper { /// <summary> /// Opacity fade animation /// </summary> public static void FadeIn(UIElement element, double durationSeconds = 0.3) { var animation = new DoubleAnimation { From = 0, To = 1, Duration = TimeSpan.FromSeconds(durationSeconds), EasingFunction = new QuadraticEase { EasingMode = EasingMode.EaseOut } };

    element.BeginAnimation(UIElement.OpacityProperty, animation);
}

public static void FadeOut(UIElement element, double durationSeconds = 0.3, Action? onCompleted = null)
{
    var animation = new DoubleAnimation
    {
        From = 1,
        To = 0,
        Duration = TimeSpan.FromSeconds(durationSeconds),
        EasingFunction = new QuadraticEase { EasingMode = EasingMode.EaseIn }
    };

    if (onCompleted is not null)
    {
        animation.Completed += (s, e) => onCompleted();
    }

    element.BeginAnimation(UIElement.OpacityProperty, animation);
}

}

6.2 Composite Animation with Storyboard

namespace MyApp.Animations;

using System; using System.Windows; using System.Windows.Media; using System.Windows.Media.Animation;

public static class StoryboardHelper { /// <summary> /// Scale up + fade in animation /// </summary> public static void ScaleFadeIn(FrameworkElement element, double durationSeconds = 0.3) { // Setup transform var scaleTransform = new ScaleTransform(0.8, 0.8); element.RenderTransform = scaleTransform; element.RenderTransformOrigin = new Point(0.5, 0.5); element.Opacity = 0;

    var storyboard = new Storyboard();

    // Opacity animation
    var opacityAnimation = new DoubleAnimation
    {
        To = 1,
        Duration = TimeSpan.FromSeconds(durationSeconds),
        EasingFunction = new QuadraticEase { EasingMode = EasingMode.EaseOut }
    };
    Storyboard.SetTarget(opacityAnimation, element);
    Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath(UIElement.OpacityProperty));
    storyboard.Children.Add(opacityAnimation);

    // ScaleX animation
    var scaleXAnimation = new DoubleAnimation
    {
        To = 1,
        Duration = TimeSpan.FromSeconds(durationSeconds),
        EasingFunction = new QuadraticEase { EasingMode = EasingMode.EaseOut }
    };
    Storyboard.SetTarget(scaleXAnimation, element);
    Storyboard.SetTargetProperty(scaleXAnimation,
        new PropertyPath("RenderTransform.ScaleX"));
    storyboard.Children.Add(scaleXAnimation);

    // ScaleY animation
    var scaleYAnimation = new DoubleAnimation
    {
        To = 1,
        Duration = TimeSpan.FromSeconds(durationSeconds),
        EasingFunction = new QuadraticEase { EasingMode = EasingMode.EaseOut }
    };
    Storyboard.SetTarget(scaleYAnimation, element);
    Storyboard.SetTargetProperty(scaleYAnimation,
        new PropertyPath("RenderTransform.ScaleY"));
    storyboard.Children.Add(scaleYAnimation);

    storyboard.Begin();
}

}

6.3 Stop/Resume Animation

namespace MyApp.Animations;

using System.Windows; using System.Windows.Media.Animation;

public sealed class AnimationController { private readonly Storyboard _storyboard; private readonly FrameworkElement _target;

public AnimationController(Storyboard storyboard, FrameworkElement target)
{
    _storyboard = storyboard;
    _target = target;
}

public void Start()
{
    _storyboard.Begin(_target, isControllable: true);
}

public void Pause()
{
    _storyboard.Pause(_target);
}

public void Resume()
{
    _storyboard.Resume(_target);
}

public void Stop()
{
    _storyboard.Stop(_target);
}

public void Seek(TimeSpan offset)
{
    _storyboard.Seek(_target, offset, TimeSeekOrigin.BeginTime);
}

}

VisualStateManager Integration

7.1 State-Based Animation

Performance Considerations

Property Performance Description

Opacity ⭐⭐⭐ Most efficient

RenderTransform ⭐⭐⭐ No layout recalculation

Clip ⭐⭐ Medium performance

Width/Height ⭐ Causes layout recalculation

Margin ⭐ Causes layout recalculation

// Performance optimization hints RenderOptions.SetBitmapScalingMode(element, BitmapScalingMode.LowQuality); Timeline.SetDesiredFrameRate(storyboard, 30); // Default 60fps → 30fps

References

Animation Overview - Microsoft Docs
Storyboards Overview - Microsoft Docs

creating-wpf-animations

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

converting-html-css-to-wpf-xaml

publishing-wpf-apps

using-xaml-property-element-syntax