如果我们习惯于数学坐标系,那么对于Silverlight中的坐标系可能会有些不习惯。因为在Silverlight中的坐标系与Flash中的坐标系一样,一切都的颠倒的。在标准的数学坐标系中,X轴表示水平轴,Y轴表是垂直轴,然而Silverlight中的坐标系是基于视频屏幕的坐标系。
Silverlight中的坐标系统和Flash中的坐标系统是完全一样的,都是采用笛卡尔坐标系统,分为四象限。简单的说就是以X轴表示水平方向并向东方无限延伸,Y轴表示垂直方向并向着南方无限延伸,X和Y轴相交点表示坐标系源点,其X,Y坐标值为0,0,所以在Silverlight中的坐标系范围就是以坐标源点为起点,无限向东南方向延伸,也就是笛卡尔坐标系中的四象限。
Silverlight的向量(Vector)运动目前仅支持一维向量运动(One-dimensional vector movement)和二维向量运动(Two-dimensional vector movement),也就是平时大家所说的1D和2D。一维向量运动可以理解为在同一直线上的运动,二维向量运动则可以理解在平面空间(X,Y坐标系)里的运动。向量的概念从初中就开始学习,这里就不做介绍了,如有不清楚的朋友可以移步到这里。
二维向量运动很容易理解,在Silverlight的动画设计中二维动画也是最常见和使用率最高的动画,可参考在本系列第一篇《Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)》中所介绍到的偏移动画变换的实现,其实质就是一个二维向量运动,动画元素对象在动画过度期间不停的改变对象所在的物理坐标位置实现了对象位置的变化,本质上就是元素对象在坐标系里的二维坐标位置的改变。从几何上来理解就是发生了一个二维的向量运动,Silverlight中命名为动画。
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->///<summary>
///创建动画
///</summary>
privatevoidCreateStoryboard()
{
//元素当前所在的坐标点
PointcurrentPoint=newPoint(Canvas.GetLeft(darkMoon),Canvas.GetTop(darkMoon));
//目标点坐int标
Pointpoint=newPoint(280,-245);
//创建动画容器时间线
Storyboardstoryboard=newStoryboard();
DoubleAnimationdoubleAnimation=newDoubleAnimation();
//创建X轴方向动画
doubleAnimation.From=currentPoint.X;
doubleAnimation.To=point.X;
doubleAnimation.Duration=newDuration(newTimeSpan(0,0,1));
Storyboard.SetTarget(doubleAnimation,darkMoon);
Storyboard.SetTargetProperty(doubleAnimation,
newPropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"));
storyboard.Children.Add(doubleAnimation);
//创建Y轴方向动画
doubleAnimation=newDoubleAnimation();
doubleAnimation.SetValue(DoubleAnimation.FromProperty,currentPoint.Y);
doubleAnimation.SetValue(DoubleAnimation.ToProperty,point.Y);
doubleAnimation.SetValue(DoubleAnimation.DurationProperty,newDuration(newTimeSpan(0,0,1)));
Storyboard.SetTarget(doubleAnimation,darkMoon);
Storyboard.SetTargetProperty(doubleAnimation,
newPropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"));
storyboard.Children.Add(doubleAnimation);
storyboard.Begin();
}
下面再来一起学习一个稍微复杂点的二维向量运动,模拟屏幕内有一小球,当鼠标在舞台上点击则小球以动画的形式移动到鼠标点击处。如下XAML定义:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><UserControlx: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">
<Canvasx:Name="LayoutRoot"Width="400"Height="400"Background="Black"MouseLeftButtonDown="OnMouseDown">
<EllipseFill="YellowGreen"x:Name="ellipse"
Width="20"
Height="20"
Canvas.Left="80"
Canvas.Top="66">
</Ellipse>
</Canvas>
</UserControl>
其舞台的鼠标左键点击事件代码如下:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->privatevoidOnMouseDown(objectsender,System.Windows.Input.MouseButtonEventArgse)
{
//鼠标点击点坐标
varmousePoint=e.GetPosition(null);
//当前对象所在坐标
varcurrentPoint=newPoint((double)ellipse.GetValue(Canvas.LeftProperty),(double)ellipse.GetValue(Canvas.TopProperty));
Storyboardsb=newStoryboard();
//创建X坐标方向动画
DoubleAnimationdoubleAnimation=newDoubleAnimation();
doubleAnimation.From=currentPoint.X;
doubleAnimation.To=mousePoint.X;
doubleAnimation.Duration=newDuration(newTimeSpan(0,0,2));
Storyboard.SetTarget(doubleAnimation,ellipse);
Storyboard.SetTargetProperty(doubleAnimation,newPropertyPath("(Canvas.Left)"));
sb.Children.Add(doubleAnimation);
//创建Y坐标方向动画
doubleAnimation=newDoubleAnimation();
doubleAnimation.From=currentPoint.Y;
doubleAnimation.To=mousePoint.Y;
doubleAnimation.Duration=newDuration(newTimeSpan(0,0,2));
Storyboard.SetTarget(doubleAnimation,ellipse);
Storyboard.SetTargetProperty(doubleAnimation,newPropertyPath("(Canvas.Top)"));
sb.Children.Add(doubleAnimation);
sb.Begin();
}
以上太阳的简单位置变换移动和小球随鼠标的移动都可以理解为平面中向量的运动,只不过在实现上没有直接通过向量的变换实现,而是通过Silverlight中提供的动画API实现,个人认为,从某种角度可以将Silverlight中的动画API理解为Silverlight的向量API,动画API实现的平面动画理解为向量运动。
推荐资源:
MSDN:http://msdn.microsoft.com/zh-cn/library/cc189090(VS.95).aspx
http://www.silverlight.net/learn/quickstarts/animations/
Silverlight & Blend动画设计系列文章
《Function Silverlight 3 Animation》----本篇中使用的部分素材选自此书
分享到:
相关推荐
Silverlight4 Blend SDK 中文文档
[最新出版Silverlight及Blend学习电子书教程合集] [最新出版Silverlight及Blend学习电子书教程合集]
Foundation Expression Blend 4 with Silverlight 4 takes you through your first steps in creating Rich Internet Applications (RIAs) using the latest release of Microsoft’s technology. You’ll explore ...
刚接触WPF,初次使用Blend做WPF的动画效果,学习Blend制作WPF的循环动画、路径动画,上传是为了领勋章...
本次项目采用Silverlight实现一个简单的个人多媒体平台,通过该平台,用户可以搜索自己喜欢的多媒体文件,在线播放(其播放质量优于Flash);还可以参与评论、上传自己的作品。 技能点描述: 1.Silverlight常用控件...
Blend 5 for Silverlight5 预览版 6月底过期不能用了,新版本又没有,就把它破解了下,把dll覆盖安装目录下的dll即可。经试验,没有啥功能限制,完全可用。
使用Expression Blend 创建的Silverlight时钟
Blend silverlight Blend silverlight Blend silverlight Blend silverlight
Silverlight及Blend的电子教学文档
silverlight_blend动画实例
PDF 书籍: Expression Blend 4中文版WPF和Silverlight项目设计基础。
C#的一些介绍比较全面 [2008年最新出版Silverlight及Blend学习电子书教程合集]
本资源中是blend难得的中文经典教程,应该会给silverlight爱好者带来很好的帮助。
WPF和Silverlight项目设计实例光盘源代码 作者:张洪定
Expression Blend 3 Silverlight
[Apress] Expression Blend 4 高级程序设计 (英文版) [Apress] Pro Expression Blend 4 (E-Book) ☆ 出版信息:☆ [作者信息] Andrew Troelsen [出版机构] Apress [出版日期] 2011年03月04日 [图书页数] 400页...
在RIA应用程序开发中,程序员和设计师角色的分工各不相同,针对这一点,微软提供了相对应的Silverlight开发工具,即Visual Studi0和Blend,这两种开发工具在书中通过一系列入门范例得到了详细的介绍,使读者可以快速...
Expression Blend实例中文教程系列由CSDN社区Silverlight版主jv9所著,该系列教程分基础篇和实例篇,作者结合实际开发经验,以大量的图文,由浅入深的描述Blend在Silverlight和WPF项目开发中的使用
Expression Blend 4中文版WPF和Silverlight项目设计基础.pdf