Bunifu Framework Docs
HomePricingFAQsMy Account
  • Introduction
  • Getting started
    • Requirements
    • Installation
    • Installing for .Net 5 & Above
    • Licensing
      • Managing your licenses
      • Bunifu Licensing CLI
      • Bunifu Device Remover (Deprecated)
  • BUNIFU UI
    • Controls
      • Bunifu Button
      • Bunifu Button (variant)
      • Bunifu Cards
      • Bunifu CheckBox
      • Bunifu Circle Progress
      • Bunifu Datagrid View
      • Bunifu Date Picker
      • Bunifu Drop Down
      • Bunifu Flat Button
      • Bunifu Form Caption Button
      • Bunifu Form Control Box
      • Bunifu Form Resize Icon
      • Bunifu Gradient Panel
      • Bunifu Icon Button
      • Bunifu Image Button (New)
      • Bunifu Image Button (Old)
      • Bunifu IOS Switch (1.5.3)
      • Bunifu Label
      • Bunifu Loader
      • Bunifu Picture Box
      • Bunifu Pages
      • Bunifu Panel
      • Bunifu Progress Bar
      • Bunifu Radial Gauge
      • Bunifu Radio Button
      • Bunifu Rating
      • Bunifu Range
      • Bunifu Separator
      • Bunifu Sliders
      • Bunifu Shadow Panel
      • Bunifu Shapes
      • Bunifu Switch (1.5.3)
      • Bunifu ScrollBars
      • Bunifu Toggle Switch
      • Bunifu Toggle Switch (variant)
      • Bunifu Tile Button
      • Bunifu Thin Button (1.5.3)
      • Bunifu ToolTip
      • Bunifu Textbox
      • Bunifu User Control
    • Components
      • Bunifu Color Transition
      • Bunifu Drag
      • Bunifu Elipse [Deprecated]
      • Bunifu Form Dock
      • Bunifu Form Drag
      • Bunifu Form Resizer
      • Bunifu Snackbar
      • Bunifu Transition
  • BUNIFU CHARTS
    • Introduction
      • Quick Tips
    • Chart Components
      • Bunifu Bar Chart
      • Bunifu Bubble Chart
      • Bunifu Canvas Control
      • Bunifu Doughnut Chart
      • Bunifu Horizontal bar Chart
      • Bunifu Line Chart
      • Bunifu Pie chart
      • Bunifu Polar Chart
      • Bunifu Radar Chart
  • BUNIFU DATAVIZ [Deprecated]
    • Basic Charts [Deprecated]
      • Step Line Chart [Deprecated]
      • Step Area Chart [Deprecated]
      • Spline Chart [Deprecated]
      • Pie Chart [Deprecated]
      • Line Chart [Deprecated]
      • Doughnut Chart [Deprecated]
      • Bar Chart [Deprecated]
      • Area Chart [Deprecated]
      • Column Chart [Deprecated]
    • Advanced Charts [Deprecated]
      • Stacked Column 100 Chart [Deprecated]
      • Stacked Column Chart [Deprecated]
      • Stacked Bar Chart 100 [Deprecated]
      • Stacked Bar Chart [Deprecated]
      • Stacked Area Chart 100 [Deprecated]
      • Stacked Area Chart [Deprecated]
      • Scatter Chart [Deprecated]
      • Range Spline Area Chart [Deprecated]
      • Range Column Chart [Deprecated]
      • Range Bar Chart [Deprecated]
      • Range Area Chart [Deprecated]
      • OHLC Chart [Deprecated]
      • Candle Stick Chart [Deprecated]
      • Bubble Chart [Deprecated]
Powered by GitBook
On this page
  • Our Objective
  • Properties
  • AnimationType
  • Interval
  • MaxAnimationTime
  • TimeStep

Was this helpful?

  1. BUNIFU UI
  2. Components

Bunifu Transition

Integrate beautiful control transitions in your applications

PreviousBunifu SnackbarNextIntroduction

Last updated 5 years ago

Was this helpful?

Bunifu Transition is a special component that allows developers to provide beautiful transitions in their Windows Forms apps. With this UI component, you can animate the display of any Bunifu, Windows Forms, or other third-party controls at runtime.

Here's a preview of the component in action with all the built-in animations:

To use Bunifu Transition simply locate it in your toolbox and drop it to your form.

Bunifu Transition allows us to apply transitions to controls. In this example, we will use one Bunifu Card control and two Bunifu Button controls.

Our Objective

We would like to achieve the following effect:

When we press the Hide button, the Bunifu Card control will disappear in animation whereas when we press the Show button, the control will likewise be shown in an animated way using Bunifu Transition.

Once you've created your Form to look like the one displayed above, click on each button and Visual Studio will generate for us two Click event handlers that we will use in order to achieve our so desired effect:

private void bunifuButton1_Click(object sender, EventArgs e)
{

    BunifuTransition transition = new BunifuTransition();
    transition.ShowSync(bunifuCards1, false, 
        BunifuAnimatorNS.Animation.HorizSlideAndRotate);
        
}

private void bunifuButton2_Click(object sender, EventArgs e)
{

    BunifuTransition transition = new BunifuTransition();
    transition.HideSync(bunifuCards1, false, 
        BunifuAnimatorNS.Animation.HorizSlideAndRotate);
        
}
Private Sub BunifuButton1_Click(ByVal sender As Object, ByVal e As EventArgs)    
    Handles BunifuButton1.Click    
    
    BunifuTransition transition = New BunifuTransition()
    transition.ShowSync(BunifuCards1, False, 
            BunifuAnimatorNS.Animation.HorizSlideAndRotate)
End Sub

Private Sub BunifuButton2_Click(ByVal sender As Object, ByVal e As EventArgs) 
    Handles BunifuButton2.Click
        
    BunifuTransition transition = New BunifuTransition()
    transition.HideSync(BunifuCards1, False, 
            BunifuAnimatorNS.Animation.HorizSlideAndRotate)

End Sub

Using the event handler for the bunifuButton1 , we call the ShowSync method that performs the transition applied on the control given by the first parameter.

The second parameter is a boolean flag called parallel that we can use if we want our transition to be rendered in parallel for efficiency purposes.

The last parameter indicates the types of animation that we want to apply.

On the event handler for bunifuButton2 , we set the Visible property of the Bunifu Card control to false , because we want to hide it.

Here's an illustration clearly showing how to add animations to controls via code:

We need to specify the parameters for our transition in order to behave the way we want to. We can see all the parameters of our component in the Properties window (in Design Mode):

Properties

By clicking on the transition component you will see the properties. The main ones are listed below:

AnimationType

This property specifies the type of animation that we want to apply to our control. By clicking on the property you will see all the animation options available to you

Interval

This property sets the speed of the frame rendering

MaxAnimationTime

This property sets the maximum amount of time for the animation rendering. If the animation is still working and the MaxAnimationTime was elapsed, then it will stop and the control will be rendered at its final state

TimeStep

This property sets the granularity of the frame processing

The result should be as indicated below

Bunifu Transition has a set of custom events that we can use in order to perform different tasks when our animation reaches a specified point. The events are visible on the properties window as shown below

That's it! We hope Bunifu Transition will help you create interactive user interfaces for your users.

Should you have feedback or suggestions please send us via chat on the bottom right corner of the screen.