Re: Creating gif image thru Silverlight

10-07-2008 5:32 AM |

 At the moment Silverlight doesn't support gif images.

Example Page.xaml for fading in and rolling an image (http://www.gnu.org/software/3dldf/graphics/sphere.png):

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Anim.Page"
    Width="640" Height="480">
    <UserControl.Resources>
        <Storyboard x:Name="Roll">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="11.984"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="33.753"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="58.871"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="91.627"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="16"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="40"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="48"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="72"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.4000000" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="-4"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="Fade" AutoReverse="True" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Image Margin="8,8,0,0" VerticalAlignment="Top" Width="100" Height="100" HorizontalAlignment="Left" Source="sphere.png" RenderTransformOrigin="0.5,0.5" x:Name="image">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Grid>
</UserControl>