locked
Animation in Code behind RRS feed

  • Question

  • I'm trying to animate an ellipse using the code shown below, but the ellipse doesn't move when I run the program.  I think I'm misusing the Storyboard and the Path.  The only object used here that is from the markup file is ClickableCanvas which is a Canvas object

                    EllipseGeometry EHolder;
                    PathHolder[i] = new Path();
                    PathHolder[i].Fill = Brushes.Green;
                    EHolder = new EllipseGeometry(new Point(NumGen.Next(10,290), NumGen.Next(10,290)), 10, 10);
                    PathHolder[i].Data = EHolder;
                    //PathHolder[i].Triggers = new EventTrigger();
                    PointAnimation PA = new PointAnimation();
                    Storyboard sb = new Storyboard();
                    PA.From = new Point(EHolder.Center.X, EHolder.Center.Y);
                    PA.To = new Point(EHolder.Center.X + 30, EHolder.Center.Y + 30);
                    sb.Children.Add(PA);
                    Storyboard.SetTarget(PA, PathHolder[i].Data);
                    Storyboard.SetTargetProperty(PA, new PropertyPath(EllipseGeometry.CenterProperty));
                    
                    ClickableCanvas.Children.Add(PathHolder[i]);
                    sb.Begin();
    Monday, June 1, 2009 5:57 PM

Answers


  • Hello RJ123,

    Do you have to use storyboards for your scenario?

    Here's a sample without (I had to modify your code a little as I don't have your NumGen object):

                EllipseGeometry ellipse;
                ellipse = new EllipseGeometry(new Point(10, 290), 10, 10);
    
                Path path = new Path();
                path.Fill = Brushes.Green;
                path.Data = ellipse;
                LayoutRoot.Children.Add(path);
    
                DoubleAnimation animX = new DoubleAnimation(10, 100, new Duration(TimeSpan.FromSeconds(2)));
                TranslateTransform transform = new TranslateTransform(0, 0);
                transform.BeginAnimation(TranslateTransform.XProperty, animX);
                path.RenderTransform = transform;
    
    

    You can also animate the TranslateTransform.YProperty in a similar fashion.  If you're not looking for interaction or too overly complicated timings than this should work okay for you.

    Hope this helps.

    Cheers,
    -jc

    • Proposed as answer by Tao Liang Wednesday, June 3, 2009 6:08 AM
    • Marked as answer by Tao Liang Thursday, June 4, 2009 2:35 AM
    Monday, June 1, 2009 6:52 PM