好玩的WPF第三彈：顫抖吧，地球！消失吧，地球！

原文: 好玩的WPF第三彈：顫抖吧，地球！消失吧，地球！

版權聲明：轉載請聯系本人，感謝配合！本站位址：http://blog.csdn.net/nomasp https://blog.csdn.net/NoMasp/article/details/46476421

我承認這一篇比較标題黨，不過下面這個GIF貌似也和适合這個标題嘛。

（畫質比較爛是因為CSDN的部落格圖檔限制在2M，是以我設定的是20幀，時間也很短，大家可以自己把項目拷回去慢慢看）

這個最終設計出來的樣式：

中間的小圓點是一個Button，外面是一個經過切割的Grid，Grid裡面還有一個Image。

其中在加上Image（地球圖檔）之前，Button還是很大的，是以給他設計了漸變色。

<Button Padding="20" Foreground="White" BorderBrush="#FFD8A00A" 
     FontSize="16" Click="OnClick" Margin="100" Width="20" Height="20" 
     RenderTransformOrigin="0.54,-0.058">
   <Button.Background>
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="#FF45ADB7" Offset="1"/>
       </LinearGradientBrush>
   </Button.Background>
   <Button.Template>
       <ControlTemplate TargetType="{x:Type Button}">
           <Grid>
               <Ellipse x:Name="bg" Fill="{TemplateBinding Background}" 
               Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" />

               <Ellipse x:Name="fr" Opacity="0" >
                    <Ellipse.Fill>
                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                             <GradientStop Color="#CCFFFFFF" Offset="0"/>
                             <GradientStop Offset="1"/>
                             <GradientStop Color="#7FFFFFFF" Offset="0.392"/>
                          </LinearGradientBrush>
                     </Ellipse.Fill>
              </Ellipse>

             <ContentPresenter x:Name="ContentPresenter" Margin="{TemplateBinding Padding}" 
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
          </Grid>

          <ControlTemplate.Triggers>
               <Trigger Property="IsMouseOver" Value="True" >
                     <Setter TargetName="fr" Property="Opacity" Value="1"/>
                     </Trigger>
               </ControlTemplate.Triggers>
          </ControlTemplate>
     </Button.Template>
</Button>           

<Image Source="Earth.jpg" />           

上面這兩個控件都放到Grid内部。

<Grid x:Name="layoutroot">
    <Grid.Resources>
        <Storyboard x:Key="std">
            <DoubleAnimation From="1" To="0" Duration="0:0:6"
                Storyboard.TargetName="layoutroot"
                Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[1].Offset"/>
            <DoubleAnimation Duration="0:0:4.5" BeginTime="0:0:1.5" From="1" To="0"
                Storyboard.TargetName="layoutroot"
                Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[2].Offset"/>
            <ColorAnimation Duration="0" To="#00000000" Storyboard.TargetName="layoutroot"
                Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[2].Color"/>
        </Storyboard>
    </Grid.Resources>   
    <Grid.OpacityMask>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF000000" Offset="0"/>
            <GradientStop Color="#FF000000" Offset="1"/>
            <GradientStop Color="#FF000000" Offset="1"/>
        </LinearGradientBrush>
    </Grid.OpacityMask>
    <Grid.Clip>
        <EllipseGeometry Center="150 150" RadiusX="150" RadiusY="150"/>
    </Grid.Clip>
    <Grid.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFCFCFC" Offset="0.003"/>
            <GradientStop Color="#FF76253C" Offset="1"/>
            <GradientStop Color="#FF29769D" Offset="0.318"/>
            <GradientStop Color="#FFA94444" Offset="0.84"/>
            <GradientStop Color="#FFB2B62F" Offset="0.488"/>
            <GradientStop Color="#FF9B2BD3" Offset="0.666"/>
            <GradientStop Color="#FF5CC569" Offset="0.151"/>
        </LinearGradientBrush>
    </Grid.Background>
</Grid>           

上面這些都是給Grid設定的漸變色，有了Image也沒太大用了。

真正有用的是Resources。

背景檔案中的抖動效果如下（在上一篇詳細介紹了抖動過程）：

// 全局變量
private double left = 0;
private double top = 0;
private Storyboard storyboard = new Storyboard();

// 初始化
left = mainWindow.Left;
top = mainWindow.Top;

private void DoubleAnimation()
{
    // 視窗抖動效果
    DoubleAnimation doubleAnimationL1 = new DoubleAnimation();
    doubleAnimationL1.BeginTime = TimeSpan.FromSeconds(0.01);
    doubleAnimationL1.Duration = TimeSpan.FromSeconds(0.01);
    doubleAnimationL1.From = mainWindow.Left;
    doubleAnimationL1.To = mainWindow.Left - 6;
    doubleAnimationL1.EasingFunction = new BounceEase() { Bounces = 12, EasingMode = EasingMode.EaseInOut };
    Storyboard.SetTarget(doubleAnimationL1, mainWindow);
    Storyboard.SetTargetProperty(doubleAnimationL1, new PropertyPath("(Left)"));

    DoubleAnimation doubleAnimationL2 = new DoubleAnimation();
    doubleAnimationL2.BeginTime = TimeSpan.FromSeconds(0.001);
    doubleAnimationL2.Duration = TimeSpan.FromSeconds(0.01);
    doubleAnimationL2.From = mainWindow.Left;
    doubleAnimationL2.To = mainWindow.Left + 6;
    doubleAnimationL2.EasingFunction = new BounceEase() { Bounces = 12, EasingMode = EasingMode.EaseInOut };
    Storyboard.SetTarget(doubleAnimationL2, mainWindow);
    Storyboard.SetTargetProperty(doubleAnimationL2, new PropertyPath("(Left)"));

    DoubleAnimation doubleAnimationT1 = new DoubleAnimation();
    doubleAnimationT1.BeginTime = TimeSpan.FromSeconds(0.01);
    doubleAnimationT1.Duration = TimeSpan.FromSeconds(0.01);
    doubleAnimationT1.From = mainWindow.Top;
    doubleAnimationT1.To = mainWindow.Top + 6; ;
    doubleAnimationT1.EasingFunction = new BounceEase() { Bounces = 12, EasingMode = EasingMode.EaseInOut };
    Storyboard.SetTarget(doubleAnimationT1, mainWindow);
    Storyboard.SetTargetProperty(doubleAnimationT1, new PropertyPath("(Top)"));

   DoubleAnimation doubleAnimationT2 = new DoubleAnimation();
   doubleAnimationT2.BeginTime = TimeSpan.FromSeconds(0.01);
   doubleAnimationT2.Duration = TimeSpan.FromSeconds(0.01);
   doubleAnimationT2.From = mainWindow.Top;
   doubleAnimationT2.To = mainWindow.Top - 6;
   doubleAnimationT2.EasingFunction = new BounceEase() { Bounces = 12, EasingMode = EasingMode.EaseInOut };
   Storyboard.SetTarget(doubleAnimationT2, mainWindow);
   Storyboard.SetTargetProperty(doubleAnimationT2, new PropertyPath("(Top)"));

   storyboard.Children.Add(doubleAnimationL1);
   storyboard.Children.Add(doubleAnimationL2);
   storyboard.Children.Add(doubleAnimationT1);
   storyboard.Children.Add(doubleAnimationT2);

   storyboard.RepeatBehavior = RepeatBehavior.Forever;
   storyboard.Completed += new EventHandler(storyboard_Completed);
   storyboard.Begin(this, true);
}

private void storyboard_Completed(object sender, EventArgs e)
{
    // 解除綁定 
    storyboard.Remove(this);
    // 解除TextWindow視窗 
    storyboard.Children.Clear();
    //grid.Children.Clear();
    // 恢複視窗初始位置
    mainWindow.Left = left;
    mainWindow.Top = top;
}           

背景檔案中的消失效果如下：

// 全局變量
Storyboard storyboard2 = null;

// 初始化
storyboard2 = (System.Windows.Media.Animation.Storyboard)layoutroot.Resources["std"];
storyboard2.Completed += (t, r) => this.Close();

this.layoutroot.Loaded += (aa, bb) =>
{
     EllipseGeometry ellipsegeometry = (EllipseGeometry)this.layoutroot.Clip;
     double dx = layoutroot.ActualWidth / 2d;
     double dy = layoutroot.ActualHeight / 2d;
     ellipsegeometry.Center = new Point(dx, dy);
     ellipsegeometry.RadiusX = dx;
     ellipsegeometry.RadiusY = dy;
};           

然後是Button的OnClick事件：

private void OnClick(object sender, RoutedEventArgs e)
{
    if (storyboard2 != null)
    {
        storyboard2.Begin();
    }         
    DoubleAnimation();
}           

源碼的話，上面也都有了。GIF我就不再上傳咯，畢竟2M的限制太無趣了。

感謝您的通路，希望對您有所幫助。 歡迎大家關注、收藏以及評論。

為使本文得到斧正和提問，轉載請注明出處：

http://blog.csdn.net/nomasp