//創(chuàng)建X軸方向動(dòng)畫 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);
//創(chuàng)建Y軸方向動(dòng)畫 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(); }
下面再來一起學(xué)習(xí)一個(gè)稍微復(fù)雜點(diǎn)的二維向量運(yùn)動(dòng),模擬屏幕內(nèi)有一小球,當(dāng)鼠標(biāo)在舞臺(tái)上點(diǎn)擊則小球以動(dòng)畫的形式移動(dòng)到鼠標(biāo)點(diǎn)擊處。
如下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>
其舞臺(tái)的鼠標(biāo)左鍵點(diǎn)擊事件代碼如下:
private void OnMouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e) { //鼠標(biāo)點(diǎn)擊點(diǎn)坐標(biāo) var mousePoint = e.GetPosition(null); //當(dāng)前對(duì)象所在坐標(biāo) var currentPoint = new Point((double)ellipse.GetValue(Canvas.LeftProperty), (double)ellipse.GetValue(Canvas.TopProperty));
Storyboard sb = new Storyboard(); //創(chuàng)建X坐標(biāo)方向動(dòng)畫 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); //創(chuàng)建Y坐標(biāo)方向動(dòng)畫 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(); }
以上太陽的簡單位置變換移動(dòng)和小球隨鼠標(biāo)的移動(dòng)都可以理解為平面中向量的運(yùn)動(dòng),只不過在實(shí)現(xiàn)上沒有直接通過向量的變換實(shí)現(xiàn),而是通過Silverlight中提供的動(dòng)畫API實(shí)現(xiàn),個(gè)人認(rèn)為,從某種角度可以將Silverlight中的動(dòng)畫API理解為Silverlight的向量API,動(dòng)畫API實(shí)現(xiàn)的平面動(dòng)畫理解為向量運(yùn)動(dòng)。
本文鏈接:http://m.95time.cn/tech/multimedia/2010/7670.asp
出處:Microsoft
責(zé)任編輯:bluehearts
上一頁 Silverlight中的坐標(biāo)系統(tǒng)與向量運(yùn)動(dòng) [1] 下一頁
◎進(jìn)入論壇RIA設(shè)計(jì)與應(yīng)用版塊參加討論
|