Silverlight & Blend动画设计系列十三：三角函数（Trigonometry）动画之飘落的雪花（Falling Snow）

阅读更多

　　平时我们所看到的雪花（Falling Snow）飘飘的效果实际上也是一个动画，是由许多的动画对象共同完成的一个界面效果。对于不同大小的雪片可以通过缩放变换（ScaleTransform）功能特性确定，雪片飘落是存在于一个空间之中，通过不同的透明度值可使雪花看上去具有一定的空间视觉，雪花的飘落过程是由三角函数的原理实现的左右滑落效果，并可根据随机生成数字作为雪花飘落的速度。

雪花UserControl

< Canvasx:Name = " LayoutRoot " >
< PathData = " F1M24.667480,10.681641L24.017578,9.555176L21.143066,9.555176L22.395996,7.384766L
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 >
< ScaleTransformx:Name = " ScaleFlake " ScaleX = " 1 " ScaleY = " 1 " />
< RotateTransformx: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 RandomRand = 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 ++ )
{
// 不同的起止坐标
PointnewPoint = 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 ++ )
{
Snowflakeflake = 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,EventArgse)
{
foreach (Snowflakeflake in Flake)
{
flake.MoveFlake();
}

Snowfall.Begin();
}
}

　　　　　　　　

　　推荐资源：

　　Silverlight & Blend动画设计系列文章

　　《Function Silverlight 3 Animation》----本篇中使用的示例素材选自此书