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






  1. VB.Net
  2. Windows Presentation Foundation
  3. Animation

Rolling Ball Animation

Rolling Ball Animation
    

<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








Related examples in the same category

1.Animated StartPointAnimated StartPoint
2.Animated EndPointAnimated EndPoint
3.Animated StartPoint and EndPointAnimated StartPoint and EndPoint
4.Animated GradientStop Offset with DoubleAnimationAnimated GradientStop Offset with DoubleAnimation
5.Animated GradientStop Color with ColorAnimationAnimated GradientStop Color with ColorAnimation
6.Animated GradientStop Opacity ColorAnimation.ByAnimated GradientStop Opacity ColorAnimation.By
7.Animated GradientOriginAnimated GradientOrigin
8.Animated CenterAnimated Center
9.Animated RadiusAnimated Radius
10.Animating ColorAnimating Color
11.Animating Gradient OffsetAnimating Gradient Offset
12.Animate GradientStopAnimate GradientStop
13.Simple Key Frame AnimationSimple Key Frame Animation
14.KeyFrame Point AnimationKeyFrame Point Animation
15.Use Button to pause an animation with PauseStoryboardUse Button to pause an animation with PauseStoryboard
16.Use Button to resume an Animation with ResumeStoryboardUse Button to resume an Animation with ResumeStoryboard
17.Use Button to skip an Animation with SkipStoryboardToFillUse Button to skip an Animation with SkipStoryboardToFill
18.Use Button to stop an Animation with StopStoryboardUse Button to stop an Animation with StopStoryboard
19.Frame RatesFrame Rates
20.Using PointAnimationUsing PointAnimation
21.PointAnimation and BezierSegmentPointAnimation and BezierSegment
22.PointAnimation ToPointAnimation To
23.Animate BezierCurveAnimate BezierCurve
24.Animation of the combined transformAnimation of the combined transform
25.Animate the Opacity of TextBlock at different starting timeAnimate the Opacity of TextBlock at different starting time
26.Animate Canvas positionAnimate Canvas position
27.RepeatBehavior=2xRepeatBehavior=2x
28.Use DiscreteDoubleKeyFrame to switch textUse DiscreteDoubleKeyFrame to switch text
29.Paced AnimationPaced Animation
30.Xaml ClockXaml Clock
31.Enlarge Buttons In XamlEnlarge Buttons In Xaml
32.Use SplineDoubleKeyFrame to rotate a ButtonUse SplineDoubleKeyFrame to rotate a Button
33.Key frame animationKey frame animation
34.Key frame spline animationKey frame spline animation
35.Setting enumeration values with discrete animations with DiscreteObjectKeyFrameSetting enumeration values with discrete animations with DiscreteObjectKeyFrame
36.Point path animationPoint path animation
37.String Animation Using Key FramesString Animation Using Key Frames
38.Expand ElementExpand Element
39.Animating nested propertiesAnimating nested properties
40.Animation LinearGradientBrushAnimation LinearGradientBrush
41.Use ColorAnimation to animate backgroundUse ColorAnimation to animate background
42.Text AnimationText Animation
43.Start and stop an Animation with Button actionsStart and stop an Animation with Button actions
44.Animate TransformationAnimate Transformation
45.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
46.Limit the Frame Rate for All Animations in an ApplicationLimit the Frame Rate for All Animations in an Application
47.Animated Button With Discrete Key FramesAnimated Button With Discrete Key Frames
48.Animation In XamlAnimation In Xaml
49.Using SpeedRatio in a hierarchyUsing SpeedRatio in a hierarchy
50.SplineDoubleKeyFrame and KeySplineSplineDoubleKeyFrame and KeySpline
51.Hold on end for an AnimationHold on end for an Animation
52.Animate Several PropertiesAnimate Several Properties
53.Scaling parameters ScaleX and ScaleY are animatedScaling parameters ScaleX and ScaleY are animated
54.Animation ProgressBar.Animation ProgressBar.
55.Control the Progress of an AnimationControl the Progress of an Animation
56.Remove Animations with AnimationClockRemove Animations with AnimationClock
57.Remove AnimationsRemove Animations
58.Timer triggered AnimationTimer triggered Animation
59.Path animation by code, duration, RepeatBehaviorPath animation by code, duration, RepeatBehavior
60.Create an interactive animation using XAML and the StoryboardCreate an interactive animation using XAML and the Storyboard
61.Create animations using the Storyboard in codeCreate animations using the Storyboard in code
62.Receive Notification When an Animation CompletesReceive Notification When an Animation Completes
63.Create DoubleAnimation and Animate a Button with Button.BeginAnimation and Button.WidthPropertyCreate DoubleAnimation and Animate a Button with Button.BeginAnimation and Button.WidthProperty
64.Velocity animationVelocity animation
65.A simple, finite animationA simple, finite animation
66.Code Animation Accelerate DecelerateCode Animation Accelerate Decelerate
67.Animation with codeAnimation with code
68.Opacity Animation
69.Width and Height animation
70.TranslateTransform and DoubleAnimation
71.Rotate Button AnimationRotate Button Animation
72.Rotate Button Animation With LayoutRotate Button Animation With Layout
73.A Simple Animation in CodeA Simple Animation in Code
74.Stop, resume animation with StoryboardStop, resume animation with Storyboard