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();
}
Mike Tucker
http://blog.kkrankk.com