none
Blendでパスアニメーションを作成する方法は? RRS feed

  • 質問


  • Blendでパスアニメーションを作成する方法が分かりません。

    Blendでパスを生成すると、下記のようなXamlノードが生成され、アニメーションさせることができませんでした。

    <Path x:Name="Path1" Fill="#FF0000FF" Stretch="Fill" Stroke="#FF000000" Width="137" Height="105" Data="M400,328 L472,240 536,344 z" Canvas.Left="408" Canvas.Top="168"/>

    そこで、下記のようにXamlを直接編集して、
    Pathの指定方法を変えて、PointAnimationUsingKeyFramesでパスのポイントをアニメーションさせたところ、
    なんとか動きました。

    ただ、これだとめんどうで現実的でない気がします。
    Blendで簡単にパスのアニメーションを作成する方法をご存じの方がいらっしゃいましたら教えてください。

    <Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Name="Page"
        WindowTitle="Page"
        FlowDirection="LeftToRight"
        Width="640" Height="480"
        WindowWidth="640" WindowHeight="480">
        <Page.Resources>
            <Storyboard x:Key="Timeline1">
                <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Point0" Storyboard.TargetProperty="(LineSegment.Point)" RepeatBehavior="Forever">
                    <SplinePointKeyFrame  KeyTime="00:00:01" Value="100,100"/>
                </PointAnimationUsingKeyFrames>
            </Storyboard>
        </Page.Resources>
        <Page.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
            </EventTrigger>
        </Page.Triggers>
        <Grid x:Name="LayoutRoot">
            <Canvas x:Name="canvas">
                <Path x:Name="Path0" Fill="#FFFF0000" Stretch="Fill" Stroke="#FF000000" Canvas.Left="100" Canvas.Top="100">
                    <Path.Data>
                        <PathGeometry>
                            <PathGeometry.Figures>
                                <PathFigureCollection>
                                    <PathFigure IsClosed="True" StartPoint="0,0">
                                        <PathFigure.Segments>
                                            <PathSegmentCollection>
                                                <LineSegment x:Name="Point0" Point="100,0" />
                                                <LineSegment x:Name="Point1" Point="0,100" />
                                            </PathSegmentCollection>
                                        </PathFigure.Segments>
                                    </PathFigure>
                                </PathFigureCollection>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </Path.Data>
                </Path>
                <Path x:Name="Path1" Fill="#FF0000FF" Stretch="Fill" Stroke="#FF000000" Width="137" Height="105" Data="M400,328 L472,240 536,344 z" Canvas.Left="408" Canvas.Top="168"/>
            </Canvas>
        </Grid>
    </Page>
    2007年3月29日 2:49

すべての返信

  • BlendのベータではLineSegmentは生成されないようです。

    手書きで描いてもPath全体でTimelineに出てきます。

    ベータプログラムに参加していたらWishを出したらどうでしょうか?

     

    2007年4月10日 7:16
  • Blend 2 September Preview では LineSegment が生成されてアニメーションが作成できるようになったようですね。
    2007年10月1日 16:24