WPF 之Belling’s 课堂(2 ) 让物体动起来(运用StoryBoard)(一 )
话不多少,一切尽在程序中。
本例子实现功能:
在canvas中定义一个矩形,然后鼠标点击哪里,该矩形就会跟到哪里。
前台UI代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <Window x:Class="WPF应用程序1.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 Title="MainWindow" Height="350" Width="525"> 5 <Canvas x:Name="Carria" Width="470" Height="297" Background="Blue" MouseLeftButtonDown="Carria_MouseLeftButtonDown"></Canvas> 6 7 8 </Window>
后台cs代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Windows.Media.Animation; namespace WPF应用程序1 { /// <summary> /// MainWindow.xaml 的交互逻辑 /// </summary> public partial class MainWindow : Window { Rectangle rect; public MainWindow() { InitializeComponent(); //MessageBox.Show("zgz"); rect = new Rectangle(); rect.Fill = new SolidColorBrush(Colors.Bisque); rect.Width = 50; rect.Height = 50; rect.RadiusX = 5; rect.RadiusY = 5; Carria.Children.Add(rect); //在canvas(名字是 Carria)中加载上rect矩形。 Canvas.SetLeft(rect, 0);//定位子元素相对canvas的位置 Canvas.SetTop(rect, 0); //MessageBox.Show("zgz"); } private void Carria_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { //创建移动动画 Point p = e.GetPosition(Carria); //鼠标在canvas内部点击处的坐标 Storyboard std = new Storyboard(); //定义一个动画模板 //创建X轴方向的动画 DoubleAnimation da=new DoubleAnimation( Canvas.GetLeft(rect), p.X, new Duration(TimeSpan.FromMilliseconds(500)) //设置多少毫秒从初始位置移动到目标位置 ); Storyboard.SetTarget(da, rect); Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Left)")); std.Children.Add(da); //将da加载到动画模板上 //创建Y轴动画 da = new DoubleAnimation( Canvas.GetTop(rect), p.Y, new Duration(TimeSpan.FromMilliseconds(500)) ); Storyboard.SetTarget(da, rect); Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Top)")); std.Children.Add(da); //将动画动态加载进资源内 if (!Resources.Contains("rectAnimation")) { Resources.Add("rectAnimation", std); } //动画播放 std.Begin(); } } }