Rolling Ball Animation : Animation « Windows Presentation Foundation « VB.Net Tutorial






<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="Blue" Canvas.Top="10" Canvas.Left="0">
        <Ellipse.Fill>
          <LinearGradientBrush>
            <GradientStop Color="Blue" Offset="0.2" />
            <GradientStop Color="LightBlue" 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="Red" Canvas.Top="80" Canvas.Left="0">
        <Ellipse.Fill>
          <LinearGradientBrush>
            <GradientStop Color="Red" Offset="0.8" />
            <GradientStop Color="LightSalmon" 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="Green" Canvas.Top="150" Canvas.Left="0">
        <Ellipse.Fill>
          <LinearGradientBrush>
            <GradientStop Color="Green" Offset="0.5" />
            <GradientStop Color="LightGreen" Offset="0.5" />
          </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="Purple" Canvas.Top="220" Canvas.Left="0">
        <Ellipse.Fill>
          <LinearGradientBrush>
            <GradientStop Color="Purple" Offset="0.5" />
            <GradientStop Color="LightPink" Offset="0.2" />
          </LinearGradientBrush>
        </Ellipse.Fill>
        <Ellipse.RenderTransform>
          <RotateTransform x:Name="ellipse4Rotate" CenterX="25" CenterY="25" />
        </Ellipse.RenderTransform>
      </Ellipse>
    </Canvas>
  </Border>
</Window>
//File:Window.xaml.vb


Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes


Namespace WpfApplication1
  Public Partial Class RollingBall
    Inherits Window


    Public Sub New()
      InitializeComponent()
      Dim nRotation As Double = 2

      Dim da As New DoubleAnimation(0, 450, TimeSpan.FromSeconds(5))
      da.RepeatBehavior = RepeatBehavior.Forever
      da.AutoReverse = True
      ellipse1.BeginAnimation(Canvas.LeftProperty, da)


      da = New DoubleAnimation(0, nRotation, TimeSpan.FromSeconds(15))
      da.RepeatBehavior = RepeatBehavior.Forever
      da.AutoReverse = True
      ellipse1Rotate.BeginAnimation(RotateTransform.AngleProperty, da)


      da = New DoubleAnimation(0, 450, TimeSpan.FromSeconds(15))
      da.AccelerationRatio = 0.4
      da.RepeatBehavior = RepeatBehavior.Forever
      da.AutoReverse = True
      ellipse2.BeginAnimation(Canvas.LeftProperty, da)


      da = New DoubleAnimation(0, nRotation, TimeSpan.FromSeconds(15))
      da.AccelerationRatio = 0.4
      da.RepeatBehavior = RepeatBehavior.Forever
      da.AutoReverse = True
      ellipse2Rotate.BeginAnimation(RotateTransform.AngleProperty, da)


      da = New DoubleAnimation(0, 450, TimeSpan.FromSeconds(5))
      da.DecelerationRatio = 0.6
      da.RepeatBehavior = RepeatBehavior.Forever
      da.AutoReverse = True
      ellipse3.BeginAnimation(Canvas.LeftProperty, da)


      da = New DoubleAnimation(0, nRotation, TimeSpan.FromSeconds(15))
      da.DecelerationRatio = 0.6
      da.RepeatBehavior = RepeatBehavior.Forever
      da.AutoReverse = True

      ellipse3Rotate.BeginAnimation(RotateTransform.AngleProperty, da)
    End Sub
  End Class
End Namespace
WPF Rolling Ball Animation








16.107.Animation
16.107.1.Animation of the combined transformAnimation of the combined transform
16.107.2.Animate the Opacity of TextBlock at different starting timeAnimate the Opacity of TextBlock at different starting time
16.107.3.Animate Canvas positionAnimate Canvas position
16.107.4.RepeatBehavior=2xRepeatBehavior=2x
16.107.5.Xaml ClockXaml Clock
16.107.6.Enlarge Buttons In XamlEnlarge Buttons In Xaml
16.107.7.Setting enumeration values with discrete animations with DiscreteObjectKeyFrameSetting enumeration values with discrete animations with DiscreteObjectKeyFrame
16.107.8.Expand ElementExpand Element
16.107.9.Animating nested propertiesAnimating nested properties
16.107.10.Text AnimationText Animation
16.107.11.Animate TransformationAnimate Transformation
16.107.12.Associating the clicking of each button with a stack of XAML that starts or stops the animationAssociating the clicking of each button with a stack of XAML that starts or stops the animation
16.107.13.Animation In XamlAnimation In Xaml
16.107.14.Using SpeedRatio in a hierarchyUsing SpeedRatio in a hierarchy
16.107.15.Hold on end for an AnimationHold on end for an Animation
16.107.16.Animate Several PropertiesAnimate Several Properties
16.107.17.Animation ProgressBar.Animation ProgressBar.
16.107.18.Control the Progress of an AnimationControl the Progress of an Animation
16.107.19.Remove Animations with AnimationClockRemove Animations with AnimationClock
16.107.20.Remove AnimationsRemove Animations
16.107.21.Timer triggered AnimationTimer triggered Animation
16.107.22.Rolling Ball AnimationRolling Ball Animation
16.107.23.Create animations using the Storyboard in codeCreate animations using the Storyboard in code
16.107.24.Receive Notification When an Animation CompletesReceive Notification When an Animation Completes
16.107.25.A simple, finite animationA simple, finite animation
16.107.26.Code Animation Accelerate DecelerateCode Animation Accelerate Decelerate
16.107.27.Animation with codeAnimation with code
16.107.28.Rotate Button AnimationRotate Button Animation
16.107.29.Rotate Button Animation With LayoutRotate Button Animation With Layout
16.107.30.A Simple Animation in CodeA Simple Animation in Code