WPFによるパスアニメーション

Question

ベジエ曲線に沿ってアニメーションさせることは出来たのですが、スプライン曲線に沿ってアニメーションさせる方法がわかりません。
そもそも可能なのでしょうか？
XAMLのコードを追記します。（ベジエ曲線に沿ったアニメーション）

<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="PresentationOptions" Margin="20" Title="howto_path_animation" Height="400" Width="400">
<Canvas Width="400" Height="400">
<Path Stroke="Red" StrokeThickness="1">
<Path.Data>
<PathGeometry Figures="M 10,200 C 35,100 135,100 160,200 180,350 285,300 310,100"/>
</Path.Data>
</Path>

    <Rectangle Width="50" Height="20" Fill="LightBlue" Stroke="Blue">
        <Rectangle.RenderTransform>
            <TransformGroup>
                <TranslateTransform X="-30" Y="-10"/>
                <MatrixTransform x:Name="rectangleTransform">
                    <MatrixTransform.Matrix >
                        <Matrix />
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </TransformGroup>
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <MatrixAnimationUsingPath
                            Storyboard.TargetName="rectangleTransform"
                            Storyboard.TargetProperty="Matrix"
                            DoesRotateWithTangent="True"
                            Duration="0:0:3" 
                            RepeatBehavior="Forever" >
                            <MatrixAnimationUsingPath.PathGeometry>
                                <PathGeometry 
                                    Figures="M 10,200 C 35,100 135,100 160,200 180,350 285,300 310,100" />
                            </MatrixAnimationUsingPath.PathGeometry>
                        </MatrixAnimationUsingPath>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Canvas>

</Window>

Comments

[退会済みユーザー]

まずベジエ曲線でやったプログラムを書いてどんな流れでやっているかを見せたほうが回答者も回答しやすいと思いますよ。ただ文章だけというのも分かりにくいと思いますし。

[hogesugi]

アドバイスありがとうございます。
XAMLのコードを追記します。（ベジエ曲線に沿ったアニメーション）

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="PresentationOptions" Margin="20"
Title="howto_path_animation" Height="400" Width="400">
<Canvas Width="400" Height="400">
<Path Stroke="Red" StrokeThickness="1">
<Path.Data>
<PathGeometry Figures="M 10,200 C 35,100 135,100 160,200 180,350 285,300 310,100"/>
</Path.Data>
</Path>

<Rectangle Width="50" Height="20" Fill="LightBlue" Stroke="Blue">
<Rectangle.RenderTransform>
<TransformGroup>
<TranslateTransform X="-30" Y="-10"/>
<MatrixTransform x:Name="rectangleTransform">
<MatrixTransform.Matrix >
<Matrix />
</MatrixTransform.Matrix>
</MatrixTransform>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath
Storyboard.TargetName="rectangleTransform"
Storyboard.TargetProperty="Matrix"
DoesRotateWithTangent="True"
Duration="0:0:3"
RepeatBehavior="Forever" >
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry
Figures="M 10,200 C 35,100 135,100 160,200 180,350 285,300 310,100" />
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
</Window>

Answer 1

多分簡単には出来ないと思います。

JavaFXのPathもSVGのPath仕様もどれをみても2次/3次ベジエ曲線はありますがβスプラインはないようです。

より高度なグラフィックライブラリー(OpenGLなど)はβスプライン曲線をサポートしているものもあるようですが、一般的にはベジエ曲線のみサポートというものが多いのかも知れません。

対応としては、より多くの制御点を用いてベジエ曲線で近似するしか方法はないと思います。