Animations

Using the Telerik Presentation Framework you can animate almost any element property. To achieve this you should use the AnimatedPropertySetting class. The class constructors takes five arguments:

• The first argument of the AnimatedPropertySetting is the RadProperty to animate.

• The second one is the start value.

• Next is the end value.

• The forth argument takes the number of frames.

• And the last argument is the time interval between frames in milliseconds

Animate opacity

The following example animates the Opacity property of the RadButton's FillPrimitive, changing it from 1 to 0 (full transparent) and vice versa:

Animate button's Opacity property

• C#
• VB.NET

private void btnAnimateOpacity_Click(object sender, EventArgs e)
{
    if (btnAnimateOpacity.ButtonElement.ButtonFillElement.Opacity == 0)
    {
        AnimatedPropertySetting setting = new AnimatedPropertySetting(FillPrimitive.OpacityProperty, 0.0, 1.0, 20, 20);
        setting.ApplyValue(btnAnimateOpacity.ButtonElement.ButtonFillElement);
    }
    else
    {
        AnimatedPropertySetting setting = new AnimatedPropertySetting(FillPrimitive.OpacityProperty, 1.0, 0.0, 20, 20);
        setting.ApplyValue(btnAnimateOpacity.ButtonElement.ButtonFillElement);
    }
}

Private Sub btnAnimateOpacity_Click(sender As System.Object, e As System.EventArgs) Handles btnAnimateOpacity.Click
    If btnAnimateOpacity.ButtonElement.ButtonFillElement.Opacity = 0 Then
        Dim setting As New AnimatedPropertySetting(FillPrimitive.OpacityProperty, 0.0, 1.0, 20, 20)
        setting.ApplyValue(btnAnimateOpacity.ButtonElement.ButtonFillElement)
    Else
        Dim setting As New AnimatedPropertySetting(FillPrimitive.OpacityProperty, 1.0, 0.0, 20, 20)
        setting.ApplyValue(btnAnimateOpacity.ButtonElement.ButtonFillElement)
    End If
End Sub

Animate margin

Here is how to animate the Margin property of the RadButton's FillPrimitive:

Animate button's Margin property

• C#
• VB.NET

private void btnAnimateMargin_Click(object sender, EventArgs e)
{
    AnimatedPropertySetting setting2 = new AnimatedPropertySetting();
    setting2.Property = RadElement.MarginProperty;
    setting2.StartValue = new Padding(0);
    setting2.EndValue = new Padding(10);
    setting2.NumFrames = 14;
    setting2.Interval = 30;
    setting2.ApplyValue(btnAnimateMargin.ButtonElement);
}

Private Sub btnAnimateMargin_Click(sender As System.Object, e As System.EventArgs) Handles btnAnimateMargin.Click
    Dim setting2 As New AnimatedPropertySetting()
    setting2.Property = RadElement.MarginProperty
    setting2.StartValue = New Windows.Forms.Padding(0)
    setting2.EndValue = New Windows.Forms.Padding(10)
    setting2.NumFrames = 14
    setting2.Interval = 30
    setting2.ApplyValue(btnAnimateMargin.ButtonElement)
End Sub

Animate bounds

You can also animate the Bounds property of a control. Here is how to create a fly-out animation with RadPanel:

Animate button's Bounds property

• C#
• VB.NET

private void radButton1_Click(object sender, EventArgs e)
{
    RadPanel panel = new RadPanel();
    panel.BackColor = Color.Yellow;
    panel.AutoSize = true;
    panel.RootElement.StretchVertically = true;
    panel.RootElement.StretchHorizontally = true;
    panel.Location = new Point(10, 10);
    panel.Size = new Size(200, 1);
    panel.Text = "I am RadPanel";
    this.Controls.Add(panel);
    AnimatedPropertySetting setting = new AnimatedPropertySetting();
    setting.Property = RadElement.BoundsProperty;
    setting.StartValue = new Rectangle(0, 0, 200, 1);
    setting.EndValue = new Rectangle(0, 0, 200, 100);
    setting.Interval = 30;
    setting.NumFrames = 10;
    setting.ApplyValue(panel.RootElement);
}

Private Sub RadButton1_Click(sender As System.Object, e As System.EventArgs) Handles RadButton1.Click
    Dim panel As New RadPanel()
    panel.BackColor = Color.Yellow
    panel.AutoSize = True
    panel.RootElement.StretchVertically = True
    panel.RootElement.StretchHorizontally = True
    panel.Location = New Point(10, 10)
    panel.Size = New Size(200, 1)
    panel.Text = "I am RadPanel"
    Me.Controls.Add(panel)
    Dim setting As New AnimatedPropertySetting()
    setting.[Property] = RadElement.BoundsProperty
    setting.StartValue = New Rectangle(0, 0, 200, 1)
    setting.EndValue = New Rectangle(0, 0, 200, 100)
    setting.Interval = 30
    setting.NumFrames = 10
    setting.ApplyValue(panel.RootElement)
End Sub