locked
Copying object states from Storyboard RRS feed

  • Question

  • I'm currently working on an animation problem.  The animation has bezier paths warping (showing eggs developing into tadpoles).  I need to copy the path from an intermediate stage/keyframe and use it as a still image somewhere else.  Any idea how to do this?
    Friday, April 30, 2010 3:05 PM

Answers

  • None of the xaml here is very important except the storyboard name which is MyStoryboard, just match the values in the c# code to what you want, the name of the storyboard and the time value to display.

     

    public MainPage()
    {
    // Required to initialize variables
    InitializeComponent();
    var sb = this.Resources["MyStoryboard"] as Storyboard;
    sb.Begin();
    sb.Seek(TimeSpan.FromMilliseconds(500));
    sb.Pause();
    }
    <UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SilverlightApplication41.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
    <Storyboard x:Name="MyStoryboard">
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[6].(BezierSegment.Point2)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="100.639205932617,51.0802154541016"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="301.306285858154,12.6633819937706"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[6].(BezierSegment.Point3)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="84.4996185302734,40.3205528259277"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="285.166698455811,1.90371769666672"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[7].(BezierSegment.Point1)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="70.6028518676758,31.0560913085938"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="271.269939422607,-7.36074405908585"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[4].(BezierSegment.Point2)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="75.1818237304688,116.47737121582"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="303.182201385498,161.060840070248"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[4].(BezierSegment.Point3)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="82.499626159668,112.319900512695"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="310.500011444092,156.903369367123"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[5].(BezierSegment.Point1)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="93.4998779296875,106.070304870605"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="321.500255584717,150.653781354427"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point2)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="45.9166679382324,47.1338958740234"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="0.500001271565765,17.3835329413416"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point3)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="45.9166679382324,62.3203811645508"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="0.500001271565765,32.570018231869"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(BezierSegment.Point1)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="45.9166679382324,80.3731918334961"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="0.500001271565765,50.6228327155115"/>
    </PointAnimationUsingKeyFrames>
    </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
    <Path x:Name="path" Fill="White" Stroke="Black" Height="157.673" Margin="15.833,80.43,312.673,0" VerticalAlignment="Top" UseLayoutRounding="False">
    <Path.Data>
    <PathGeometry FillRule="EvenOdd">
    <PathFigure IsClosed="False" StartPoint="95.4166107177734,31.8207855224609">
    <BezierSegment Point1="80.2246704101563,28.8322277069092" Point2="74.7065277099609,34.8731422424316" Point3="60.9165992736816,38.3206100463867"/>
    <BezierSegment Point1="49.8601455688477,41.0847129821777" Point2="45.9166679382324,47.1338958740234" Point3="45.9166679382324,62.3203811645508"/>
    <BezierSegment Point1="45.9166679382324,80.3731918334961" Point2="46.2490005493164,97.9865188598633" Point3="67.4166412353516,108.570281982422"/>
    <BezierSegment Point1="77.1433944702148,113.433639526367" Point2="86.9777145385742,113.421661376953" Point3="98.1666030883789,114.820274353027"/>
    <BezierSegment Point1="105.904724121094,115.787528991699" Point2="120.598495483398,116.477386474609" Point3="127.916290283203,112.319915771484"/>
    <BezierSegment Point1="138.916549682617,106.070320129395" Point2="144.916213989258,106.461006164551" Point3="144.916213989258,77.3202438354492"/>
    <BezierSegment Point1="144.916213989258,62.1065635681152" Point2="146.055877685547,51.0802536010742" Point3="129.916290283203,40.3205909729004"/>
    <BezierSegment Point1="116.019515991211,31.0561294555664" Point2="113.720840454102,32.2929496765137" Point3="95.4166107177734,31.5704154968262"/>
    </PathFigure>
    </PathGeometry>
    </Path.Data>
    </Path>
    <Button Height="31" HorizontalAlignment="Left" Margin="26,30,0,0" VerticalAlignment="Top" Width="89" Content="Go" Click="Go"/>
    </Grid>
    </UserControl>
    Friday, April 30, 2010 7:20 PM
    Moderator

All replies

  • Does it need to remain as a path, or could you take a screen capture with the timeline in the appropriate place?
    Friday, April 30, 2010 3:33 PM
    Moderator
  • It needs to remain a path because it has transparency, and I think taking a screen capture might mess that up...
    Friday, April 30, 2010 4:11 PM
  • In theory you could display the storyboard as a specific point in time, and that would probably give you what you need.

    You can get the storyboard by name from the resources in code, and set it to a certain time point.  Let me know if you need help doing that and I can post an example.

    Friday, April 30, 2010 5:32 PM
    Moderator
  • That sounds like it would work.  And it would be great if you could give me an example.  :-)
    Friday, April 30, 2010 6:54 PM
  • None of the xaml here is very important except the storyboard name which is MyStoryboard, just match the values in the c# code to what you want, the name of the storyboard and the time value to display.

     

    public MainPage()
    {
    // Required to initialize variables
    InitializeComponent();
    var sb = this.Resources["MyStoryboard"] as Storyboard;
    sb.Begin();
    sb.Seek(TimeSpan.FromMilliseconds(500));
    sb.Pause();
    }
    <UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SilverlightApplication41.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
    <Storyboard x:Name="MyStoryboard">
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[6].(BezierSegment.Point2)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="100.639205932617,51.0802154541016"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="301.306285858154,12.6633819937706"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[6].(BezierSegment.Point3)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="84.4996185302734,40.3205528259277"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="285.166698455811,1.90371769666672"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[7].(BezierSegment.Point1)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="70.6028518676758,31.0560913085938"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="271.269939422607,-7.36074405908585"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[4].(BezierSegment.Point2)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="75.1818237304688,116.47737121582"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="303.182201385498,161.060840070248"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[4].(BezierSegment.Point3)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="82.499626159668,112.319900512695"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="310.500011444092,156.903369367123"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[5].(BezierSegment.Point1)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="93.4998779296875,106.070304870605"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="321.500255584717,150.653781354427"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point2)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="45.9166679382324,47.1338958740234"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="0.500001271565765,17.3835329413416"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point3)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="45.9166679382324,62.3203811645508"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="0.500001271565765,32.570018231869"/>
    </PointAnimationUsingKeyFrames>
    <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(BezierSegment.Point1)">
    <EasingPointKeyFrame KeyTime="00:00:00" Value="45.9166679382324,80.3731918334961"/>
    <EasingPointKeyFrame KeyTime="00:00:01" Value="0.500001271565765,50.6228327155115"/>
    </PointAnimationUsingKeyFrames>
    </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
    <Path x:Name="path" Fill="White" Stroke="Black" Height="157.673" Margin="15.833,80.43,312.673,0" VerticalAlignment="Top" UseLayoutRounding="False">
    <Path.Data>
    <PathGeometry FillRule="EvenOdd">
    <PathFigure IsClosed="False" StartPoint="95.4166107177734,31.8207855224609">
    <BezierSegment Point1="80.2246704101563,28.8322277069092" Point2="74.7065277099609,34.8731422424316" Point3="60.9165992736816,38.3206100463867"/>
    <BezierSegment Point1="49.8601455688477,41.0847129821777" Point2="45.9166679382324,47.1338958740234" Point3="45.9166679382324,62.3203811645508"/>
    <BezierSegment Point1="45.9166679382324,80.3731918334961" Point2="46.2490005493164,97.9865188598633" Point3="67.4166412353516,108.570281982422"/>
    <BezierSegment Point1="77.1433944702148,113.433639526367" Point2="86.9777145385742,113.421661376953" Point3="98.1666030883789,114.820274353027"/>
    <BezierSegment Point1="105.904724121094,115.787528991699" Point2="120.598495483398,116.477386474609" Point3="127.916290283203,112.319915771484"/>
    <BezierSegment Point1="138.916549682617,106.070320129395" Point2="144.916213989258,106.461006164551" Point3="144.916213989258,77.3202438354492"/>
    <BezierSegment Point1="144.916213989258,62.1065635681152" Point2="146.055877685547,51.0802536010742" Point3="129.916290283203,40.3205909729004"/>
    <BezierSegment Point1="116.019515991211,31.0561294555664" Point2="113.720840454102,32.2929496765137" Point3="95.4166107177734,31.5704154968262"/>
    </PathFigure>
    </PathGeometry>
    </Path.Data>
    </Path>
    <Button Height="31" HorizontalAlignment="Left" Margin="26,30,0,0" VerticalAlignment="Top" Width="89" Content="Go" Click="Go"/>
    </Grid>
    </UserControl>
    Friday, April 30, 2010 7:20 PM
    Moderator