Home

Awesome

FluentTransitions

NuGet Status

FluentTransitions lets you create animated transitions of any property of user-interface elements in .NET. It provides a simple API to perform UI animations in a similar way to Apple's Core Animation library for iOS, iPadOS and macOS.

FluentDragDrop effects with FluentTransitions

<sup>FluentTransitions powering FluentDragDrop, a library to create stunning drag and drop effects with Windows Forms.</sup>

What can it do for me?

FluentTransitions allows smooth UI transitions with Windows Forms and GDI+. While the animation above shows several effects in combination, you will probably start with simpler things like the transition of a property of a Windows Forms control:

var maxTop = button1.Parent.Height - button1.Height;

Transition
    .With(button1, nameof(Top), maxTop)      // target, property, value
    .Bounce(TimeSpan.FromMilliseconds(500)); // method and duration

Button drop effect

Multi targeting

Transitions can manipulate multiple properties from one or multiple objects simultaneously just by chaining the .With() methods:

Transition
    .With(button1, nameof(Left), 300)
    .With(button2, nameof(Top), 200)
    .With(Form1, nameof(Opacity), 0.0)
    .EaseInEaseOut(TimeSpan.FromSeconds(2));

This code animates the movement of two buttons while it fades out the whole form. All of this is running in parallel within two seconds.

Chaining

Some effects might require multiple transitions to be executed sequentially. FluentTransitions provides a concept called "Chaining". To use it, simply build your transitions and run them with Transition.RunChain(...):

Transition.RunChain
(
    Transition
        .With(button1, nameof(Left), 300)
        .With(button2, nameof(Top), 200)
        .Build(new Linear(TimeSpan.FromSeconds(1))),
    Transition
        .With(Form1, nameof(Opacity), 0.0)
        .Build(new Linear(TimeSpan.FromSeconds(1)))
);

This code animates the movement of two buttons first. Once this is done, it fades out the whole form. Both transitions are completed within two seconds.

Completion

Each transition raises an event once it is completed. This can be useful to run code after the UI is done with animating.

var t1 = Transition
    .With(button1, nameof(Left), 300)
    .With(button2, nameof(Top), 200)
    .HookOnCompletionInUiThread(SynchronizationContext.Current, () => this.Close())
    .Build(new EaseInEaseOut(TimeSpan.FromSeconds(1)));
    
Transition.Run(t1);

Prefer Transition.RunChain() to run animations sequentially.

More Samples

Back in the year 2011, I used these transitions to spice up two login forms for a customer project. Be kind to me, I was young and just wanted to make something fancy. Nevertheless, I think it's pretty special to WinForms.

Login form sample 1

Login form sample 2

But FluentTransitions is more that just smoothly moving and sizing controls, you can do pretty much everything if you're creative enough.

Ripple effect sample

Text transition sample

Acknowledgements

Idea and initial implementation by Richard S. Shepherd on Google Code.

Dec 2020 Andreas Wäscher

Oct 2020 Andreas Wäscher

Apr 2020 zhenyuan0502

Jul 2015 Uwe Keim

© 2009 Richard S. Shepherd.