October 20, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Building a WPF Animation DSL Using M and the Oslo SDK

  • April 7, 2009
  • By Jeffrey Juday
  • Send Email »
  • More Articles »

Core Runtime

The following code lives behind the application's "Run" button.

MGraphGenerator generator = new MGraphGenerator();
MParserBuilder builder = new MParserBuilder();
EllipseAnimator animate = new EllipseAnimator();
MGraphReader reader = new MGraphReader();
List<Move> list = new List ();
builder.Build(_mgName);
generator.Run(textBox1.Text, builder.Parser);
reader.ReadGraphInto(generator, list);
animate.CurrentEllipse = this._ellipse;
animate.DoAnimation(this, list);

Appearing above are the major application classes. Class roles are described below.

  • MParserBuilder loads the MGrammar code and builds the Olso MGrammar parsing classes.
  • MGraphGenerator utilizes Oslo parser classes built in MParserBuilder to generate data from the DSL code.
  • MGraphReader reads the DSL generated data and stores the data in a List of Move objects.
  • EllipseAnimator performs the animation based on the List of Move objects produced by the MGraphReader.

With some orientation to the major classes, I'm going to cover each of the classes in more detail starting with the EllipseAnimator and WPF Animation.

WPF Animation

A complete introduction to WPF animation is beyond the scope of this article, so I'm only highlighting the components and ideas employed by the sample. The main animation function contained in the EllipseAnimator class appears below.

PathGeometry animationPath = null;
animationPath = GenerateAnimationPath(pointList);
// Create a PointAnimationgUsingPath to move
// the EllipseGeometry along the animation path.
PointAnimationUsingPath centerPointAnimation =
    new PointAnimationUsingPath();
centerPointAnimation.PathGeometry = animationPath;
centerPointAnimation.Duration = TimeSpan.FromSeconds(5);
centerPointAnimation.RepeatBehavior = RepeatBehavior.Forever;
Start(win, centerPointAnimation);

EllipseAnimator works with the XAML on the Window1 class. The XAML portion of the animation appears below.

<Path Fill="Blue" Margin="15,15,15,15" x:Name="myPath">
    <Path.Data>
        <!-- Describes an ellipse. -->
        <EllipseGeometry x:Name="_ellipse" Center="0,0" RadiusX="15"
             RadiusY="15" />
    </Path.Data>
</Path>

There are three parts to the animation.

  • Objects to animate plus supporting information about the objects, like the course of the animation. This is encapsulated in the PathGeometry object in the C# code and the Path object in the XAML snippet.
  • The style of animation being employed is encapsulated by the PointAnimationUsingPath class.
  • Animation activation, encapsulated in the Storyboard object.

If you're interested in WPF animation, there are some good sources at the end of this article.

PointAnimationUsingPath requires X,Y coordinates collection. As I said earlier the MGrammar DSL is charged with collecting the coordinate inputs.

MGrammar Animation DSL

The DSL MGrammar code WPFTestingWithMG appears below.

module WPFTestingWithMG
{
    language MGrammarInterpreter
    {
        interleave Whitespace = '\t' | '\n' | '\r' | ' ';
    
        syntax Main = (MoveUp | MoveDown | MoveRight )+;
        
        token Up = "Up";
        token Down = "Down";
        token Right = "Right";
        token NumVal = "0".."9";
        token Magnitude = NumVal+;
        
        
        syntax MoveUp = Up Mag:Magnitude => Move  { MoveX {0}, MoveY {Mag}, Mult{-1} };
        syntax MoveDown = Down Mag:Magnitude => Move  { MoveX {0}, MoveY {Mag}, Mult{1} };
        syntax MoveRight = Right Mag:Magnitude => Move  { MoveX {Mag}, MoveY {0}, Mult{1} };
    }
}

When WPFTestingWithMG executes it produces MGraph output appearing like the MGraph sample below.

Main[
  [
    [
      Move{
        MoveX{
          0
        },
        MoveY{
          "10"
        },
        Mult{
          1
        }
      }
    ],

WPFTestingWithMG translates the parsed command to X, Y movement along with a multiplier indicating upward movement or downward movement. The sample application reads the resulting MGraph and translates the movement to specific X, Y coordinates along the path. Later in the article I'll show how the application works with the resulting MGraph.

I built the MGrammar DSL in Intelipad and added it to the project. There were a number of steps I needed to do to get the MGrammar to work with text in the sample application.





Page 2 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel