你的位置:首页 > 软件开发 > ASP.net > WPF学习之绘图和动画

WPF学习之绘图和动画

发布时间:2016-12-13 00:00:20
如今的软件市场,竞争已经进入白热化阶段,功能强、运算快、界面友好、Bug少、价格低都已经成为了必备条件。这还不算完,随着计算机的多媒体功能越来越强,软件的界面是否色彩亮丽、是否能通过动画、3D等效果是否吸引用户的眼球也已经成为衡量软件的标准。软件项目成功的三个要素是:资源、成本、 ...

如今的软件市场,竞争已经进入白热化阶段,功能强、运算快、界面友好、Bug少、价格低都已经成为了必备条件。这还不算完,随着计算机的多媒体功能越来越强,软件的界面是否色彩亮丽、是否能通过动画、3D等效果是否吸引用户的眼球也已经成为衡量软件的标准。

软件项目成功的三个要素是:资源、成本、时间。无论是为了在竞争中保持不败还是为了激发起用户对软件的兴趣,提高软件界面的美化程度、恰当的将动画和3D等效果引入应用程序都是一个必然趋势。然而使用传统的桌面应用程序开发工具和框架(如Winform、MFC、VB、Delphi等)进行开发时,为了使软件界面变漂亮、加入动画或者3D效果,边际成本会非常的高。体现在:

资源消耗增大:需要招聘懂得动画和3D编程的程序员,还需要更多的设计师、工薪和沟通成本随着上升。

开发时间增加:界面美化、动画和3D开发远远比业务逻辑开发困难、耗时。

成本增加:随着资源消耗的增加和开发周期的拉长,成本必然增加。

之所以会出现这种情况,根本原因在于传统开发工具和框架并没有原生的支持美化用户界面、向应用程序中添加动画和3D效果等功能。举个简单的例子,当用户提出需要把TextBox的外观改成圆角时,Winform和Delphi程序员只能通过派生新类并在底层做修改的方法来实现。类似的用户需求还有好多不得不实现,否则客户会怀疑我们的开发能力;即使实现了也没有什么额外的经济效益,因为这些东西在客户的眼里都是很简单的东西。

WPF的推出可谓是对症下药、专门解决上述问题。体现在:

XAML语言针对的是界面美化的问题,可以让设计师直接加入开发团队、降低沟通成本。

XAML的图形绘制功能非常强大,可以轻易绘出复杂的图标、图画。

WPF支持滤镜功能,可以像PhotoShop一样为对象添加各种效果。

WPF原生支持动画开发,无论是设计师还是程序员,都能够使用XAML或C#轻松开发制作绚丽的动画效果。

WPF原生支持3D效果,甚至可以将其它3D建模工具创建的模型导进来、为我所用。

Blend作为专门的设计工具让WPF如虎添翼,即能够帮助不了解编程的设计师快速上手,又能够帮助资深开发者快速建立图形或者动画的原型。

1.1   WPF绘图

与传统的.net开发使用GDI+进行绘图不同,WPF拥有自己的一套绘图API。使用这套API不但可以轻松绘制出精美的图形,还可以为各种图形添加类似与PhotoShop的“滤镜效果”及“变形效果”。本节我们就一起研究WPF图形API绘图,效果和变形等功能。

先观察下面一组图片:

WPF学习之绘图和动画

显然,这组图片是矢量图(Vector Image),无论怎样放大缩小都不会出现锯齿。你可能会想:“这是组PNG格式的图片吗?”答案是“NO”。这组图是用XAML语言绘制的!XAML绘图本身就是矢量的,而且支持各式各样的填充和效果,甚至还可以添加滤镜,这些功能丝毫不亚于Photoshop。以前,使用PhotoShop制作出来的图形需要程序员使用.net的绘图接口进行二次转换才能应用到程序里,现在好了,直接把XAML代码拿来用就可以了。

绘图并不是VisualStudio的强项,这些漂亮的XAML矢量图是怎么画出来的呢?答案是借助Microsoft Expression Studio中的Blend和Design两个工具。Blend我们已经介绍过了,用它可以直接绘制XAML图形;Design可以像PhotoShop或者FireWorks那样绘制图形,再由设计者决定导出xaml格式还是png格式。虽然“唯代码派”的程序员们在Visualstudio里一行一行写代码也能把复杂的图形以非可视化的形式创建出来,但在Blend和Design中画出原型再在Visual Studio里面进行细节的修饰才是提高效率之道。

积沙成塔,集腋成裘,别看前面那些图片很复杂,但都是由几个有限的基本图形组成的。WPF的基本图形包括以下几个(它们都是Shap类的派生类):

Line:直线段,可以设置其笔触(Stroke)。

Rectangle:矩形,既有笔触,又有填充(Fill)。

Ellipse:椭圆,长宽相等的椭圆即为正圆,既有笔触又有填充。

Polygon:多边形,由多条直线线段围成的闭合区域,既有笔触又有填充。

PolyLine:折线(不闭合),由多条首尾相接的直线组成。

Path:路径(闭合区域),基本图形中功能最强的一个,可由若干直线,圆弧,被塞尔曲线组成。

1   直线

直线是最简单的图形。使用X1,Y1两个属性值可以设置它的起点坐标,X2,Y2两个属性值可以设置它的终点坐标。控制终点/起点做标就可以实现平行,交错等效果。Stroke(笔触)属性的数据类型是Brush(画刷),凡是Brush的派生类均可以用于给这个属性赋值。因为WPF提供多种渐变色画刷,所以画直线也可以画出渐变效果。同时,Line的一些属性还可以帮助我们画出虚线以及控制线段终点的形状。下面的例子综合了这些属性:

 

[html] view plain copy 
  1. <Window x:Class="WpfApplication1.Window47"  
  2.         "http://schemas.microsoft.com/get='_blank'>winfx/2006/xaml/presentation"  
  3.         "http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window47" Height="300" Width="400" Background="Orange">  
  5.     <Grid Margin="10">  
  6.         <Grid.ColumnDefinitions>  
  7.             <ColumnDefinition Width="160" />  
  8.             <ColumnDefinition Width="*" />  
  9.             <ColumnDefinition Width="160" />  
  10.         </Grid.ColumnDefinitions>  
  11.         <StackPanel Background="White" x:Name="spleft">  
  12.             <Button Height="40" Content="OK" x:Name="btnReal" Click="btnReal_Click"></Button>  
  13.         </StackPanel>  
  14.         <Button Grid.Column="1" Content=">>" Margin="5,0"></Button>  
  15.         <StackPanel Grid.Column="2" Background="White" x:Name="spRight">  
  16.               
  17.         </StackPanel>  
  18.     </Grid>  
  19. </Window>  
  1. double o = 1;//不透明度指数  
  2. private void btnReal_Click(object sender, RoutedEventArgs e)  
  3. {  
  4.     VisualBrush vb = new VisualBrush(this.btnReal);  
  5.     Rectangle rtg = new Rectangle();  
  6.     rtg.Width = btnReal.Width;  
  7.     rtg.Height = btnReal.Height;  
  8.     rtg.Fill = vb;  
  9.     rtg.Opacity = o;  
  10.     o -= 0.2;  
  11.     this.spRight.Children.Add(rtg);  
  12. }  
  1. <Window x:Class="WpfApplication1.Window48"  
  2.         "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         "http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window48" Height="300" Width="300">  
  5.     <Grid>  
  6.         <Ellipse Height="140"  Name="ellipse1" Stroke="Gray" Width="140" Cursor="Hand" ToolTip="A Ball">  
  7.             <Ellipse.Fill>  
  8.                 <RadialGradientBrush GradientOrigin="0.2,0.8" RadiusX="0.75" RadiusY="0.75">  
  9.                     <RadialGradientBrush.RelativeTransform>  
  10.                         <TransformGroup>  
  11.                             <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5"></RotateTransform>  
  12.                         </TransformGroup>  
  13.                     </RadialGradientBrush.RelativeTransform>  
  14.                     <GradientStop Color="#FFFFFFFF" Offset="0" />  
  15.                     <GradientStop Color="#FF444444" Offset="0.66" />  
  16.                     <GradientStop Color="#FF999999" Offset="1" />  
  17.                 </RadialGradientBrush>  
  18.             </Ellipse.Fill>  
  19.         </Ellipse>  
  20.     </Grid>  
  21. </Window>  
  1. <Window x:Class="WpfApplication1.Window49"  
  2.         "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         "http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window49" Height="350" Width="340">  
  5.     <Grid>  
  6.         <Grid.RowDefinitions>  
  7.             <RowDefinition Height="160" />  
  8.             <RowDefinition Height="160" />  
  9.         </Grid.RowDefinitions>  
  10.         <Grid.ColumnDefinitions>  
  11.             <ColumnDefinition Width="160" />  
  12.             <ColumnDefinition Width="160" />  
  13.         </Grid.ColumnDefinitions>  
  14.         <!--直线-->  
  15.         <Path Stroke="Blue" StrokeThickness="2" Grid.Row="0" Grid.Column="0">  
  16.             <Path.Data>  
  17.                 <LineGeometry StartPoint="0,0" EndPoint="160,160"></LineGeometry>  
  18.             </Path.Data>  
  19.         </Path>  
  20.         <!--矩形路径-->  
  21.         <Path Stroke="Orange" Fill="Yellow" Grid.Row="0" Grid.Column="1">  
  22.             <Path.Data>  
  23.                 <RectangleGeometry Rect="20,20,120,120" RadiusX="10" RadiusY="10"></RectangleGeometry>  
  24.             </Path.Data>  
  25.         </Path>  
  26.         <!--椭圆路径-->  
  27.         <Path Stroke="Green" Fill="LawnGreen" Grid.Column="0" Grid.Row="1">  
  28.             <Path.Data>  
  29.                 <EllipseGeometry Center="80,80" RadiusX="60" RadiusY="40"></EllipseGeometry>  
  30.             </Path.Data>  
  31.         </Path>  
  32.         <!--自定义路径-->  
  33.         <Path Stroke="Yellow" Fill="Orange" Grid.Row="1" Grid.Column="1">  
  34.             <Path.Data>  
  35.                 <PathGeometry>  
  36.                     <PathGeometry.Figures>  
  37.                         <PathFigure StartPoint="25,140" IsClosed="True">  
  38.                             <PathFigure.Segments>  
  39.                                 <LineSegment Point="20,40"></LineSegment>  
  40.                                 <LineSegment Point="40,110"></LineSegment>  
  41.                                 <LineSegment Point="50,20"></LineSegment>  
  42.                                 <LineSegment Point="80,110"></LineSegment>  
  43.                                 <LineSegment Point="110,20"></LineSegment>  
  44.                                 <LineSegment Point="120,110"></LineSegment>  
  45.                                 <LineSegment Point="140,40"></LineSegment>  
  46.                                 <LineSegment Point="135,140"></LineSegment>  
  47.                             </PathFigure.Segments>  
  48.                         </PathFigure>  
  49.                     </PathGeometry.Figures>  
  50.                 </PathGeometry>  
  51.             </Path.Data>  
  52.         </Path>  
  53.     </Grid>  
  54. </Window>  
  1. <Path>  
  2.     <Path.Data>  
  3.         <PathGeometry>  
  4.             <PathGeometry.Figures>  
  5.                 <PathFigure>  
  6.                     <PathFigure.Segments>  
  7.                         <!--线段内容-->  
  8.                     </PathFigure.Segments>  
  9.                 </PathFigure>  
  10.             </PathGeometry.Figures>  
  11.         </PathGeometry>  
  12.     </Path.Data>  
  13. </Path>  
  1. <Window x:Class="WpfApplication1.Window53"  
  2.         "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         "http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window53" Height="300" Width="300">  
  5.     <Grid>  
  6.         <Path Stroke="Black" Fill="LightBlue" StrokeThickness="1">  
  7.             <Path.Data>  
  8.                 <GeometryGroup>  
  9.                     <PathGeometry>  
  10.                         <PathFigure StartPoint="0,0">  
  11.                             <BezierSegment Point1="250,0" Point2="50,200" Point3="300,200"></BezierSegment>  
  12.                         </PathFigure>  
  13.                     </PathGeometry>  
  14.                     <PathGeometry>  
  15.                         <PathFigure StartPoint="0,0">  
  16.                             <BezierSegment Point1="230,0" Point2="50,200" Point3="300,200"></BezierSegment>  
  17.                         </PathFigure>  
  18.                     </PathGeometry>  
  19.                     <PathGeometry>  
  20.                         <PathFigure StartPoint="0,0">  
  21.                             <BezierSegment Point1="210,0" Point2="50,200" Point3="300,200"></BezierSegment>  
  22.                         </PathFigure>  
  23.                     </PathGeometry>  
  24.                     <PathGeometry>  
  25.                         <PathFigure StartPoint="0,0">  
  26.                             <BezierSegment Point1="190,0" Point2="50,200" Point3="300,200"></BezierSegment>  
  27.                         </PathFigure>  
  28.                     </PathGeometry>  
  29.                     <PathGeometry>  
  30.                         <PathFigure StartPoint="0,0">  
  31.                             <BezierSegment Point1="170,0" Point2="50,200" Point3="300,200"></BezierSegment>  
  32.                         </PathFigure>  
  33.                     </PathGeometry>  
  34.                     <PathGeometry>  
  35.                         <PathFigure StartPoint="0,0">  
  36.                             <BezierSegment Point1="150,0" Point2="50,200" Point3="300,200"></BezierSegment>  
  37.                         </PathFigure>  
  38.                     </PathGeometry>  
  39.                     <PathGeometry>  
  40.                         <PathFigure StartPoint="0,0">  
  41.                             <BezierSegment Point1="130,0" Point2="50,200" Point3="300,200"></BezierSegment>  
  42.                         </PathFigure>  
  43.                     </PathGeometry>  
  44.                 </GeometryGroup>  
  45.             </Path.Data>  
  46.         </Path>  
  47.     </Grid>  
  48. </Window>  
  1. <Window x:Class="WpfApplication1.Window56"  
  2.         "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         "http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window56" Height="250" Width="300" WindowStyle="None" AllowsTransparency="True" WindowStartupLocation="CenterScreen" Background="Yellow">  
  5.     <Grid VerticalAlignment="Center" HorizontalAlignment="Center">  
  6.         <Path Stroke="Orange" Fill="Yellow" x:Name="clipPath0" Visibility="Hidden" Data="M 55,100 A 50,50 0 1 1 100,60 A 110,95 0 0 1 200,60 A 50,50 0 1 1 250,100 A 110,95 0 1 1 55,100 Z">  
  7.         </Path>  
  8.         <Button Content="Clip" Width="80" Height="25" Click="Button_Click" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>  
  9.     </Grid>  
  10. </Window>  
  1. private void Button_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     this.Clip = clipPath0.Data;  
  4. }  
  1. <Window x:Class="WpfApplication1.Window57"  
  2.         "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         "http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window57" Height="300" Width="300">  
  5.     <Grid>  
  6.         <Button Width="80" Height="50">  
  7.             <Button.BitmapEffect>  
  8.                 <DropShadowBitmapEffect Direction="-45" Opacity="0.75" Color="Red" ShadowDepth="7"></DropShadowBitmapEffect>  
  9.             </Button.BitmapEffect>  
  10.         </Button>  
  11.     </Grid>  
  12. </Window>  
  1. <Window x:Class="WpfApplication1.Window60"  
  2.         "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         "http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window60" Height="338" Width="471">  
  5.     <Grid x:Name="titleBar" Background="LightBlue">  
  6.         <Grid.ColumnDefinitions>  
  7.             <ColumnDefinition Width="Auto"></ColumnDefinition>  
  8.             <ColumnDefinition Width="*"></ColumnDefinition>  
  9.         </Grid.ColumnDefinitions>  
  10.         <TextBlock FontSize="24" Text="Hello Transformer" VerticalAlignment="Bottom" HorizontalAlignment="Center">  
  11.             <TextBlock.RenderTransform>  
  12.                 <RotateTransform Angle="-90"></RotateTransform>  
  13.             </TextBlock.RenderTransform>  
  14.         </TextBlock>  
  15.     </Grid>  
  16. </Window>  
  1. <Window x:Class="WpfApplication1.Window61"  
  2.         "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         "http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window61" Height="372" Width="475">  
  5.     <Grid>  
  6.         <Button Width="80" Height="80" HorizontalAlignment="Left" VerticalAlignment="Top">  
  7.             <Button.RenderTransform>  
  8.                 <TranslateTransform X="0" Y="0" x:Name="tt"></TranslateTransform>  
  9.             </Button.RenderTransform>  
  10.         </Button>  
  11.     </Grid>  
  12. </Window>  
  1. private void Button_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     DoubleAnimation dax = new DoubleAnimation();  
  4.     DoubleAnimation day = new DoubleAnimation();  
  5.     //指定起点  
  6.     dax.From = 0;  
  7.     day.From = 0;  
  8.     //指定终点  
  9.     Random rdm = new Random();  
  10.     dax.To = rdm.NextDouble() * 300;  
  11.     day.To = rdm.NextDouble() * 300;  
  12.     //指定时长  
  13.     Duration duration = new Duration(TimeSpan.FromMilliseconds(3000));  
  14.     dax.Duration = duration;  
  15.     day.Duration = duration;  
  16.     //动画主体是TranslatTransform变形,而非Button  
  17.     this.tt.BeginAnimation(TranslateTransform.XProperty,dax);  
  18.     this.tt.BeginAnimation(TranslateTransform.YProperty,day);  
  19. }  
  1. private void Button_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     DoubleAnimation dax = new DoubleAnimation();  
  4.     DoubleAnimation day = new DoubleAnimation();  
  5.   
  6.     //设置反弹  
  7.     BounceEase be = new BounceEase();  
  8.     //设置反弹次数为3  
  9.     be.Bounces = 3;  
  10.     be.Bounciness = 3;//弹性程度,值越大反弹越低  
  11.     day.EasingFunction = be;  
  12.   
  13.     //设置终点  
  14.     dax.To = 300;  
  15.     day.To = 300;  
  16.   
  17.     //指定时长  
  18.     Duration duration = new Duration(TimeSpan.FromMilliseconds(2000));  
  19.     dax.Duration = duration;  
  20.     day.Duration = duration;  
  21.     //动画主体是TranslatTransform变形,而非Button  
  22.     this.tt.BeginAnimation(TranslateTransform.XProperty,dax);  
  23.     this.tt.BeginAnimation(TranslateTransform.YProperty,day);  
  24. }  
  1. <Window x:Class="WpfApplication1.Window61"  
  2.         "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         "http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window61" Height="372" Width="475">  
  5.     <Grid>  
  6.         <Button Width="80" Height="80" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click">  
  7.             <Button.RenderTransform>  
  8.                 <TranslateTransform X="0" Y="0" x:Name="tt"></TranslateTransform>  
  9.             </Button.RenderTransform>  
  10.         </Button>  
  11.     </Grid>  
  12. </Window>  
  1. private void Button_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     DoubleAnimationUsingKeyFrames dakX = new DoubleAnimationUsingKeyFrames();  
  4.     DoubleAnimationUsingKeyFrames dakY = new DoubleAnimationUsingKeyFrames();  
  5.     //设置动画总时长  
  6.     dakX.Duration = new Duration(TimeSpan.FromMilliseconds(900));  
  7.     dakY.Duration = new Duration(TimeSpan.FromMilliseconds(900));  
  8.     //创建,添加关键帧  
  9.     LinearDoubleKeyFrame x_kf_1 = new LinearDoubleKeyFrame();  
  10.     LinearDoubleKeyFrame x_kf_2 = new LinearDoubleKeyFrame();  
  11.     LinearDoubleKeyFrame x_kf_3 = new LinearDoubleKeyFrame();  
  12.     x_kf_1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));  
  13.     x_kf_1.Value = 200;  
  14.     x_kf_2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600));  
  15.     x_kf_2.Value = 0;  
  16.     x_kf_3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(900));  
  17.     x_kf_3.Value = 200;  
  18.     dakX.KeyFrames.Add(x_kf_1);  
  19.     dakX.KeyFrames.Add(x_kf_2);  
  20.     dakX.KeyFrames.Add(x_kf_3);  
  21.   
  22.     LinearDoubleKeyFrame y_kf_1 = new LinearDoubleKeyFrame();  
  23.     LinearDoubleKeyFrame y_kf_2 = new LinearDoubleKeyFrame();  
  24.     LinearDoubleKeyFrame y_kf_3 = new LinearDoubleKeyFrame();  
  25.     y_kf_1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));  
  26.     y_kf_1.Value = 0;  
  27.     y_kf_2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600));  
  28.     y_kf_2.Value = 180;  
  29.     y_kf_3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(900));  
  30.     y_kf_3.Value = 180;  
  31.     dakY.KeyFrames.Add(y_kf_1);  
  32.     dakY.KeyFrames.Add(y_kf_2);  
  33.     dakY.KeyFrames.Add(y_kf_3);  
  34.   
  35.     //执行动画  
  36.     tt.BeginAnimation(TranslateTransform.XProperty, dakX);  
  37.     tt.BeginAnimation(TranslateTransform.YProperty,dakY);  
  38. }  
  1. x_kf_1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));  
  2. x_kf_1.Value = 200;  
  3. x_kf_2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600));  
  4. x_kf_2.Value = 0;  
  1. private void Button_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     //创建动画  
  4.     DoubleAnimationUsingKeyFrames dakX = new DoubleAnimationUsingKeyFrames();  
  5.     dakX.Duration = new Duration(TimeSpan.FromMilliseconds(1000));  
  6.   
  7.     //创建、添加关键帧  
  8.     SplineDoubleKeyFrame kf = new SplineDoubleKeyFrame();  
  9.     kf.KeyTime = KeyTime.FromPercent(1);  
  10.     kf.Value = 400;  
  11.   
  12.     KeySpline ks = new KeySpline();  
  13.     ks.ControlPoint1 = new Point(0,1);  
  14.     ks.ControlPoint2 = new Point(1,0);  
  15.   
  16.     kf.KeySpline = ks;  
  17.     dakX.KeyFrames.Add(kf);  
  18.   
  19.     //执行动画  
  20.     this.tt.BeginAnimation(TranslateTransform.XProperty ,dakX);  
  21. }  
  1. <Window x:Class="WpfApplication1.Window63"  
  2.         "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         "http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window63" Height="314" Width="517">  
  5.     <Grid x:Name="layoutRoot">  
  6.         <Grid.Resources>  
  7.             <!--移动路径-->  
  8.             <PathGeometry x:Key="movePath" Figures="M 0,50 C 300,-100 300,400 600,120"></PathGeometry>  
  9.         </Grid.Resources>  
  10.         <Button Content="Move" Width="80" Height="80" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click">  
  11.             <Button.RenderTransform>  
  12.                 <TranslateTransform X="0" Y="0" x:Name="tt"></TranslateTransform>  
  13.             </Button.RenderTransform>  
  14.         </Button>  
  15.     </Grid>  
  16. </Window>  
  1. private void Button_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     //从XAML代码中获取移动路径数据  
  4.     PathGeometry pg = this.layoutRoot.FindResource("movePath") as PathGeometry;  
  5.     Duration duration = new Duration(TimeSpan.FromMilliseconds(600));  
  6.   
  7.     //创建动画  
  8.     DoubleAnimationUsingPath dpX = new DoubleAnimationUsingPath();  
  9.     dpX.Duration = duration;  
  10.     dpX.PathGeometry = pg;  
  11.     dpX.Source = PathAnimationSource.X;  
  12.   
  13.     DoubleAnimationUsingPath dpY = new DoubleAnimationUsingPath();  
  14.     dpY.Duration = duration;  
  15.     dpY.PathGeometry = pg;  
  16.     dpY.Source = PathAnimationSource.Y;  
  17.   
  18.     //执行动画  
  19.     this.tt.BeginAnimation(TranslateTransform.XProperty,dpX);  
  20.     this.tt.BeginAnimation(TranslateTransform.YProperty,dpY);  
  21.       
  22. }  
  1. dpX.AutoReverse = true;  
  2. dpX.RepeatBehavior = RepeatBehavior.Forever;  
  3. dpY.AutoReverse = true;  
  4. dpY.RepeatBehavior = RepeatBehavior.Forever;  
  1. <Window x:Class="WpfApplication1.Window64"  
  2.         "http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         "http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="Window64" Height="159" Width="461">  
  5.     <Grid>  
  6.         <Grid.RowDefinitions>  
  7.             <RowDefinition Height="38" />  
  8.             <RowDefinition Height="38" />  
  9.             <RowDefinition Height="38" />  
  10.         </Grid.RowDefinitions>  
  11.         <Grid.ColumnDefinitions>  
  12.             <ColumnDefinition />  
  13.             <ColumnDefinition Width="60" />  
  14.         </Grid.ColumnDefinitions>  
  15.         <!--跑道(红)-->  
  16.         <Border Grid.Row="0" BorderBrush="Gray" BorderThickness="1">  
  17.             <Ellipse Width="36" Height="36" Fill="Red" HorizontalAlignment="Left" x:Name="ballR">  
  18.                 <Ellipse.RenderTransform>  
  19.                     <TranslateTransform X="0" Y="0" x:Name="ttR">  
  20.                     </TranslateTransform>  
  21.                 </Ellipse.RenderTransform>  
  22.             </Ellipse>  
  23.         </Border>  
  24.         <!--跑道(绿)-->  
  25.         <Border Grid.Row="1" BorderBrush="Gray" BorderThickness="1,0,1,1">  
  26.             <Ellipse Width="36" Height="36" Fill="Green" HorizontalAlignment="Left" x:Name="ballG">  
  27.                 <Ellipse.RenderTransform>  
  28.                     <TranslateTransform X="0" Y="0" x:Name="ttG">  
  29.                     </TranslateTransform>  
  30.                 </Ellipse.RenderTransform>  
  31.             </Ellipse>  
  32.         </Border>  
  33.         <!--跑道(蓝)-->  
  34.         <Border Grid.Row="2" BorderBrush="Gray" BorderThickness="1,0,1,1">  
  35.             <Ellipse Width="36" Height="36" Fill="Blue" HorizontalAlignment="Left" x:Name="ballB">  
  36.                 <Ellipse.RenderTransform>  
  37.                     <TranslateTransform X="0" Y="0" x:Name="ttB">  
  38.                     </TranslateTransform>  
  39.                 </Ellipse.RenderTransform>  
  40.             </Ellipse>  
  41.         </Border>  
  42.         <!--按钮-->  
  43.         <Button Content="Go" Grid.RowSpan="3" Grid.Column="1" Click="Button_Click"></Button>  
  44.     </Grid>  
  45. </Window>  
  1. private void Button_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     Duration duration = new Duration(TimeSpan.FromMilliseconds(600));  
  4.   
  5.     //红色小球匀速运动  
  6.     DoubleAnimation daRx = new DoubleAnimation();  
  7.     daRx.Duration = duration;  
  8.     daRx.To = 400;  
  9.   
  10.     //绿色小球做变速运动  
  11.     DoubleAnimationUsingKeyFrames dakGx = new DoubleAnimationUsingKeyFrames();  
  12.     dakGx.Duration = duration;  
  13.     SplineDoubleKeyFrame kfg = new SplineDoubleKeyFrame(400,KeyTime.FromPercent(1));  
  14.     kfg.KeySpline = new KeySpline(1,0,0,1);  
  15.     dakGx.KeyFrames.Add(kfg);  
  16.   
  17.     //蓝色小球变速运动  
  18.     DoubleAnimationUsingKeyFrames dakBx = new DoubleAnimationUsingKeyFrames();  
  19.     dakBx.Duration = duration;  
  20.     SplineDoubleKeyFrame kfb = new SplineDoubleKeyFrame(400,KeyTime.FromPercent(1));  
  21.     kfb.KeySpline = new KeySpline(0,1,1,0);  
  22.     dakBx.KeyFrames.Add(kfb);  
  23.   
  24.     //创建场景  
  25.     Storyboard storyBoard = new Storyboard();  
  26.     Storyboard.SetTargetName(daRx,"ttR");  
  27.     Storyboard.SetTargetProperty(daRx, new PropertyPath(TranslateTransform.XProperty));  
  28.   
  29.     Storyboard.SetTargetName(dakGx, "ttG");  
  30.     Storyboard.SetTargetProperty(dakGx, new PropertyPath(TranslateTransform.XProperty));  
  31.   
  32.     Storyboard.SetTargetName(dakBx, "ttB");  
  33.     Storyboard.SetTargetProperty(dakBx, new PropertyPath(TranslateTransform.XProperty));  
  34.   
  35.     storyBoard.Duration = duration;  
  36.     storyBoard.Children.Add(daRx);  
  37.     storyBoard.Children.Add(dakBx);  
  38.     storyBoard.Children.Add(dakGx);  
  39.   
  40.     storyBoard.Begin(this);  
  41.     storyBoard.Completed += (a, b) => { MessageBox.Show(ttR.X.ToString()); };  
  42. }  
  1. <!--按钮-->  
  2. <Button Content="Go" Grid.RowSpan="3" Grid.Column="1" Click="Button_Click">  
  3.     <Button.Triggers>  
  4.         <EventTrigger RoutedEvent="Button.Click">  
  5.             <BeginStoryboard>  
  6.                 <Storyboard Duration="0:0:0.6">  
  7.                     <!--红色小球动画-->  
  8.                     <DoubleAnimation Duration="0:0:0.6" To="400" Storyboard.TargetName="ttR" Storyboard.TargetProperty="X">  
  9.                           
  10.                     </DoubleAnimation>  
  11.                     <!--绿色小球动画-->  
  12.                     <DoubleAnimationUsingKeyFrames Duration="0:0:0.6" Storyboard.TargetProperty="X" Storyboard.TargetName="ttG">  
  13.                         <SplineDoubleKeyFrame KeyTime="0:0:0.6" Value="400" KeySpline="1,0,0,1"></SplineDoubleKeyFrame>  
  14.                     </DoubleAnimationUsingKeyFrames>  
  15.                     <!--蓝色小球动画-->  
  16.                     <DoubleAnimationUsingKeyFrames Duration="0:0:0.6" Storyboard.TargetName="ttB" Storyboard.TargetProperty="X">  
  17.                         <SplineDoubleKeyFrame KeyTime="0:0:0.6" Value="400" KeySpline="0,1,1,0"></SplineDoubleKeyFrame>  
  18.                     </DoubleAnimationUsingKeyFrames>  
  19.                 </Storyboard>  
  20.             </BeginStoryboard>  
  21.         </EventTrigger>  
  22.     </Button.Triggers>  
  23. </Button>  

原标题:WPF学习之绘图和动画

关键词:wpf

wpf
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。