Hello everybody,
I'm working on an animated map control, where lines represent roads and ellipse objects are animated along these lines. Paths are currently drawn in Expression Blend, but in future they should be generated in code. These paths are applied in Expression to moving paths.
My current code looks like this:
private void ApplyAnimationToElement(string animationName, DependencyProperty targetProperty, FrameworkElement target)
{
DoubleAnimationUsingPath anim = ((DoubleAnimationUsingPath)Resources[animationName]);
AnimationClock animClock = anim.CreateClock();
target.ApplyAnimationClock(targetProperty, animClock);
animClock.Controller.Pause();
clocks.Add(animClock);
}
ApplyAnimationToElement("animationX", Canvas.LeftProperty, ellipse);
ApplyAnimationToElement("animationY", Canvas.TopProperty, ellipse);
One of the animations looks like this:
<DoubleAnimationUsingPath x:Key="animationY" Duration="0:0:5" Source="Y" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="ellipse" IsAdditive="True">
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M51,16.39761 C-24.537898,34.288169 -99.506096,99.331318 -180.99999,48.397609 C-272.95909,-9.0768199 -273.32109,-7.6023899 -396.99999,-7.6023899 C-542.68229,-7.6023899 -749.89068,-134.26628 -860.99998,32.397609 C-908.87698,104.21312 -973.26728,125.18958 -964.99998,224.39761 C-957.10698,319.1142 -881.84698,326.46864 -868.99998,416.3976 C-847.86878,564.316 -884.99998,746.27899 -884.99998,904.39759 C-1102.1311,947.82379 -1069,1082.9669 -1069,1392.3976 C-1069,1628.7411 -1144.1431,1787.4617 -676.99998,1728.3976"/>
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
Animation is paused and inserted into a list, because I take snapshots from each animation step to create a video (that's the whole point, I'm using WPF to render some video, which may be a bit dumb, but I didn't find easier solution for me).
Everything is working fine now, but I want to move the ellipse according to timetable. I thought about that I could write code which provide some custom implementation of polyline and combined with time data I calculate the Canvas coordinates.
On the other hand, I think that it would be easier to use the built-in animation with some basic speed curve, but I didn't find way to pass a custom timeline object to DoubleAnimationUsingPath object. Moreover it would be nice if later, when the ellipse might be replaced with pictures I could rotate them using matrixanimation.
Could you help me if it's worth using WPF's built-in animation capabilities or rather write my own implementation which would be less capable, but at least objects' movements are based on timetable. If I should use WPF animation, how could I set to it my custom timeline?
Bit more detailed description: Say I have a path with three sections between points A,B,C,D . My timetable contains, that the ellipse moves from A to B in 4 sec, B to C in 9, C to D in 3 no matter how long these lines are. Can this be achieved using WPF animations?