Silverlight 5渐变地球旋转动画消耗了大量的CPU资源。

Question

我在silverlight中创作了一个无休止的“地球旋转”动画，其中有两幅画。如果我只使用这两幅图片动画，动画使用2-5%的CPU.我觉得这很正常，也很正常。如果我添加一些简单的覆盖效果(包含渐变的Arcs)，CPU使用率将上升到25%-30%，这是非常多的。

这是密码。我添加了注释，“坏代码”在这里开始和结束。

我的问题是：如何优化这个动画？为什么叠加渐变使得CPU要求如此之高？

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
    mc:Ignorable="d"
    x:Class="SpinningGlobe.MainControl"
    d:DesignWidth="640" d:DesignHeight="480" Height="450" Width="450">

    <UserControl.Resources>
        <Storyboard x:Name="Vordergrund_Story"  RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Vordergrund">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:01:59" Value="877"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Hintergrund">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:01:59" Value="-877"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <!-- 1754 -->
    <Grid x:Name="LayoutRoot" Background="Transparent" Height="450" Width="450">
        <!-- Dunkle Weltkarte nach links-->
        <Canvas x:Name="Hintergrund" Margin="-507,10,-370,10" RenderTransformOrigin="0.5,0.5" d:IsLocked="True">
            <Canvas.RenderTransform>
                <CompositeTransform/>
            </Canvas.RenderTransform>
            <Image Margin="0,10,0,10" Source="WELT_DUNKEL.png" Stretch="None" HorizontalAlignment="Left"/>
            <Image Margin="877,10,0,10" Source="WELT_DUNKEL.png" Stretch="None" HorizontalAlignment="Left"/>
        </Canvas>
        <!-- Helle Weltkarte nach rechts-->
        <Canvas x:Name="Vordergrund" Margin="-1247,10,0,10" d:IsLocked="True">
            <Canvas.RenderTransform>
                <CompositeTransform/>
            </Canvas.RenderTransform>
            <Image Margin="0,10,0,10" Source="WELT_HELL.png" Stretch="None" HorizontalAlignment="Left"/>
            <Image Margin="877,10,0,10" Source="WELT_HELL.png" Stretch="None" HorizontalAlignment="Left"/>
        </Canvas>


        <!-- HERE STARTS THE HEAVY CPU USAGE-->


        <!-- Äusserer, weisser "Wolkenring"-->
        <ed:Arc ArcThickness="225" ArcThicknessUnit="Pixel" EndAngle="360" HorizontalAlignment="Left" Height="450" Margin="0,0,0,0" Stretch="None" Stroke="Transparent" StartAngle="0" UseLayoutRounding="False" VerticalAlignment="Top" Width="450">
            <ed:Arc.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="Transparent" Offset="0.935"/>
                    <GradientStop Color="#5BFFFFFF" Offset="1"/>
                </RadialGradientBrush>
            </ed:Arc.Fill>
        </ed:Arc>
        <!-- Äusserer, weisser "Wolkenring", aber nur 1 Pixel breit, so das nach aussen eine schärfere Abgrenzung stattfindet-->
        <ed:Arc ArcThickness="1" ArcThicknessUnit="Pixel" EndAngle="360" HorizontalAlignment="Left" Height="450" Margin="0,0,0,0" Stretch="None" Stroke="Transparent" StartAngle="0" UseLayoutRounding="False" VerticalAlignment="Top" Width="450" d:IsLocked="True">
            <ed:Arc.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="Transparent" Offset="0.935"/>
                    <GradientStop Color="#5BFFFFFF" Offset="1"/>
                </RadialGradientBrush>
            </ed:Arc.Fill>
        </ed:Arc>

        <ed:Arc ArcThickness="300" ArcThicknessUnit="Pixel" EndAngle="360" HorizontalAlignment="Left" Height="900" Margin="-450,-230,0,-220" Stretch="None" Stroke="Transparent" StartAngle="0" UseLayoutRounding="False" VerticalAlignment="Top" Width="900" Opacity="0.82" d:IsLocked="True">
            <ed:Arc.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="#00000000" Offset="0.625"/>
                    <GradientStop Offset="0.884" Color="Black"/>
                </RadialGradientBrush>
            </ed:Arc.Fill>
        </ed:Arc>
        <ed:Arc ArcThickness="300" ArcThicknessUnit="Pixel" EndAngle="360" HorizontalAlignment="Left" Height="900" Margin="-120,-230,-330,-220" Stretch="None" Stroke="Transparent" StartAngle="0" UseLayoutRounding="False" VerticalAlignment="Top" Width="900" Opacity="0.82" d:IsLocked="True">
            <ed:Arc.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="#00FFFFFF" Offset="0.6"/>
                    <GradientStop Offset="0.884" Color="#A3FFFFFF"/>
                </RadialGradientBrush>
            </ed:Arc.Fill>
        </ed:Arc>


        <!-- HERE ENDS THE HEAVY CPU USAGE-->

        <!-- Maskierung in Form einer Elipse (Aufheben, um alles zu sehen!)-->
        <Grid.Clip>
            <EllipseGeometry RadiusX="225" RadiusY="225" Center="225,225"/>
        </Grid.Clip>

    </Grid>

</UserControl> 

​

​

Answer 1

我只想说几句话，我对问题的解决办法是什么，我是怎么想的。首先，我无法识别XAML中的任何错误或明显错误。

我不知道为什么，但任何“弧线”，充满了一个渐变动画，增加了沉重的CPU负荷。所以我不建议你这么做。我个人的想法是，银光只是不适合长或更长的动画制作。这都是关于短暂的UI魔术。

我的解决方案是，我将动画中的每个框架元素呈现到一个PNG中，并将其用作图片，放在动画上。例如，右边的黑色阴影是一个带有渐变的银光弧，现在是一个普通的PNG。看起来是一样的。不需要CPU。

我真的很喜欢silverlight，但是这种行为让我有些失望。