silverlight 2.0 beta 2 之blend 2.5(6) 逐帧动画

找一个gif动画.选一个存到本地用imagesReady打开.将其中的不同帧的图片取出做成一个png的图形.如下图所示:


 

先把做好的png图片倒入到工程.插入到工作区,然后把image放到canvas中, 在新建立的Canvas的外层制作一个矩形.刚好挡住其中的一个人物.
选中矩形和Canvas设置遮照.

然后制作动画.对Image进行操作.

<Storyboard x:Name="Storyboard1">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="-61.984"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="-121.984"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="-182.984"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="-243.984"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.1000000" Value="-303.966"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.3000000" Value="-366.945"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-429.945"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.7000000" Value="-491.945"/>
                <SplineDoubleKeyFrame KeyTime="00:00:01.9000000" Value="-551.945"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02.1000000" Value="-611.913"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02.3000000" Value="-669.896"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02.5000000" Value="-724.896"/>
                <SplineDoubleKeyFrame KeyTime="00:00:02.7000000" Value="-780.896"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

采用DiscreteDoubleKeyFrame设置其X坐标.RepeatBehavior="forever" 动画永久反复播放

<Storyboard x:Name="Storyboard1" RepeatBehavior="forever">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="image" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:00.3000000" Value="-61.984"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:00.5000000" Value="-121.984"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:00.7000000" Value="-182.984"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:00.9000000" Value="-243.984"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:01.1000000" Value="-303.966"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:01.3000000" Value="-366.945"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-429.945"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:01.7000000" Value="-491.945"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:01.9000000" Value="-551.945"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:02.1000000" Value="-611.913"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:02.3000000" Value="-669.896"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:02.5000000" Value="-724.896"/>
                <DiscreteDoubleKeyFrame KeyTime="00:00:02.7000000" Value="-780.896"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

效果


demo DOWNLOAD