Why does the ball in this animation look chopped when it changes position?

Here is a link to the animation: http://www.microdivision.com/blog/Strange-Silverlight-Behavior

<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="{Stati开发者_Python百科cResource 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>

As answered by SharpGIS at http://forums.silverlight.net/forums/t/223659.aspx enabling hardware acceleration solved the problem.

For HTML modify the Silverlight control to include the following param:

<param name="EnableGPUAcceleration" value="true" />

I think this may be the result of how Silverlight is adapting during playback. On my machine the ball appears unchopped most of the time despite the fact that I have an older machine with hardly a good CPU/GPU. Silverlight uses only CPU for rendering (except for 3D perspective operations when told to do so) and its time-based animation allows it to cut frames in order to adapt to the host client. It is known for choppiness as a result. Silverlight 5 promises GPU support.

Any reason you are using a spline to create the bounce instead of this?

<Storyboard x:Name="Bounce" RepeatBehavior="Forever" AutoReverse="True">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Ball">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-144">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BounceEase EasingMode="EaseIn" Bounciness="0" Bounces="1"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>