//创建X轴方向动画 doubleAnimation.From = currentPoint.X; doubleAnimation.To = point.X; doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 1)); Storyboard.SetTarget(doubleAnimation, darkMoon); Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)")); storyboard.Children.Add(doubleAnimation);
//创建Y轴方向动画 doubleAnimation = new DoubleAnimation(); doubleAnimation.SetValue(DoubleAnimation.FromProperty, currentPoint.Y); doubleAnimation.SetValue(DoubleAnimation.ToProperty, point.Y); doubleAnimation.SetValue(DoubleAnimation.DurationProperty, new Duration(new TimeSpan(0, 0, 1))); Storyboard.SetTarget(doubleAnimation, darkMoon); Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)")); storyboard.Children.Add(doubleAnimation);
storyboard.Begin(); }
下面再来一起学习一个稍微复杂点的二维向量运动,模拟屏幕内有一小球,当鼠标在舞台上点击则小球以动画的形式移动到鼠标点击处。
如下XAML定义:
<UserControl x:Class="SLV.MainPage" 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" mc:Ignorable="d"> <Canvas x:Name="LayoutRoot" Width="400" Height="400" Background="Black" MouseLeftButtonDown="OnMouseDown"> <Ellipse Fill="YellowGreen" x:Name="ellipse" Width="20" Height="20" Canvas.Left="80" Canvas.Top="66" > </Ellipse> </Canvas> </UserControl>
其舞台的鼠标左键点击事件代码如下:
private void OnMouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e) { //鼠标点击点坐标 var mousePoint = e.GetPosition(null); //当前对象所在坐标 var currentPoint = new Point((double)ellipse.GetValue(Canvas.LeftProperty), (double)ellipse.GetValue(Canvas.TopProperty));
Storyboard sb = new Storyboard(); //创建X坐标方向动画 DoubleAnimation doubleAnimation = new DoubleAnimation(); doubleAnimation.From = currentPoint.X; doubleAnimation.To = mousePoint.X; doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 2)); Storyboard.SetTarget(doubleAnimation, ellipse); Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)"));
sb.Children.Add(doubleAnimation); //创建Y坐标方向动画 doubleAnimation = new DoubleAnimation(); doubleAnimation.From = currentPoint.Y; doubleAnimation.To = mousePoint.Y; doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 2)); Storyboard.SetTarget(doubleAnimation, ellipse); Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)")); sb.Children.Add(doubleAnimation);
sb.Begin(); }
以上太阳的简单位置变换移动和小球随鼠标的移动都可以理解为平面中向量的运动,只不过在实现上没有直接通过向量的变换实现,而是通过Silverlight中提供的动画API实现,个人认为,从某种角度可以将Silverlight中的动画API理解为Silverlight的向量API,动画API实现的平面动画理解为向量运动。
本文链接:http://www.blueidea.com/tech/multimedia/2010/7670.asp
出处:Microsoft
责任编辑:bluehearts
上一页 Silverlight中的坐标系统与向量运动 [1] 下一页
◎进入论坛RIA设计与应用版块参加讨论
|