Nice solution, Shmuel. However, I must advance each step based on external events, so I can't set BeginTime from XAML nor code. So far, I'm working with multiple storyboards, each one representing one step. On each event, I call these storyboards sequentially. The solution is similar to yours, but with multiple Storyboards using 1 DoubleAnimationUsingPath for X and 1 DoubleAnimationUsingPath for Y. Lemme show you:
<page>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<grid>
<grid.resources>
<pathgeometry x:key="path1" xmlns:x="#unknown">
Figures="M0,0 L10,10 C20,100 30,10 60,120 C30,130 20,170 120,175" />
<pathgeometry x:key="path2">
Figures="M120,175 C130,150 140,180 160,130 C170,150 175,170 190,120 C200,80 200,60 40,40" />
<storyboard x:key="sb1">
<doubleanimationusingpath storyboard.targetname="rectTranslateTransform">
Storyboard.TargetProperty="X"
PathGeometry="{StaticResource path1}"
Source="X"
Duration="0:0:2" />
<doubleanimationusingpath storyboard.targetname="rectTranslateTransform">
Storyboard.TargetProperty="Y"
PathGeometry="{StaticResource path1}"
Source="Y"
Duration="0:0:2" />
</doubleanimationusingpath></doubleanimationusingpath></storyboard>
<storyboard x:key="sb2">
<doubleanimationusingpath storyboard.targetname="rectTranslateTransform">
Storyboard.TargetProperty="X"
PathGeometry="{StaticResource path2}"
Source="X"
Duration="0:0:2"/>
<doubleanimationusingpath storyboard.targetname="rectTranslateTransform">
Storyboard.TargetProperty="Y"
PathGeometry="{StaticResource path2}"
Source="Y"
Duration="0:0:2"/>
</doubleanimationusingpath></doubleanimationusingpath></storyboard>
</pathgeometry></pathgeometry></grid.resources>
<grid.rowdefinitions>
<rowdefinition />
<rowdefinition height="Auto" />
<rowdefinition height="Auto" />
</grid.rowdefinitions>
<path data="M0,0 L10,10 C20,100 30,10 60,120 C30,130 20,170 120,175" stroke="Green" strokethickness="2" />
<path data="M120,175 C130,150 140,180 160,130 C170,150 175,170 190,120 C200,80 200,60 40,40" stroke="Blue" strokethickness="2" />
<canvas>
<rectangle fill="Red">
Stroke="DarkRed" StrokeThickness="1"
Height="15" Width="15"
Canvas.Left="0" Canvas.Top="0"
x:Name="rect1" >
<rectangle.rendertransform>
<translatetransform x:name="rectTranslateTransform" xmlns:x="#unknown" />
</rectangle.rendertransform>
</rectangle>
</canvas>
<button content="Animate 1" grid.row="1">
<button.triggers>
<eventtrigger routedevent="ButtonBase.Click">
<beginstoryboard storyboard="{StaticResource sb1}" />
</eventtrigger>
</button.triggers>
</button>
<button content="Animate 2" grid.row="2">
<button.triggers>
<eventtrigger routedevent="ButtonBase.Click">
<beginstoryboard storyboard="{StaticResource sb2}" />
</eventtrigger>
</button.triggers>
</button>
</grid>
</page>
I preciate your work. I still think maybe there's a better solution. Time will tell.