Question

我在silverlight中创造了一个无尽的“地球旋转”动画，动画两张照片。如果我只使用两张图片进行动画处理，则动画使用2-5％的CPU。这似乎对我而言正常。如果我添加一些简单的叠加效果（带有渐变的弧），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>

Image of CPU heavy animation

Answer 1

我只想留下一些话，我对问题的解决方案是什么以及我的想法。首先，我无法识别XAML中的任何错误或明显错误。

我不知道为什么，但在动画中填充渐变的任何“弧”会大大增加CPU负荷。所以我不建议这样做。我个人的想法是，银光不是长动画或长动画。这都是关于简短的UI魔术。

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

我真的很喜欢银光，但这种行为让我失望了。

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

1 个答案: