#1,164 – Using Animation to Bounce a Control

The XAML fragment below will start a Button bouncing when you click on it.  This uses the BounceEase object as an easing function.  You can play with the animation duration, # bounces, and “bounciness” to get different effects.

	<Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Button Content="Click Me" Margin="20,5,20,35"
                VerticalAlignment="Bottom">
            <Button.RenderTransform>
                <TranslateTransform x:Name="transTransform" X="0" Y="0"/>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="0" To="35" Duration="00:00:01" 
                                    Storyboard.TargetName="transTransform" 
                                    Storyboard.TargetProperty="Y"
                                    AutoReverse="True" RepeatBehavior="Forever">
                                <DoubleAnimation.EasingFunction>
                                    <BounceEase Bounces="1" EasingMode="EaseOut"
                                                Bounciness="2" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Border Grid.Row="1"
            BorderBrush="Black" BorderThickness="10"/>
    </Grid>

Advertisements

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

One Response to #1,164 – Using Animation to Bounce a Control

  1. Pingback: Dew Drop – September 23, 2014 (#1861) | Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: