精华内容
下载资源
问答
  • WPF 窗体跳转动画按钮特效
  • WPF实现动画效果

    2020-06-03 17:53:57
    今天我们尝试用WPF实现动画效果,我们都知道一般传统的动画形式主要是用计时器以及一些事件处理对象的属性来实现动画的. 而WPF则是使用计时器和自定义的绘图逻辑以及对象自带的属性来实现动画的. 实现WPF动画的基本...

    WPF动画

    今天我们尝试用WPF实现动画效果,我们都知道一般传统的动画形式主要是用计时器以及一些事件处理对象的属性来实现动画的.

    而WPF则是使用计时器和自定义的绘图逻辑以及对象自带的属性来实现动画的.

    实现WPF动画的基本过程

    实现动画的过程就和拍电影一样,首先确定剧本,然后修改剧本,随后确定演员角色,最后开拍

    1,在XAML中将grid改为canvas并取名name=“canvas”

    在window设计界面里面,通过Loaded="Canvas_Loaded"向界面添加加载事件

    (开拍前的准备工作)

    <Window ……
        ……  Title="MainWindow" Height="450" Width="800" Loaded="Canvas_Loaded">
        <Canvas Name="canvas">
    

    2,加载事件创建好以后,接下来我们来创建故事版和动画对象,一个故事版里面可以添加多种动画,也可以创建多个动画对象

    (确定剧本)

    //在设计界面通过Loaded="Window_Loaded"给当前窗体添加一个加载事件
            //实现动画首先要创建故事版(需要引入数据包)
            Storyboard gsb = new Storyboard();
            //创建一个border对象,让bd动起来
            Border bd = new Border();
    

    注;引用的故事版的数据包

    using System.Windows.Media.Animation;//故事版数据包
    

    3,设置动画对象border(bd)的属性

    private void Window_Loaded(object sender, RoutedEventArgs e)
            {
                //设置border对象的宽和高
                bd.Width = 150;
                bd.Height = 150;
                bd.BorderThickness = new Thickness(3);//设置边框的宽度
                bd.BorderBrush = Brushes.Black;//设置边框的背景颜色
                bd.Background = Brushes.Pink;//设置bd的背景颜色
                //设置bd距离顶端还有左端的距离
                Canvas.SetLeft(bd, 0);
                Canvas.SetTop(bd, 0);
                dhxg.Children.Add(bd);//将bd对象放到canvas中
    

    4,创建控制动画执行按钮以及触发事件

     Button ks = new Button();
                ks.Width = 150;
                ks.Height=25;
                ks.Content = "点击开始播放";
                //只有设置了bd距离顶端还有左端的距离才可以进行获取
                Canvas.SetLeft(ks, Canvas.GetLeft(bd));
                Canvas.SetTop(ks, Canvas.GetTop(bd)+bd.Height);
                ks.Click += Ks_Click;
                dhxg.Children.Add(ks);
    

    一,平移动画

    1,创建故事内容情节

    //创建故事内容情节
                //浮点动画
                DoubleAnimation move = new DoubleAnimation();
    

    2,故事内容情节完善

    五个属性:

    (1)From 起始值;
     move.From = 100;
    
    (2)To 结束值;
     move.To = 1000;
    
    (3)Duration 表示动画执行一次所需要的
    move.Duration = new Duration(new TimeSpan(0, 0, 0, 3, 0));
    
    注;以上三个属性,负责安排故事的情节
    注;下面两个必要属性,设置这个故事情节的对象(演员)
    (4)Storyboard.SetTarget: 设置动画执行的对象;
    Storyboard.SetTarget(move, bd);//将动画添加给bd目标对象
    
    (5)Storyboard.SetTargetProperty: 设置动画的执行属性.
    Storyboard.SetTargetProperty(move, new PropertyPath("(Canvas.Left)"));//注意这里的路径大小写一定要区分清楚
    

    3,三个基本属性

    (1),表示动画是否可以向相反方向执行

    move.AutoReverse = true;
    

    (2),表示动画的执行次数.因为设置了往返,所以动画执行次数最少是两次

    move.RepeatBehavior = new RepeatBehavior(2);//动画执行次数100到1000一次,回来一次,所以执行次数必须是两次
    

    (3),表示永久执行

    move.RepeatBehavior = RepeatBehavior.Forever;
    

    4,将故事情节添加到故事版中

    gsb.Children.Add(move);//将move(平移动画)动画添加到故事版中
    

    5,选择合适的时候开始执行动画(按钮的触发事件)

            private void Ks_Click(object sender, RoutedEventArgs e)
            {
                gsb.Begin();//开始播放动画
            }
    

    二,背景颜色动画

    1,背景颜色动画和平移动画写法不同,是优化以后的写法

    一行代码包括了

    From 起始值,

    To 结束值,

    Duration 表示动画执行一次所需要的时间

    三个属性来表示故事的情节

    //背景颜色
    //写法和上面不同    优化以后的写法如下
    ColorAnimation ys = new ColorAnimation(Colors.Red,Colors.Blue,new Duration(TimeSpan.FromSeconds(3)));//背景颜色渐变和时间间隔
    

    2,Storyboard.SetTarget: 设置动画执行的对象;

    Storyboard.SetTarget(ys, bd);//将动画添加给bd目标对象
    

    3,Storyboard.SetTargetProperty: 设置动画的执行属性.

    (1),在设置属性时,必须要在对象中进行初始化该属性的值才可以进行设置
    (2),两个Storyboard.SetTargetProperty不能在一个动画里面同时运行,否则下一个会把上一个替换掉
    (3),注意这里的路径大小写一定要区分清楚
    Storyboard.SetTargetProperty(ys, new PropertyPath("(Border.Background).(SolidColorBrush.Color)"));
    

    4,三个基本属性

    (1),表示动画是否可以向相反方向执行
    ys.AutoReverse = true;
    
    (2),表示动画的执行次数.因为设置了往返,所以动画执行次数最少是两次
    ys.RepeatBehavior = new RepeatBehavior(2);
    
    (3),表示永久执行
    ys.RepeatBehavior = RepeatBehavior.Forever;
    

    5,将故事情节添加到故事版中

    gsb.Children.Add(ys);//将ys(背景颜色动画)动画添加到故事版中
    

    边框动画和缩放动画书写格式和上面基本一致

    三,边框颜色动画

    //边框颜色
                //优化写法
                ColorAnimation ys1 = new ColorAnimation(Colors.Green, Colors.Yellow, new Duration(TimeSpan.FromSeconds(2)));//边框颜色渐变和时间间隔
                //Storyboard.SetTarget: 设置动画执行的对象;
                Storyboard.SetTarget(ys1, bd);
                //Storyboard.SetTargetProperty: 设置动画的执行属性
                Storyboard.SetTargetProperty(ys1, new PropertyPath("(Border.BorderBrush).(SolidColorBrush.Color)"));
                //三个基本属性
                //表示边框颜色动画是否可以反过来继续执行
                ys1.AutoReverse = true;
                //表示动画的执行次数.因为设置了往返,所以动画执行次数最少是两次
                ys1.RepeatBehavior = new RepeatBehavior(2);//动画执行次数100到1000一次,回来一次,所以执行次数必须是两次
                //表示可以永久执行
                ys1.RepeatBehavior = RepeatBehavior.Forever;
                gsb.Children.Add(ys1);//将ys1(边框颜色动画)动画添加到故事版中
    

    四,边框缩放动画

    //边框缩放
                //优化写法
                ThicknessAnimation tick = new ThicknessAnimation(new Thickness(10),new Duration(TimeSpan.FromSeconds(3)));//边框缩放和时间间隔
                //Storyboard.SetTarget: 设置动画执行的对象;
                Storyboard.SetTarget(tick, bd);
                //Storyboard.SetTargetProperty: 设置动画的执行属性
                Storyboard.SetTargetProperty(tick, new PropertyPath("(BorderThickness)"));//路径是bd的边框
                //三个基本属性
                //表示边框缩放动画是否可以反过来继续执行
                tick.AutoReverse = true;
                //表示动画的执行次数.因为设置了往返,所以动画执行次数最少是两次
                tick.RepeatBehavior = new RepeatBehavior(2);//动画执行次数100到1000一次,回来一次,所以执行次数必须是两次
                //表示可以永久执行
                tick.RepeatBehavior = RepeatBehavior.Forever;
                gsb.Children.Add(tick);//将tick(边框缩放动画)添加到故事版中
    

    五,旋转动画

    //旋转
                //定义故事版情节
                //优化写法
                DoubleAnimation xz = new DoubleAnimation(0,360,new Duration(TimeSpan.FromSeconds(3)));//0°到360°旋转,时间间隔为3秒
                //Storyboard.SetTarget: 设置动画执行的对象;
                Storyboard.SetTarget(xz, bd);
                //Storyboard.SetTargetProperty: 设置动画的执行属性
                //Storyboard.SetTargetProperty的路径为旋转的名词
                Storyboard.SetTargetProperty(xz, new PropertyPath("RenderTransform.Angle"));
                gsb.Children.Add(xz);//将xz(旋转动画)添加到故事版中
                //旋转对象
                //表示边框缩放动画是否可以反过来继续执行
                xz.AutoReverse = true;
                //表示可以永久执行
                xz.RepeatBehavior = RepeatBehavior.Forever;
                //设置RenderTransform属性
                RotateTransform rotatel = new RotateTransform();
                bd.RenderTransform = rotatel;//位置改变是以旋转对象为主
                bd.RenderTransformOrigin = new Point(0.5, 0.5);//以中心位置进行旋转
            }
    
    展开全文
  • WPF自定义控件-按钮-DoubleAnimation动画

    千次阅读 2018-09-25 22:09:40
    WPF自定义按钮-DoubleAnimation动画效果展示原理下面为其中一个样式的代码到此代码都结束了补充上述2点我在做样式的注意点 效果展示 最近在看Wpf的书,初了解Wpf,也没做过C#和Wpf的项目。 如果下述有不妥的...

    效果展示

    在这里插入图片描述
    最近在看Wpf的书,初了解Wpf,也没做过C#和Wpf的项目。
    如果下述有不妥的地方请多多包含,有错误,还请指教。

    原理

    自定义控件继承Button,模板为两个重叠的Border

    下面为其中一个样式的代码

    1. 自定义控件文件(MyButton.cs),自定生成的代码先暂时什么都不用改
    using System.Windows;
    using System.Windows.Controls;
    
    namespace CSDN01
    {
        public class MyButton : Button
        {
            static MyButton()
            {
                DefaultStyleKeyProperty.OverrideMetadata(typeof(MyButton), new FrameworkPropertyMetadata(typeof(MyButton)));
            }
        }
    }
    
    1. 项目2,资源字典文件(TemplateMyButton.xaml),我暂时先把属性设成固定值,后期再改成依赖属性
      属性UseLayoutRounding=“False”
      的设置是一个注意点(后续♦1处说明)
    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:local="clr-namespace:CSDN01">
        <ControlTemplate x:Key="TemplateMyButton" TargetType="{x:Type local:MyButton}">
            <Grid UseLayoutRounding="False">
                <Border x:Name="bd1" Background="LightCyan">
                    <TextBlock Text="按钮" FontSize="12" Foreground="DarkCyan"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <Border x:Name="bd2" Background="DarkCyan" Height="0">
                    <TextBlock Text="按钮" FontSize="12" Foreground="LightCyan"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
    
    1. App.xaml里添加资源字典文件
    <Application x:Class="CSDN01.App"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="clr-namespace:CSDN01"
                 StartupUri="MainWindow.xaml">
        <Application.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="TemplateMyButton.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Application.Resources>
    </Application>
    
    1. 主窗口文件(MainWindow.xaml)
      属性UseLayoutRounding=“True”
      的设置是一个注意点(后续♦2处说明)
    <Window x:Class="CSDN01.MainWindow"
            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:local="clr-namespace:CSDN01"
            mc:Ignorable="d"
            Title="MainWindow" Height="450" Width="800">
        <Grid UseLayoutRounding="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="3*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <local:MyButton Template="{StaticResource TemplateMyButton}" Grid.Column="1"/>
            <local:MyButton Template="{StaticResource TemplateMyButton}" Grid.Column="2"/>
            <local:MyButton Template="{StaticResource TemplateMyButton}" Grid.Column="3"/>
            <local:MyButton Template="{StaticResource TemplateMyButton}" Grid.Column="4"/>
        </Grid>
    </Window>
    
    1. 上述步骤后,大体窗口的样子成型
      在这里插入图片描述

    2. 现在重写MyButton.cs文件添加DoubleAnimation动画
      属性FillBehavior
      的设置是一个注意点(后续♦3处说明)

    using System;
    using System.Windows.Media.Animation;
    
           /// <summary>
            /// 动画对象
            /// </summary>
            private DoubleAnimation myAnimation = new DoubleAnimation();
    
            /// <summary>
            /// 重写MouseEnter事件
            /// </summary>
            /// <param name="e"></param>
            protected override void OnMouseEnter(MouseEventArgs e)
            {
                base.OnMouseEnter(e);
    
                // 获取MyButton内部子控件
                Border bd1 = GetTemplateChild("bd1") as Border;
                Border bd2 = GetTemplateChild("bd2") as Border;
    
                // 设置属性
                myAnimation.From = 0;                             // 动画初始值
                myAnimation.To = bd1.ActualHeight;                // 动画终了值
                myAnimation.Duration = TimeSpan.FromSeconds(0.5); // 0.5秒内执行动画
                myAnimation.FillBehavior = FillBehavior.HoldEnd;  // 动画结束后,属性值保持终了状态
    
                // 在高度属性上执行动画
                bd2.BeginAnimation(HeightProperty, myAnimation);
            }
    
            /// <summary>
            /// 重写MouseLeave事件
            /// </summary>
            /// <param name="e"></param>
            protected override void OnMouseLeave(MouseEventArgs e)
            {
                base.OnMouseLeave(e);
    
                // 获取MyButton内部子控件
                Border bd1 = GetTemplateChild("bd1") as Border;
                Border bd2 = GetTemplateChild("bd2") as Border;
    
                // 添加并执行动画
                myAnimation.From = bd1.ActualHeight;              // 动画初始值
                myAnimation.To = 0;                               // 动画终了值
                myAnimation.Duration = TimeSpan.FromSeconds(0.5); // 0.5秒内执行动画
                myAnimation.FillBehavior = FillBehavior.Stop;     // 动画结束后,属性值还原为动画出师值
    
                // 在高度属性上执行动画
                bd2.BeginAnimation(HeightProperty, myAnimation);
            }
    
    1. 上述步骤后,整个按钮算是大体全部结束了,后续要添加依赖属性,这样可以设置自己想要的背景色,文字大小颜色等属性。
      在这里插入图片描述

    2. 依赖属性的设置(这里就只设置2个依赖属性做例子)
      依赖属性的代码有快捷键:输入propdp,然后按2次Tab键
      往MyButton.cs添加下面的代码
      PropertyMetadata里设置的是初期值

    using System.Windows.Media;
    
            /// <summary>
            /// 上层背景色(变动层)
            /// </summary>
            public SolidColorBrush UpBackground
            {
                get { return (SolidColorBrush)GetValue(UpBackgroundProperty); }
                set { SetValue(UpBackgroundProperty, value); }
            }
            public static readonly DependencyProperty UpBackgroundProperty =
                DependencyProperty.Register("UpBackground", typeof(SolidColorBrush), typeof(MyButton), new PropertyMetadata(new SolidColorBrush(Colors.DarkCyan)));
    
            /// <summary>
            /// 动画执行时间属性(秒)
            /// </summary>
            public double AnimationSeconds
            {
                get { return (double)GetValue(AnimationSecondsProperty); }
                set { SetValue(AnimationSecondsProperty, value); }
            }
            public static readonly DependencyProperty AnimationSecondsProperty =
                DependencyProperty.Register("AnimationSeconds", typeof(double), typeof(MyButton), new PropertyMetadata(0.2));
    

    对MyButton.cs文件再次进行修改

                // 修改前
                myAnimation.Duration = TimeSpan.FromSeconds(0.5); // 0.5秒内执行动画
                // 修改后
                myAnimation.Duration = TimeSpan.FromSeconds(AnimationSeconds); // 制定时间内执行动画(默认0.2秒)
    

    对TemplateMyButton.xaml文件再次进行修改

                <!--变更前-->
                <Border x:Name="bd2" Background="DarkCyan" Height="0">
                <!--变更后-->
                <Border x:Name="bd2" Background="{TemplateBinding UpBackground}" Height="0">
    

    也可以用Button固有的属性来设置MyButton的样式

                <!--变更前-->
                <TextBlock Text="按钮" FontSize="12" 
                <!--变更后-->
                <TextBlock Text="{TemplateBinding Content}"
    

    当然要在MainWindow.xaml文件里设置Content的值

            <local:MyButton Template="{StaticResource TemplateMyButton}" Grid.Column="1" Content="首页"/>
            <local:MyButton Template="{StaticResource TemplateMyButton}" Grid.Column="2" Content="产品"/>
            <local:MyButton Template="{StaticResource TemplateMyButton}" Grid.Column="3" Content="技术"/>
            <local:MyButton Template="{StaticResource TemplateMyButton}" Grid.Column="4" Content="联系我们"/>
    

    到此代码都结束了

    在这里插入图片描述

    补充上述3点我在做样式的注意点

    1. 先说注意点♦2:UseLayoutRounding=“True”
      做个小例子
            <Grid Grid.Row="2" Grid.Column="1">
                <Border Background="Black"/>
                <Border Background="White"/>
            </Grid>
    

    上述在一个单元格里放至2个Border,白色覆盖在黑色上面,下面是没有UseLayoutRounding=“True”
    的运行结果
    在这里插入图片描述

    有2根比较明显的底色黑线漏出来了,我这次给的MyButton例子是不会出现这个的,因为一个是隐藏的,一个是显示的。但是如果自己想做别的动画,需要多个重叠控件的话,就可能会出现这个现象。
    至于为什么,我也说不出,给2张书上的说明:
    在这里插入图片描述

    在这里插入图片描述

    引用的是【WPF编程宝典–使用C#2012和.NET 4.5 第4版】的64,65页。

    1. 再说注意点♦1:UseLayoutRounding=“False”
      举个小例子,去掉♦1处的:UseLayoutRounding=“False”
       <Grid UseLayoutRounding="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <local:MyButton Template="{StaticResource TemplateMyButton}" Grid.Column="1" Content="首页" Padding="5"/>
    

    为了防止黑线,我在最外面添加了UseLayoutRounding=“True”,如果MyButton被强制设置了宽度,又加上了Padding,MyButton的实际宽度编程110,我用慢动作看一下运行的实际动画:
    在这里插入图片描述

    文字在上下抖动,原因大概就是高度是小数,不停变化高度的时候,由于布局舍入导致居中的位置上下1像素浮动。这时候就要把布局舍入给关了。

    1. 再说注意点♦3:属性FillBehavior
      用一个别的按钮样式说明,没有FillBehavior属性,被拉伸后的效果
      拉伸前:
      在这里插入图片描述
      拉伸后:
      在这里插入图片描述

    应该很好理解,原本高宽是考Grid自动生成的,所以控件实际的Hight和Width的值是NaN,所以动画我用的都是ActualHeight和ActualWidth,动画执行的时候,改变的是Hight和Width,把实际的高宽给固定了,所以拉伸后还保持原来的Hight和Width而没有跟随Grid的变化而变化,所以要在鼠标离开后,把NaN的值还给他。

    展开全文
  • 最近正在学习WPF动画,于是自己做了一个弹出遮罩动画效果自定义控件,仅供参考学习。 1.控件淡出效果 2.控件弹出效果(控件由小到大)
  • 2,在WPF中要实现动画就需要DoubleAnimation这个类,按照自己的想法从初始状态From定义到结束To状态在多长事件内完成Duration 最后需要一个控件来触发动画例如:  btnGrow1.BeginAnimation(Button.WidthProperty...

    主界面的代码

    <StackPanel  ButtonBase.Click="Grid_Click">
            <Button Content="逐渐变大缩小"/>
            <Button Content="鼠标移动特效" />
        </StackPanel>

    cs :

    //这事件不做过多的解释有基础的一看就会明白
     private void Grid_Click(object sender, RoutedEventArgs e)
            {
                object obj = e.OriginalSource;
                Button butn = null;
                if (obj is Button)
                    butn = obj as Button;
                Type type = this.GetType();//获取当前实例
                Assembly assembly = type.Assembly;//获取在其中声明的类型
                //动态的实例化一个对象
                Window win = (Window)assembly.CreateInstance(type.Namespace + "." + butn.Content.ToString());
                win.Show();
                
            }
    下面进行第一个动画:
    xaml界面
      <Grid>
            <Button Content="点击逐渐增长" Height="45" HorizontalAlignment="Left" Margin="29,37,0,0" Name="btnGrow1" VerticalAlignment="Top" Width="213" />
            <Button Content="点击逐渐归位" Height="23" HorizontalAlignment="Left" Margin="86,88,0,0" Name="btnBack" VerticalAlignment="Top" Width="90" />
            <Button Content="点击增长" Height="46" HorizontalAlignment="Left" Margin="98,161,0,0" Name="btnGrow" VerticalAlignment="Top" Width="78" />
        </Grid>
    cs:
    public 逐渐变大缩小()
            {
                InitializeComponent();
                //给button注册点击事件
                btnGrow1.Click += new RoutedEventHandler(btnGrow1_Click);
                btnBack.Click += new RoutedEventHandler(btnBack_Click);
                btnGrow.Click += new RoutedEventHandler(btnGrow_Click);
            }
            //点击增长
            void btnGrow_Click(object sender, RoutedEventArgs e)
            {
                DoubleAnimation widthAnimation = new DoubleAnimation() { By=50,Duration=TimeSpan.FromSeconds(0.2) };
                btnGrow.BeginAnimation(Button.WidthProperty, widthAnimation);
            }
            //还原动画
            void btnBack_Click(object sender, RoutedEventArgs e)
            {
                DoubleAnimation widthAmination = new DoubleAnimation();
                widthAmination.Duration = TimeSpan.FromSeconds(1);
                DoubleAnimation heightAmimation = new DoubleAnimation();
                heightAmimation.Duration = TimeSpan.FromSeconds(1);
                btnGrow1.BeginAnimation(Button.WidthProperty, widthAmination);
                btnGrow1.BeginAnimation(Button.HeightProperty, heightAmimation);
            }
            //逐渐增长事件
            void btnGrow1_Click(object sender, RoutedEventArgs e)
            {
                DoubleAnimation widthAnimation = new DoubleAnimation()
                {
                    To = this.Width - 30,
                    Duration = TimeSpan.FromSeconds(1)
                };
                DoubleAnimation heightAnimation = new DoubleAnimation() 
                {
                 To=(this.Height-40)/3,
                 Duration=TimeSpan.FromSeconds(1)
                };
                btnGrow1.BeginAnimation(Button.WidthProperty, widthAnimation);
                btnGrow1.BeginAnimation(Button.HeightProperty, heightAnimation);
            }
    好了现在的一个简单点击放大缩小的动画就做好了
    小结:1,本例中在菜单窗体中用到了用到了一个 ButtonBase.Click特别说明一下这个事件很好用如果一个界面上的按钮很多
    每个事件都需要弹出一个窗体用这个最好用,节省代码,
    2,在WPF中要实现动画就需要DoubleAnimation这个类,按照自己的想法从初始状态From定义到结束To状态在多长事件内完成Duration
    最后需要一个控件来触发动画例如:
       btnGrow1.BeginAnimation(Button.WidthProperty, widthAnimation);
    这段代码的意思就是
    btnGrow1控件点击是触发widthAnimation这个动画,影响的对象就是这个控件的width
    好了就写到这里,以后还会有,wpf,很有意思,相比起winform来他的界面更加灵活,代码编写也更加灵活,
    界面的色彩也很好定义,另外动画也可以下载axml中,但是本人不喜欢在界面设计窗台上写这些,在后台写的话跟能看的清楚。

    转载于:https://www.cnblogs.com/imeiba/p/5697975.html

    展开全文
  • WPF 按钮动画效果制作

    千次阅读 2011-02-11 11:47:00
    概要:本文将通过WPF按钮与Flash按钮的制作流程的对比讲解如何用Xaml实现按钮动画,同时你也还能学习Expression Blend。本文假设你正在制作一套点饮料的系统,现在你要做的就是制作出一个点咖啡按钮,用户点了...

    概要:本文将通过WPF按钮与Flash按钮的制作流程的对比讲解如何用Xaml实现按钮动画,同时你也还能学习Expression Blend。本文假设你正在制作一套点饮料的系统,现在你要做的就是制作出一个点咖啡按钮,用户点了之后就会给用户下咖啡订单。当然这样的按钮要越直观越好,要让用户一看就明白这是用来点咖啡的按钮,这就是对这个按钮的要求。

    本文使用的开发环境:Expression Blend 2 sp1, Expression Design

    阅读本文前建议先阅读《WPF揭秘》中的以下章节,学习一些基础概念:

    Xaml,《WPF揭秘》第2章
    样式,《WPF揭秘》10.1
    控件模板,《WPF揭秘》10.2
    触发器,《WPF揭秘》10.1.2
    动画和Storyboard,《WPF揭秘》第13章
    关键帧,《WPF揭秘》13.3
     

    正文

    任何一个学过Flash的人首先学习的内容一般都是按钮的制作,在Flash中按钮有四种状态,即Up(未点击), Over(鼠标悬停), Down(鼠标按下), Hit(鼠标点击)。

    如果要为某种状态添加动画,则需要用一个内嵌的MovieClip来实现,当然本文并不是讲解Flash的教程,就不多做介绍了。

    很多WPF的初学者觉得Flash似乎比微软的东西好用,因为Flash有ButtonClip,很直观很方便。其实呢,从软件开发角度讲,WPF的事件模型更科学,因为程序中所有的动画、视觉效果都是由事件触发的,在WPF中如果要实现类似Flash中的Up, Down, Over, Hit四种状态也并非难事,你其实很容易找到对应的属性和事件,下面我列出一张表,大家看了就很容易明白了:

    Flash

    WPF

    Up MouseLeftButtonUp (Event)
    Down MouseLeftButtonDown (Event)
    Over IsMouseOver (Property)
    Hit IsPressed (Property)
    是不是发觉WPF的事件和属性更有针对性,也表达得更清楚些呢?当然我们必须承认Flash有一点做得很好——它把Button所对应的最常用的四种状态放在了一个单独的编辑视图(即ButtonClip编辑器)中,这样初学者很容易上手,也许Expression Blend以后的版本可以借鉴一下。

    做任何一样东西,我们必须了解最终我们到底要做什么,所以先来看看效果图:

    你是不是有点等不及啦,那我们就开始动手吧!

    画图

    仔细分析下你会发现其实整个按钮中最关键的还是那个冒着热气的杯子,所以呢,我们先要把杯子画出来,用什么画呢?自然是用Expression Design。

    里面画了几个杯子的草稿,搞设计的朋友都知道这其实就是在做Graphics,怎么画不是这篇文章的重点,大家自己揣摩吧。要注意一点,每次画完一个杯子一定要把几个Path放在一个Group中,这样才能保证导出的时候一个Canvas中就是一个杯子的图形,导出的Xaml与下面的代码类似:
    --------------

    XAML code
       
    < Viewbox x:Name ="Group" Width ="30.8005" Height ="32.0573" Canvas.Left ="35.6441" Canvas.Top ="40.7749" > < Canvas Width ="30.8005" Height ="32.0573" > < Path x:Name ="Path" Width ="3.01129" Height ="16.1666" Canvas.Left ="6.25348" Canvas.Top ="2.18024" Stretch ="Fill" StrokeThickness ="2" StrokeLineJoin ="Round" Stroke ="#FF898686" Fill ="#FF9E9898" Data ="F1 M 7.92015,3.18024C 7.56208,5.32863 8.36821,8.0273 8.25348,10.0135C 8.08681,12.899 7.25348,14.8798 7.25348,17.3469" /> < Path x:Name ="Path_0" Width ="3.01129" Height ="16.1666" Canvas.Left ="10.7747" Canvas.Top ="2.27339" Stretch ="Fill" StrokeThickness ="2" StrokeLineJoin ="Round" Stroke ="#FF898686" Fill ="#FF9E9898" Data ="F1 M 12.4414,3.27339C 12.0833,5.42178 12.8895,8.12045 12.7747,10.1067C 12.6081,12.9921 11.7747,14.973 11.7747,17.44" /> < Path x:Name ="Path_1" Width ="3.01129" Height ="16.1667" Canvas.Left ="14.8581" Canvas.Top ="2.14838" Stretch ="Fill" StrokeThickness ="2" StrokeLineJoin ="Round" Stroke ="#FF898686" Fill ="#FF9E9898" Data ="F1 M 16.5247,3.14838C 16.1667,5.29678 16.9728,7.99545 16.8581,9.9817C 16.6914,12.8671 15.8581,14.848 15.8581,17.315" /> < Path x:Name ="Path_2" Width ="10.6739" Height ="7.81753" Canvas.Left ="19.7414" Canvas.Top ="19.929" Stretch ="Fill" StrokeThickness ="2" StrokeLineJoin ="Round" Stroke ="#FF898686" Fill ="#FFFFFFFF" Data ="F1 M 22.9393,21.1666C 25.1893,21.1529 29.1164,20.8922 29.3039,20.9334C 29.8005,21.0424 28.6164,23.7316 26.1476,25.1718C 23.7262,26.5844 23.3768,26.8041 20.7414,26.7355" /> < Path x:Name ="Path_3" Width ="24.1439" Height ="12.9312" Canvas.Left ="0.12096" Canvas.Top ="18.8018" Stretch ="Fill" StrokeThickness ="2" StrokeLineJoin ="Round" Stroke ="#FF898686" Fill ="#FFFFFFFF" Data ="F1 M 1.12678,20.5627C 1.48111,19.7491 22.9913,19.4325 23.2518,20.4012C 23.4669,21.2014 21.0644,30.4402 12.6734,30.7251C 2.88443,31.0573 1,20.8539 1.12678,20.5627 Z " /> </ Canvas > </ Viewbox >


    --------------
    如上所示,上面5个杯子会被导出成5个Viewbox,里面各有一个Canvas,不过你在Expression Blend中使用时会发现,其实我们只需要Canvas就行了,Viewbox是不用的。

    导出Xaml

    好了东西画完了,下面我们讲怎么把这些图形导出成Xaml,并放入Expression Blend中。

    在File菜单中你会看到Export菜单项,点击它,你会看到下面的对话框:

    这里请注意,Format一定要选Xaml WPF Canvas,这样才能够保证导出的Xaml Canvas能够与WPF程序兼容,其他选项都无所谓。

    创建WPF应用程序

    接下来我们开始使用Expression Blend创建一个简单的应用程序,当然这个程序的主要目的就是帮助我们查看这个按钮的最终效果。

    点Expression Blend的File->New Project菜单,弹出下面的对话框:

    只要选择WPF Application就可以了,其他所有选项都可以使用默认项。

    紧接着从左边的工具栏中拖出一个Button,放进默认的窗口(Window1.xaml)中(随便放哪都成),尺寸大小全看个人喜好,我这里就不给参考值了。

    修改控件模板

    右键点击这个按钮,点Edit Control Parts (Template) => Edit a Copy,进入控件模板编辑器,类似于Flash的MovieClip编辑器。

    这时会弹出一个对话框,询问Button样式的存放位置,建议选This document后面的Window:Window,当然如果你要做应用程序,把样式放到Application中也不失为一个不错的选择,这样便于全局管理样式。

    接下来我们要做的步骤很关键,大家别开小差哦!

    首先我们把Button的控件模板中的Chrome控件替换为Grid,最简单的办法就是把Grid从工具箱中拖进编辑区域。然后在Grid中加入一个ContentPresenter和Rectangle。

    [思考题] 为什么要多加一个Rectangle?(提示,可以对比一下Flash中ButtonClip的制作,原理是一样的)

    接下来我们就要用上刚才导出的Xaml了,切换到XAML视图,把第一个Canvas的代码拷贝到当前的Grid下面,回到设计视图,你应该会看到Grid现在有3个1级子节点,分别是rectangle、[ContentPresenter]和canvas,如下所示:

    其中我们把rectange的Fill设置为渐变色,代码如下:

    XAML code
       
    < Rectangle Stroke ="#FF000000" HorizontalAlignment ="Stretch" Margin ="0,0,0,0" x:Name ="rectangle" > < Rectangle.Fill > < LinearGradientBrush EndPoint ="0.5,1" StartPoint ="0.5,0" > < GradientStop Color ="#FFF8F8F8" Offset ="0" /> < GradientStop Color ="#FFD9D9D9" Offset ="0.853" /> < GradientStop Color ="#FF5F5E5E" Offset ="1" /> </ LinearGradientBrush > </ Rectangle.Fill > </ Rectangle >


    当然你可以不用在XAML代码中设置,直接在调色器中设置就行了。

    如图中的红色框所示,依次点击Properties选项卡=>Fill=>渐变按钮,然后在渐变色编辑器中配置该渐变色。

    好了,第一步完成了,此时我们已经能够看到按钮的最终效果了,是不是就结束了?当然没有,我们还要加动画,当鼠标悬停在按钮上时让咖啡冒气,这样这个咖啡按钮才会更逼真。 

    制作动画效果

    按F6切换到动画模式。

    在Triggers框中点 +Property (添加属性触发器),然后把默认的 IsCancel改成IsMouseOver,把=后面的值改成True(如果改不了,可以到XAML视图中修改),如下所示:

    你会注意到IsMouseOver左侧有一个红色的按钮,这表示正在录制动作。接下来在Objects and Timeline框中点+按钮,新建一个Storyboard,然后就可以开始录制动画了。Flash中做动画默认是有帧的,所有的动画都是基于Timeline中的帧去实现的,要改变动画状态则可以用关键帧,微软也借鉴了这方面的经验,WPF中也有关键帧的概念。要添加关键帧,可以点时间左边的 按钮,所有关键帧添加完毕后的效果如下所示:


    在添加这些关键帧的时候要注意一点,由于我们的动画不需要连续的改变,是独立的,所以我们必须告诉WPF我们的用意,而对每个关键帧设置Hold In就可以解决这个问题,只需要右击某个关键帧就可以看到该选项。至于烟怎么摆动全凭个人喜好,不过我总觉得我自己做的烟似乎机械化了点,呵呵,毕竟不是搞美工出生的。



    大家都知道,在Flash中所有的关键帧默认是不会做连续值渐变的,除非你使用补间动画(Motion Tween), 右图便是一个使用Flash补间动画的例子。
    让按钮动起来

    做完了Storyboard之后,有些人肯定很兴奋,迫不及待地把程序跑了起来,结果却很失望,鼠标移动到按钮上一点动静都没有,其实原因很简单——Storyboard没有与相应的触发器建立联系。回到刚才的Triggers框,点IsMouseOver=true,在出现的actions when activating和actions when deactivating中分别添加Storyboard Begin和Storyboard Stop动作。

    好了,现在你可以运行程序了,鼠标放上去便能看到烟的效果。

    下载完整程序代码请点这里:CoffeButtonSample.zip

    [课后作业]:举一反三,制作一个挖金矿游戏中的Play按钮。

    要求:

    1. 按钮要有质感,绘制时要加入一定的反光面

    2. 鼠标没有移上去的时候,会每隔一定时间发出一道金光,这道光从左向右移动,如中间一张图所示

    3. 鼠标移上去时转为最亮。

    有任何问题或者写得不清楚的地方,欢迎大家指正。同时也感谢你阅读这篇文章。

    展开全文
  • WPF水波动画

    2018-08-03 17:38:53
    通过使用各种图形组合,绘制出一个完整的图形,然后利用贝塞尔曲线和帧动画,实现了类似与水流动的动画效果
  • wpf程序实现Loadingwait动画等待效果,在canvas里放9个Ellipse,,然后再用用定时器,一直改变每个Ellipse的位置,从而实现loading 效果
  • WPF放大缩小动画效果

    2020-12-04 21:38:45
    WPF放大缩小动画效果 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具:VisualStudio2015 关键技术:WPF 作者:纳兹 撰写时间:2020年12月4日 首先进行页面布局,下面用button进行布局...
  • wpf 动画效果

    2015-11-20 15:28:57
    动画效果 设置按钮的转换效果 动画时间 TranslateTransform tt = new TranslateTransform(); DoubleAnimation da = new DoubleAnimation();
  • WPF制作按钮效果

    热门讨论 2008-07-24 15:35:27
    按钮透明效果边框不透明 制作按钮动画,在鼠标移入按钮后会产生部分区域变色过程
  • wpf按钮窗体动画

    2014-05-11 01:22:38
    wpf制作的简单动画,按钮动画,窗体动画代码,close时间来体现的
  • 本文实例为大家分享了WPF实现文字粒子闪烁动画的具体代码,供大家参考,具体内容如下实现效果如下:思路:首先根据显示文本创建文本路径Geometry,然后在路径内随机生成圆形粒子并添加动画。步骤:1、粒子类Particle...
  • 主要为大家详细介绍了WPF实现转圈进度条效果,如何设计自定义的绕圈进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • WPF按钮 Button 将会吃掉路由事件,此时的 EventTrigger 如果通过 RoutedEvent 是 MouseLeftButtonDown 那么将会拿不到路由事件,也就触发不了,因此样式将不会变更。简单的解决方法就是通过 VisualState...
  • wpf动画实现效果

    千次阅读 2017-12-26 22:40:38
    wpf动画实现效果动画渐变效果,多线程实现动画(用到lambda和委托)
  • WPF 动画闪烁效果

    千次阅读 2021-01-13 13:19:45
    WPF 动画闪烁效果 一、按钮外边缘呼吸闪烁 点击触发效果; 代码: <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=...
  • WPF圆形动画按钮

    2020-05-15 14:14:04
    点击一级按钮,弹出二级按钮点击二级按钮,显示图片;图片可滚动显示。 核心代码: private void Get_Buttons(int BtnNumber) { int a = 0; #region 新代码 foreach (var item in dataList) { FileName...
  • WPF呼吸闪烁效果例子

    千次下载 热门讨论 2015-02-09 09:20:20
    一个WPF呼吸闪烁效果的例子 更多资源: http://cleopard.download.csdn.net
  • WPF淡出淡入动画效果

    千次阅读 2019-06-09 19:21:49
    这个效果运用OpacityMask属性,用于改变对象区域的不透明度的画笔。可以使元素的特定区域透明或部分透明,从而实现比较新颖的效果。 通过事件触发器触发Loaded事件实现,所以可以仅用前端XAML语言实现。 代码: ...
  • 软件为图片展示系统,右键触发事件(可改为左键出发),弹出圆形按钮点击各个圆形按钮显示多张图片(从本地读取,图片已放在打包目录下,可运行)
  • WPF一种背景动画效果

    2019-07-17 08:24:08
    WPF一种背景动画效果 开发工具与关键技术:Visual Studio 2017、WPF 撰写时间: 2019年7月12日 这是微软的Samples,可以运用在一些具有画面感的页面上,下面用XAML代码实现: <Window x:Class="Wpf1....
  • WPF 等待页面动画

    2014-01-13 13:22:42
    WPF 等待页面动画
  • WPF多个按钮点击切换样式

    千次阅读 2018-10-25 18:04:36
    本文主要讲述WPF中多个按钮点击状态为一个样式,未点击状态为一个样式,两种样式通过点击这个动作会发生改变,点击另一个按钮,当前已点击按钮样式也改变的情况。 不复杂样式的多个按钮 主要做法就是将按钮使用...
  • WPF动画按钮-源码

    2021-04-08 07:54:32
    一个按钮,无需使用触发器来定义按钮状态更改情节提要。
  • WPF演示 实现发光的字体和模糊按钮

    热门讨论 2010-12-23 15:45:45
    WPF是微软的新一代图形开发技术,主要是基于Directx技术。使用WPF,可以非常容易的创建各种特效。基于GDI/GDI+开发则非常的困难
  • WPF颜色变化动画

    2020-05-24 20:33:13
    WPF颜色变化动画 控件从透明到不透明动画 DoubleAnimation ks = new DoubleAnimation(); ks.From = btu1.Opacity; ks.To = 1; ks.Duration = new Duration(TimeSpan.FromSeconds(2)); btu1.BeginAnimation...
  • /// 缩放动画 /// </summary> /// <param name="element">控件名</param> /// <param name="RenderX">变换起点X坐标</param> /// <param name="RenderY">变换起点Y坐标<...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,240
精华内容 1,696
关键字:

wpf按钮点击动画效果

友情链接: syn.rar