Rolling Ball Animation : Animation « Windows Presentation Foundation « C# / C Sharp






  1. C# / C Sharp
  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.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;


namespace WpfApplication1
{
    public partial class RollingBall : Window
    {


        public RollingBall()
        {
            InitializeComponent();
            double nRotation = 2;

            DoubleAnimation da = 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);

        }
    }
}








Related examples in the same category

1.Two AnimationsTwo Animations
2.Bouncing BallBouncing Ball
3.Animation along a pathAnimation along a path
4.Animate RadialGradientAnimate RadialGradient
5.Animate RenderTransform AngleAnimate RenderTransform Angle
6.Animate OpacityAnimate Opacity
7.Animation In StyleAnimation In Style
8.Animation without acceleration or decelerationAnimation without acceleration or deceleration
9.Animation with a fast speedAnimation with a fast speed
10.Animation with a slow speedAnimation with a slow speed
11.Animation that accelerates through 50% of its durationAnimation that accelerates through 50% of its duration
12.Animation that decelerates through 50% of its durationAnimation that decelerates through 50% of its duration
13.Animate the brush's RadiusX property.Animate the brush's RadiusX property.
14.Animate Fill.RadiusYAnimate Fill.RadiusY
15.Animate GradientStop and Button controlAnimate GradientStop and Button control
16.Animate EndPointAnimate EndPoint
17.Animate StartPointAnimate StartPoint
18.Animate Ellipse RadiusY, RadiusXAnimate Ellipse RadiusY, RadiusX
19.XAML Only AnimationXAML Only Animation
20.Animation with Discrete Key FramesAnimation with Discrete Key Frames
21.Animation with Mixed Key Frames.xamlAnimation with Mixed Key Frames.xaml
22.Control Animations Through TriggersControl Animations Through Triggers
23.Animate the Color of a Brush with Indirect Property TargetingAnimate the Color of a Brush with Indirect Property Targeting
24.Animate the background colorAnimate the background color
25.Animate Width and Height of a EllipseAnimate Width and Height of a Ellipse
26.Animate Width and Height of a RectangleAnimate Width and Height of a Rectangle
27.Use ColorAnimationUsingKeyFrames to animate the foreground color of a TextBlockUse ColorAnimationUsingKeyFrames to animate the foreground color of a TextBlock
28.Use StringAnimationUsingKeyFrames to animate the text value of a TextBlockUse StringAnimationUsingKeyFrames to animate the text value of a TextBlock
29.Four Sided BounceFour Sided Bounce
30.Discrete Double Key FrameDiscrete Double Key Frame
31.Simple Path AnimationSimple Path Animation
32.Start the animation with Path is loadedStart the animation with Path is loaded
33.Matrix Animated ButtonMatrix Animated Button
34.Bouncing Ball with ParallelTimelineBouncing Ball with ParallelTimeline
35.Bouncing Ball with DoubleAnimationBouncing Ball with DoubleAnimation
36.KeySpline AnimationKeySpline Animation
37.Ball moves in a constant speedBall moves in a constant speed
38.Ball moves following spline key framesBall moves following spline key frames
39.Repetition countRepetition count
40.Repetition durationRepetition duration
41.Use ColorAnimationUsingKeyFrames to animate GradientStopUse ColorAnimationUsingKeyFrames to animate GradientStop
42.Use StringAnimationUsingKeyFrames to ColorUse StringAnimationUsingKeyFrames to Color
43.Using DiscreteStringKeyFrameUsing DiscreteStringKeyFrame
44.Animate Ball HeightAnimate Ball Height
45.Rotate Button AnimationRotate Button Animation
46.Rotate Button Animation With LayoutRotate Button Animation With Layout
47.A simple, finite animationA simple, finite animation
48.Code Animation Accelerate DecelerateCode Animation Accelerate Decelerate
49.Animation with codeAnimation with code
50.Velocity animationVelocity animation
51.Animation In CodeAnimation In Code
52.A Simple Animation in CodeA Simple Animation in Code
53.Remove Animations with AnimationClockRemove Animations with AnimationClock
54.Remove AnimationsRemove Animations
55.Control the Progress of an AnimationControl the Progress of an Animation
56.Markup for navigation transition animations
57.Opacity AnimationOpacity Animation
58.Width and Height animationWidth and Height animation
59.Timer triggered AnimationTimer triggered Animation
60.Path animation by code, duration, RepeatBehaviorPath animation by code, duration, RepeatBehavior
61.Show a Continuous Animation During an Asynchronous ProcessShow a Continuous Animation During an Asynchronous Process
62.Receive Notification When an Animation CompletesReceive Notification When an Animation Completes
63.An animated Ellipse traces the outline of rendered text by using the path geometry of the text.An animated Ellipse traces the outline of rendered text by using the path geometry of the text.