I have been searching high and low. At this point everything is cloudy so I thought I'd just ask my question to see if anyone could point me in the right direction.
I'm trying to animate a Path element with multiple points (think of a hand drawn car in Blend, mostly straight lines and, 2 curves) along a complex Polyline. I cannot find anything that directly demonstrates or describes how to do this. I usually find simple shapes along geometry, which I understand.
I need to accomplish as much animation from codebehind, as the paths (polylines) for my animations are dynamic (depending on which layout is being loaded).
I have probably a few questions that might help me better solve my issue:
1. Should I be using a Polyline to draw a 500 + X and Y point road (for lack of a better term)? I load the X and Y from a CSV.
2. For my object that I want to animate, being a path with multiple data points, is it fine as it is? Is there a better way to accomplish my goal by using a different object type? This is static and doesn't need to change.. just move along the road.
Here is a sample of code that works, but I only get a downward (From north west to south east) movement.. no reverse movement (X or Y) what so ever even though the start point and end point are exactly the same.
Notes:
pthCar - Object in XAML that is the object that I want animated only the PointCollection RoadPoints.
RoadPoints - Current points collection that are bound to the Polyline.Points object in the XAML and read from a textfile.
If you need more info or clarification please feel free to ask. I have been racking my brain over this and am probably staring right at the solution but just can't see it.
Thanks in advance.
Steve
I'm trying to animate a Path element with multiple points (think of a hand drawn car in Blend, mostly straight lines and, 2 curves) along a complex Polyline. I cannot find anything that directly demonstrates or describes how to do this. I usually find simple shapes along geometry, which I understand.
I need to accomplish as much animation from codebehind, as the paths (polylines) for my animations are dynamic (depending on which layout is being loaded).
I have probably a few questions that might help me better solve my issue:
1. Should I be using a Polyline to draw a 500 + X and Y point road (for lack of a better term)? I load the X and Y from a CSV.
2. For my object that I want to animate, being a path with multiple data points, is it fine as it is? Is there a better way to accomplish my goal by using a different object type? This is static and doesn't need to change.. just move along the road.
Here is a sample of code that works, but I only get a downward (From north west to south east) movement.. no reverse movement (X or Y) what so ever even though the start point and end point are exactly the same.
Notes:
pthCar - Object in XAML that is the object that I want animated only the PointCollection RoadPoints.
RoadPoints - Current points collection that are bound to the Polyline.Points object in the XAML and read from a textfile.
private string _targetName = "pthCar"; | |
private double _xBeginTime = 5; | |
public void AnotherAnimation(PointCollection RoadPoints) | |
{ | |
TransformGroup carTransformGroup = new TransformGroup(); | |
TranslateTransform tt = new TranslateTransform(); | |
carTransformGroup.Children.Add(tt); | |
pthCar.RenderTransform = carTransformGroup; | |
NameScope.SetNameScope(this, new NameScope()); | |
this.RegisterName("tt", tt); | |
DoubleAnimationUsingKeyFrames daX = new DoubleAnimationUsingKeyFrames(); | |
DoubleAnimationUsingKeyFrames daY = new DoubleAnimationUsingKeyFrames(); | |
daX.BeginTime = TimeSpan.FromMilliseconds(_xBeginTime); | |
daY.BeginTime = TimeSpan.FromMilliseconds(_xBeginTime); | |
double previousX = 0; | |
int counter = 0; | |
foreach (myRoadPoint rp in RoadPoints) | |
{ | |
if (counter % 2 == 0) | |
{ | |
double xvalue = rp.X * scale; | |
if (xvalue < previousX) xvalue = xvalue * -1; | |
previousX = xvalue; | |
LinearDoubleKeyFrame ldkf_X = new LinearDoubleKeyFrame(); | |
ldkf_X.Value = xvalue; | |
ldkf_X.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(.5)); | |
daX.KeyFrames.Add(ldkf_X); | |
LinearDoubleKeyFrame ldkf_Y = new LinearDoubleKeyFrame(); | |
ldkf_Y.Value = rp.Y * Scale; | |
ldkf_Y.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(.5)); | |
daY.KeyFrames.Add(ldkf_Y); | |
} | |
counter++; | |
} | |
Storyboard.SetTargetName(daX, "tt"); | |
Storyboard.SetTargetProperty(daX, new PropertyPath(TranslateTransform.XProperty)); | |
Storyboard.SetTargetName(daY, "tt"); | |
Storyboard.SetTargetProperty(daY, new PropertyPath(TranslateTransform.YProperty)); | |
Storyboard sb = new Storyboard(); | |
sb.Children.Add(daX); | |
sb.Children.Add(daY); | |
sb.Begin(this); | |
} |
If you need more info or clarification please feel free to ask. I have been racking my brain over this and am probably staring right at the solution but just can't see it.
Thanks in advance.
Steve