为什么这个动画中的球在改变位置时会被切断?

时间:2011-03-24 17:47:07

标签: animation silverlight-4.0

以下是动画的链接: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="{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>

2 个答案:

答案 0 :(得分:1)

正如SharpGIS在http://forums.silverlight.net/forums/t/223659.aspx的回答,启用硬件加速解决了这个问题。

对于HTML,修改Silverlight控件以包含以下参数:

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

答案 1 :(得分:0)

我认为这可能是Silverlight在播放过程中如何适应的结果。在我的机器上,尽管我的旧机器几乎没有良好的CPU / GPU,但球大部分时间都显得不亮。 Silverlight仅使用CPU进行渲染(当被告知这样做时,3D透视操作除外),并且基于时间的动画允许它剪切帧以适应主机客户端。众所周知,结果是不稳定的。 Silverlight 5承诺支持GPU。

您是否使用样条曲线创建弹跳而不是此?

<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>