文档章节

好玩的WPF第三弹:颤抖吧,地球!消失吧,地球!

NoMasp
 NoMasp
发布于 2015/09/08 21:47
字数 899
阅读 26
收藏 0

我承认这一篇比较标题党,不过下面这个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


版权声明:本文为 NoMasp柯于旺 原创文章,未经许可严禁转载!欢迎访问我的博客:http://blog.csdn.net/nomasp

本文转载自:http://blog.csdn.net/nomasp/article/details/46476421

NoMasp
粉丝 7
博文 334
码字总数 0
作品 0
镇江
程序员
私信 提问
nomasp 博客导读:Lisp/Emacs、Algorithm、Android

版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https://blog.csdn.net/NoMasp/article/details/44966625 Profile Introduction to Blog 您能看到这篇博客导读...

nomasp
2015/09/17
0
0
一万五千名科学家联名发布:有史以来最大规模「环保警告」

简评:移民外星太过遥远,地球是我们现有的唯一家园,但不得不承认,地球早已千疮百孔,几十亿双眼睛每天盯着股票,新生的婴儿在喝着毒药,183 个国家 15364 名科学家告诉我们,如此下去,我...

极小光
2017/11/23
0
0
【043 影评|安德的游戏,宏大的故事粗浅的表达】

一共看了两次这个电影,一次是自己一个人看的,另一次推荐给曾先生一起看。 影片简介 电影虚构了虫人再次攻击地球之前的一段时间,地球人寻找极有天赋的少年进行培训。安德维京在历次的表现中...

ChallengerWu
2018/10/21
0
0
地球生命死亡周期是2600万年灭绝一次,存活的人类只有2000多人

关于地球生命死亡周期,科学家们的争论已经持续超过了30年。现在,科学家们根据彗星和小行星的轨迹和地球上的痕迹来看,彗星和小行星雨的多重轰炸是地球生命的灾难,所以,科学家们得出的结论...

拉米拉科技
2017/12/29
0
0
2019春节档推荐看什么电影?《流浪地球》《飞驰人生》?

过春节以来一直想看电影,但一直没看,就先看下别人推荐的。 别人给今年的贺岁档划了三个阵营, 第一阵营:《流浪地球》、《疯狂的外星人》、《飞驰人生》; 第二阵营《熊出没原始时代》、《...

阿小庆
02/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

zk中ToBeAppliedRequestProcessor解析

ToBeAppliedRequestProcessor在Leader中 在已处理事务和最后处理事务处理器之间,处理器链上下一个是FinalRequestProcessor public void processRequest(Request request) throws RequestPro...

writeademo
34分钟前
3
0
Allegro快捷键设置-PCB环境

立题简介: 内容:简单介绍Allegro绘制的PCB环境下的快捷键; 来源:实际使用得出; 作用:对Allegro绘制PCB快捷键进行介绍; PCB环境:Cadence 16.6; 立题详解: 对“allegro”板而言,其在...

demyar
35分钟前
3
0
idea maven web项目启动build时报错java.lang.NullPointerException

之前还好好的,重启一下idea就报这个错了,大概率是tomcat没杀掉端口被占用了,在tomcat配置中更换一下sever端口就好了

宇辰OSC
39分钟前
3
0
weed3-2.3.1.查询之输出

Weed3 一个超轻量级ORM框架(只有0.1Mb哦) 源码:https://github.com/noear/weed3 源码:https://gitee.com/noear/weed3 查询可是个复杂的话题了,可能我们80%的数据库处理都在查询。 今天先...

刘之西东
39分钟前
3
0
【Android JetPack系列】数据绑定:DataBinding

参考MVVM

Agnes2017
47分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部