Silverlight 2.0 - Image flicker with Rotate and Scale animation

05-04-2008 12:00 PM |

I have a basic animation that both scales & rotates an image.  If I run either the scale or the rotate, all is well.  If I run them together after a few seconds I start to see a flicker, and eventually the whole image turns black.  The image is a rather large JPG (2835x1375) that is clipped to a 800x100 region.  Below is the XAML and basic code to start the animation.  I'm fairly sure my PC is beefy enough to handle this (P4 3.2GhZ, 4GB RAM, ATI Radeon X800) running Vista Ultimate SP1.  I've also tried limiting the framerate, but no joy there.  Your help is appreciated!!

Page.Xaml:

 <UserControl x:Class="SilverBlog.Page" xmlns="http://schemas.microsoft.com/client/2007"  xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml Width="800" Height="1000" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d">
<UserControl.Resources>

<Storyboard x:Name="bgZoomAndSpin">
<DoubleAnimationUsingKeyFramesAutoReverse="True" RepeatBehavior="Forever"Storyboard.TargetName="bgImage"Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:01:00" Value="5"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames AutoReverse="True" RepeatBehavior="Forever"  Storyboard.TargetName="bgImage"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:01:00" Value="5"/>
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFramesRepeatBehavior="Forever"Storyboard.TargetName="bgImage"Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:02:30" Value="360"/>
</DoubleAnimationUsingKeyFrames>

</Storyboard>
</UserControl.Resources>

<Grid x:Name="grid" Background="#7F000000" Width="800" Height="1000" >
<Canvas x:Name="bgRegion" Width="800" Height="100" VerticalAlignment="Top" HorizontalAlignment="Left">
<Canvas.Clip>
<RectangleGeometry x:Name="bgRegionClip" Rect="0,0,800,100"/>
</Canvas.Clip>

<Image Source="space4-norm.jpg"Opacity="1" x:Name="bgImage"Stretch="UniformToFill"Height="820"Width="820"Canvas.Top="-360"Canvas.Left="-10" RenderTransformOrigin="0.5, 0.5">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Canvas>
</Grid>
</UserControl>

Page.Xaml.cs:

public Page() {
  InitializeComponent();
  this.Host.Settings.MaxFrameRate = 30;
  this.Loaded += newRoutedEventHandler(Page_Loaded);
}

void Page_Loaded(objectsender, RoutedEventArgse) {
  bgZoomAndSpin.Begin();
}

Re: Silverlight 2.0 - Image flicker with Rotate and Scale animation

05-06-2008 4:28 AM |

Hello, thanks for reporting this issue. This is a known problem which we're investigating.

Re: Re: Silverlight 2.0 - Image flicker with Rotate and Scale animation

05-06-2008 4:54 PM |

Ok thanks.  For my understanding, is the issue with running a rotate & scale together?  Because it seems (now) to happen if I just run the Rotate animation.  Or is it something w/ the large JPG and a clip region?

 Thanks!