Here is a simple animation i wrote in silverlight

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
	x:Class="BouncingBall.MainPage"
	Width="640" Height="480">
	<UserControl.Resources>
		<Storyboard x:Name="Bounce" RepeatBehavior="Forever" AutoReverse="True">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Ball">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="0:0:1" Value="-144" KeySpline="0,1,1,1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>

	<i:Interaction.Triggers>
		<i:EventTrigger>
			<ei:ControlStoryboardAction Storyboard="{StaticResource Bounce}"/>
		</i:EventTrigger>
	</i:Interaction.Triggers>

	<Canvas x:Name="LayoutRoot" Background="#FFCADFFF">
		<Ellipse x:Name="Ball" Stroke="Black" Width="100" Height="100" Fill="#FFF31D1D" Canvas.Top="190" Canvas.Left="0">
			<Ellipse.RenderTransform>
				<CompositeTransform/>
			</Ellipse.RenderTransform>
		</Ellipse>
	</Canvas>

</UserControl>

Notice that when the ball goes downward the bottom of the ball is flat/chopped, and when the ball goes upwards the top of the ball is flat/chopped off, any idea?

Slow motion recording of what i see on my screen (HP 2159m) Notice the ball gets flat at the bottom when it goes downward

Update: I added enable hardware acceleration and it fixed the problem.

Conversation about this issue on stackoverflow.com: http://stackoverflow.com/questions/5423288/why-does-the-ball-in-this-animation-look-chopped-when-it-changes-position

Add a Comment

You must log on to comment.