Silverlight & Blend動畫設計系列十三：三角函數（Trigonometry）動畫之飄落的雪花（Falling Snow）
平時我們所看到的雪花（Falling Snow）飄飄的效果實際上也是一個動畫，是由許多的動畫對象共同完成的一個界面效果。對於不同大小的雪片可以通過縮放變換（ScaleTransform）功能特性確定，雪片飄落是存在於一個空間之中，通過不同的透明度值可使雪花看上去具有一定的空間視覺，雪花的飄落過程是由三角函數的原理實現的左右滑落效果，並可根據隨機生成數字作為雪花飄落的速度。
雪花UserControl
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><Canvas x:Name="LayoutRoot">
<Path Data="F1 M 24.667480,10.681641 L 24.017578,9.555176 L 21.143066,9.555176 L 22.395996,7.384766 L
21.746094,6.258301 L 20.445313,6.258301 L 18.541992,9.555176 L 14.284668,9.555176 L
16.413574,5.868652 L 20.220215,5.868652 L 20.870605,4.742188 L 20.220215,3.615723 L
17.713379,3.615723 L 19.151367,1.126465 L 18.500977,0.000000 L 17.200195,0.000000 L
15.763184,2.489746 L 14.509766,0.318848 L 13.209473,0.318848 L 12.559082,1.444824 L
14.462402,4.742188 L 12.333984,8.428711 L 10.205078,4.742188 L 12.108887,1.444824 L
11.458496,0.318848 L 10.157715,0.318848 L 8.904785,2.489746 L 7.467285,0.000000 L
6.166992,0.000000 L 5.516602,1.126465 L 6.954102,3.615723 L 4.447266,3.615723 L
3.796875,4.742188 L 4.447266,5.868652 L 8.254395,5.868652 L 10.383301,9.555176 L
6.125977,9.555176 L 4.222656,6.258301 L 2.921875,6.258301 L 2.271484,7.384766 L
3.524902,9.555176 L 0.650391,9.555176 L 0.000000,10.681641 L 0.650391,11.807617 L
3.524902,11.807617 L 2.271484,13.978516 L 2.921875,15.104980 L 4.222656,15.104980 L
6.125977,11.807617 L 10.383301,11.807617 L 8.254395,15.494629 L 4.447266,15.494629 L
3.796875,16.621094 L 4.447266,17.747070 L 6.954102,17.747070 L 5.516602,20.236816 L
6.166992,21.363281 L 7.467285,21.363281 L 8.904785,18.873535 L 10.157715,21.044434 L
11.458496,21.044434 L 12.108887,19.917969 L 10.205078,16.621094 L 12.333984,12.934082 L
14.462402,16.621094 L 12.559082,19.917969 L 13.209473,21.044434 L 14.509766,21.044434 L
15.762695,18.873535 L 17.200195,21.363281 L 18.500977,21.363281 L 19.151367,20.236816 L
17.713379,17.747070 L 20.220215,17.747070 L 20.870605,16.621094 L 20.220215,15.494629 L
16.413574,15.494629 L 14.284668,11.807617 L 18.541992,11.807617 L 20.445313,15.104980 L
21.746094,15.104980 L 22.395996,13.978516 L 21.143066,11.807617 L 24.017578,11.807617 L
24.667480,10.681641 Z" Fill="#FFFFFFFF" Width="24" Height="24" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="ScaleFlake" ScaleX="1" ScaleY="1"/>
<RotateTransform x:Name="RotateFlake" Angle="0"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Canvas>
通過路徑（Path）可繪制雪花界面，為此只需要提供一個根據不同參數構造不同的雪花界面效果的接口，既構造方法：
//根據不同的參數構造雪花對象public Snowflake(double Left, double Top, double Opacity)
{
InitializeComponent();
//隨機速度
Speed = Rand.Next(5);
if (Speed < 1)
{
Speed = 1;
}
//隨機位置、弧度、角度
DriftPosition = Left;
DriftRange = Rand.Next(50);
DriftAngle = Rand.Next(270);
Spin = Rand.Next(5);
ScaleFlake.ScaleX = ScaleFlake.ScaleY = Rand.Next(25, 100) / 100.0;
Canvas.SetLeft(this, Left);
Canvas.SetTop(this, Top);
this.Opacity = Opacity;
Position.X = Left;
Position.Y = Top;
}
出了根據不同參數生成雪花對象外，還需提供一個動態改變雪花位置的接口，也就是動態改變雪花的X,Y的坐標值。
//根據三角函數計算雪片下落過程（Y坐標）中的左右（X方向）浮動效果public void MoveFlake()
{
Position.Y += Speed;
Position.X = DriftPosition + Math.Cos(DriftAngle) * DriftRange;
RotateFlake.Angle += Spin;
if (Position.Y > AppHeight)
{
Position.Y = -this.Height;
}
Canvas.SetLeft(this, Position.X);
Canvas.SetTop(this, Position.Y);
DriftAngle += DriftSpeed;
}
在主程序中需要定義一個動畫，用於控制雪花下落和角度旋轉：
<UserControl.Resources><Storyboard x:Name="Snowfall" Duration="00:00:00"/>
</UserControl.Resources>
通過主程序動態的隨機構造雪花對象並添加到界面中，然後統一啟動動畫就實現了飄落的雪花效果，其完整的主控程序如下代碼塊：
public partial class MainPage : UserControl{
private List<Snowflake> Flake;
private List<Point> XYStart;
private List<double> OpacityValue;
private int MaxFlakes = 250;
private Random Rand = new Random();
public MainPage()
{
InitializeComponent();
//雪花集合--初始化250個雪花對象並同事進行動畫處理
Flake = new List<Snowflake>(MaxFlakes);
//雪花坐標集合
XYStart = new List<Point>(MaxFlakes);
//不透明度集合
OpacityValue = new List<double>(MaxFlakes);
for (int i = 0; i < MaxFlakes; i++)
{
//不同的起止坐標
Point newPoint = new Point(Rand.Next((int)LayoutRoot.Width), Rand.Next((int)LayoutRoot.Height));
XYStart.Add(newPoint);
//不同透明度值
OpacityValue.Add(Rand.NextDouble());
}
InitFlakes();
Snowfall.Completed += new EventHandler(Snowfall_Completed);
Snowfall.Begin();
}
private void InitFlakes()
{
//循環生成雪花冰添加到界面
for (int i = 0; i < MaxFlakes; i++)
{
Snowflake flake = new Snowflake(XYStart[i].X, XYStart[i].Y, OpacityValue[i]);
Flake.Add(flake);
flake.AppHeight = LayoutRoot.Height;
LayoutRoot.Children.Add(flake);
}
}
//動畫完成後繼續開始動畫的執行
private void Snowfall_Completed(object sender, EventArgs e)
{
foreach (Snowflake flake in Flake)
{
flake.MoveFlake();
}
Snowfall.Begin();
}
}
Silverlight & Blend動畫設計系列十三：三角函數（Trigonometry）動畫之飄落的雪花（Falling Snow）