快捷搜索:

Silverlight & Blend动画设计系列十:Silverlight中的

假如我们习气于数学坐标系,那么对付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中命名为动画。

///

/// 创建动画

///

private void CreateStoryboard()

{

//元素当前所在的坐标点

Point currentPoint = new Point(Canvas.GetLeft(darkMoon), Canvas.GetTop(darkMoon));

//目标点坐int标

Point point = new Point(280, -245);

//创建动画容器光阴线

Storyboard storyboard = new Storyboard();

DoubleAnimation doubleAnimation = new DoubleAnimation();

//创建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();

}

您可能还会对下面的文章感兴趣: