creating animated rolling balls WPF in VB.NET

This article shows you how to create animated rolling balls in WPF.
  • 3566

In this article, I will create animated rolling bolls in WPF.

The below code project shows four animated rolling balls in same direction.

<Window x:Class="WpfApplication1.RollingBall"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Rolling Balls" Height="350" Width="518">
    <Border BorderBrush="Gray" BorderThickness="1" Margin="4">
        <Canvas>
            <Rectangle Fill="Gray" Width="500" Height="5"
        Canvas.Top="60" />
            <Ellipse x:Name="ellipse1" Width="50" Height="50"
        Stroke="green" Canvas.Top="10" Canvas.Left="0">
                <Ellipse.Fill>
                    <LinearGradientBrush>
                        <GradientStop Color="green" Offset="0.2" />
                        <GradientStop Color="white" Offset="0.8" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="ellipse1Rotate"
            CenterX="25" CenterY="25" />
                </Ellipse.RenderTransform>
            </Ellipse>
 
            <Rectangle Fill="Gray" Width="500" Height="5"
      Canvas.Top="130" />
            <Ellipse x:Name="ellipse2" Width="50" Height="50"
        Stroke="blue" Canvas.Top="80" Canvas.Left="0">
                <Ellipse.Fill>
                    <LinearGradientBrush>
                        <GradientStop Color="blue" Offset="0.8" />
                        <GradientStop Color="Lightblue" Offset="0.2" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="ellipse2Rotate"
            CenterX="25" CenterY="25" />\
                </Ellipse.RenderTransform>
            </Ellipse>
            <Rectangle Fill="Gray" Width="500" Height="5"
        Canvas.Top="200" />
            <Ellipse x:Name="ellipse3" Width="50" Height="50"
        Stroke="red" Canvas.Top="150" Canvas.Left="0">
                <Ellipse.Fill>
                    <LinearGradientBrush>
                        <GradientStop Color="red" Offset="0.8" />
                        <GradientStop Color="pink" Offset="0.2" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="ellipse3Rotate"
            CenterX="25" CenterY="25" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <Rectangle Fill="Gray" Width="500" Height="5" Canvas.Top="270" />
            <Ellipse x:Name="ellipse4" Width="50" Height="50" Stroke="yellow" Canvas.Top="220" Canvas.Left="0">
                <Ellipse.Fill>
                    <LinearGradientBrush>
                        <GradientStop Color="yellow" Offset="0.5" />
                        <GradientStop Color="orange" Offset="0.2" />
                    </LinearGradientBrush>
                </Ellipse.Fill>
                   <RotateTransform x:Name="ellipse4Rotate" CenterX="25" CenterY="25" />
                </Ellipse.RenderTransform>
            </Ellipse>
        </Canvas>
    </Border>
</Window>

Animated Rolling Ball

rollingbolls.gif
 

SUMMARY

I hope you will enjoy and learn a interesting animation in WPF.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.