WPF简单画笔动画会导致性能问题

时间:2014-09-01 06:23:42

标签: wpf performance animation

我创建了一个简单的动画,可以旋转用作椭圆背景的线性渐变画笔。我在4个椭圆上使用它,单独平均需要大约6%的CPU。有什么方法可以改善性能吗? (部分椭圆是故意隐藏的。)

<Window x:Class="MyAnimation.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:testDisplayAccessPoints="clr-namespace:TestDisplayAccessPoints"
    xmlns:zoomAndPan="clr-namespace:ZoomAndPan;assembly=ZoomAndPan"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

    Title="MainWindow" Height="1100" 
          Width="1100">

<Window.Resources>
    <Storyboard x:Key="Storyboard1" RepeatBehavior="Forever">
        <DoubleAnimation Storyboard.TargetProperty="(Shape.Stroke).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ellipseLow"
                                       Timeline.DesiredFrameRate="12" From="0" To="359" Duration="0:00:3.0" />
        <DoubleAnimation Storyboard.TargetProperty="(Shape.Stroke).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ellipseMedium"
                            Timeline.DesiredFrameRate="12" From="0" To="359" Duration="0:00:3.0" />
        <DoubleAnimation Storyboard.TargetProperty="(Shape.Stroke).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ellipseHigh"
                            Timeline.DesiredFrameRate="12" From="0" To="359" Duration="0:00:3.0" />
        <DoubleAnimation Storyboard.TargetProperty="(Shape.Stroke).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ellipseVeryHigh"
                            Timeline.DesiredFrameRate="12" From="0" To="359" Duration="0:00:3.0" />
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
    </EventTrigger>
</Window.Triggers>
            <Grid x:Name="BackgroundGrid" Background="Black">
                <Ellipse x:Name="ellipseLow" HorizontalAlignment="Left" Height="800" Margin="-720,0,0,0" StrokeThickness="5" VerticalAlignment="Center" Width="1600">
                    <Ellipse.Stroke>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <LinearGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                                    <SkewTransform CenterY="0.5" CenterX="0.5"/>
                                    <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </LinearGradientBrush.RelativeTransform>
                            <GradientStop Color="White" Offset="0"/>
                            <GradientStop Color="Gold" Offset="0.2"/>
                            <GradientStop Color="Gold" Offset="0.8"/>
                            <GradientStop Color="White" Offset="1"/>
                        </LinearGradientBrush>
                    </Ellipse.Stroke>
                </Ellipse>
                <Ellipse x:Name="ellipseMedium" HorizontalAlignment="Left" Height="600" Margin="-520,0,0,0" StrokeThickness="5" VerticalAlignment="Center" Width="1200">
                    <Ellipse.Stroke>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <LinearGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                                    <SkewTransform CenterY="0.5" CenterX="0.5"/>
                                    <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </LinearGradientBrush.RelativeTransform>
                            <GradientStop Color="White" Offset="0"/>
                            <GradientStop Color="Gold" Offset="0.2"/>
                            <GradientStop Color="Gold" Offset="0.8"/>
                            <GradientStop Color="White" Offset="1"/>
                        </LinearGradientBrush>
                    </Ellipse.Stroke>
                </Ellipse>
                <Ellipse x:Name="ellipseHigh" HorizontalAlignment="Left" Height="400" Width="800" Margin="-320,0,0,0" StrokeThickness="5" VerticalAlignment="Center" >
                    <Ellipse.Stroke>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <LinearGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                                    <SkewTransform CenterY="0.5" CenterX="0.5"/>
                                    <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </LinearGradientBrush.RelativeTransform>
                            <GradientStop Color="White" Offset="0"/>
                            <GradientStop Color="Gold" Offset="0.2"/>
                            <GradientStop Color="Gold" Offset="0.8"/>
                            <GradientStop Color="White" Offset="1"/>
                        </LinearGradientBrush>
                    </Ellipse.Stroke>
                </Ellipse>
                <Ellipse x:Name="ellipseVeryHigh" HorizontalAlignment="Left" Height="200" Margin="-120,0,0,0" StrokeThickness="5" VerticalAlignment="Center" Width="400">
                    <Ellipse.Stroke>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <LinearGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                                    <SkewTransform CenterY="0.5" CenterX="0.5"/>
                                    <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </LinearGradientBrush.RelativeTransform>
                            <GradientStop Color="White" Offset="0"/>
                            <GradientStop Color="Gold" Offset="0.2"/>
                            <GradientStop Color="Gold" Offset="0.8"/>
                            <GradientStop Color="White" Offset="1"/>
                        </LinearGradientBrush>
                    </Ellipse.Stroke>
                </Ellipse>
    </Grid>
</Window>

1 个答案:

答案 0 :(得分:1)

我不确定它是否会对性能产生影响,但是对于可读性是肯定的。所有日食元素的一种风格,一种中风资源等。

    <Window.Resources>
    <Storyboard x:Key="Storyboard1" RepeatBehavior="Forever">
        <DoubleAnimation Storyboard.TargetProperty="(Shape.Stroke).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ellipseLow"
                                   Timeline.DesiredFrameRate="12" From="0" To="359" Duration="0:00:3.0" />
        <DoubleAnimation Storyboard.TargetProperty="(Shape.Stroke).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ellipseMedium"
                        Timeline.DesiredFrameRate="12" From="0" To="359" Duration="0:00:3.0" />
        <DoubleAnimation Storyboard.TargetProperty="(Shape.Stroke).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ellipseHigh"
                        Timeline.DesiredFrameRate="12" From="0" To="359" Duration="0:00:3.0" />
        <DoubleAnimation Storyboard.TargetProperty="(Shape.Stroke).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ellipseVeryHigh"
                        Timeline.DesiredFrameRate="12" From="0" To="359" Duration="0:00:3.0" />
    </Storyboard>
    <LinearGradientBrush x:Key="LinearBrush1" EndPoint="0.5,1" StartPoint="0.5,0">
        <LinearGradientBrush.RelativeTransform>
            <TransformGroup>
                <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                <SkewTransform CenterY="0.5" CenterX="0.5"/>
                <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5"/>
                <TranslateTransform/>
            </TransformGroup>
        </LinearGradientBrush.RelativeTransform>
        <GradientStop Color="White" Offset="0"/>
        <GradientStop Color="Gold" Offset="0.2"/>
        <GradientStop Color="Gold" Offset="0.8"/>
        <GradientStop Color="White" Offset="1"/>
    </LinearGradientBrush>
    <Style TargetType="Ellipse">
        <Setter Property="Stroke" Value="{StaticResource LinearBrush1}"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="StrokeThickness" Value="5"/>
    </Style>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
    </EventTrigger>
</Window.Triggers>
<Grid x:Name="BackgroundGrid" Background="Black">
    <Ellipse x:Name="ellipseLow" Height="800" Margin="-720,0,0,0" Width="1600"/>
    <Ellipse x:Name="ellipseMedium" Height="600" Margin="-520,0,0,0"  Width="1200"/>
    <Ellipse x:Name="ellipseHigh" Height="400" Width="800" Margin="-320,0,0,0"/>
    <Ellipse x:Name="ellipseVeryHigh"  Height="200" Margin="-120,0,0,0" Width="400"/>
</Grid>