代码之家  ›  专栏  ›  技术社区  ›  Johan Danforth

WPF或Silverlight中的屏幕闪烁效果

  •  5
  • Johan Danforth  · 技术社区  · 16 年前

    我正在寻找一种方法,为我正在开发的全屏幕WPF应用程序创建一种“看起来很酷”的效果——一种“屏幕闪烁”效果,可以在整个屏幕上设置动画或移动,以提供闪亮的显示体验。我正在考虑创建一个带有高亮渐变和透明背景的大矩形,可以在整个屏幕上设置动画。你知道如何在XAML中有效地实现这一点吗?

    4 回复  |  直到 16 年前
        1
  •  6
  •   Johan Danforth    16 年前

    我想出了一个看起来不错的解决方案。我在Blend 2.0 SP1中记录的一些XAML示例如下所示:

    <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ScreenGlintApplication.Window1"
        x:Name="Window"
        Title="Window1"
        Width="500" Height="250" Background="#FF000000" Foreground="#FF3EE229" >
    
        <Grid x:Name="LayoutRoot">
            <TextBlock TextWrapping="Wrap" FontSize="40" >
            <Run Text="This is some sample text to have something to work with. Have a nice day! /Johan"/>
            </TextBlock>
            <Canvas Panel.ZIndex="99" >
            <Rectangle x:Name="ScreenGlintRect"  
                Width="{Binding Path=ActualWidth, ElementName=Window, Mode=Default}" 
                Height="{Binding Path=ActualHeight, ElementName=Window, Mode=Default}" 
                Opacity="0.4" >
                <Rectangle.Triggers> 
                    <EventTrigger RoutedEvent="Rectangle.Loaded"> 
                      <BeginStoryboard> 
                        <Storyboard> 
                        <DoubleAnimation Storyboard.TargetName="ScreenGlintRect" 
                        Storyboard.TargetProperty="(Canvas.Left)"
                        From="-500" To="1000" Duration="0:0:2" />
                        </Storyboard> 
                      </BeginStoryboard> 
                    </EventTrigger> 
              </Rectangle.Triggers> 
    
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                        <GradientStop Color="Transparent" Offset="0.0" />
                        <GradientStop x:Name="GlintColor" Color="LightGreen" Offset="0.50" />
                        <GradientStop Color="Transparent" Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            </Canvas>
        </Grid>
    </Window>
    

    一个选项是在代码隐藏中执行此操作,如果您希望对动画进行细粒度控制,这是非常整洁的。例如:

        ScreenGlintRect.Width = Width;
        ScreenGlintRect.Height = Height;
        var animation = new DoubleAnimation
        {
            Duration = new Duration(TimeSpan.FromSeconds(2)),
            From = (-Width),
            To = Width * 2
        };
        ScreenGlintRect.BeginAnimation(Canvas.LeftProperty, animation);
    

    这是我正在使用的代码,对我来说已经足够好了。如果你有HW加速,你可以尝试给它添加一些模糊。您可能需要调整代码并隐藏/显示矩形,但基本上就是这样。

        2
  •  2
  •   LBugnion    16 年前

    很容易将任何透明面板放置在主栅格的“顶部”,并为放置在面板中的元素设置动画。要将面板放在“顶部”,只需将其放在XAML层次结构的末尾,任何其他元素之后。或者,您可以使用“ZIndex”属性。

    洛朗

        3
  •  0
  •   Artur Carvalho    16 年前

    你可以像LBugnion说的那样在上面放一个透明的面板,但别忘了有很多方法可以做到这一点:

    1. 将配电盘的可见性更改为“隐藏”。
    2. 将不透明度更改为0。
    3. 将颜色的Alpha更改为0。

    如果你只改变Alpha值,它仍然是 可点击 即使你看不到颜色。

    离题,但:尽量使效果微妙,可能有一个开/关选项。

        4
  •  0
  •   Thomas daign    16 年前

    附属于 this article