Silverlight & Blend动画设计系列十三 -电脑资料

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

平时我们所看到的雪花（Falling Snow）飘飘的效果实际上也是一个动画，是由许多的动 画对象共同完成的一个界面效果，

Silverlight & Blend动画设计系列十三

。对于不同大小的雪片可以通过缩放变换（ScaleTransform. ）功能特性确定，雪片飘落是存在于一个空间之中，通过不同的透明度值可使雪花看上去具 有一定的空间视觉，雪花的飘落过程是由三角函数的原理实现的左右滑落效果，并可根据随 机生成数字作为雪花飘落的速度。

雪花UserControl


　　　　 　　　　　　　　　　　　 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）可绘制雪花界面，为此只需要提供一个根据不同参数构造不同的雪花界 面效果的接口，既构造方法：

//根据不同的参数构造雪花对象
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的坐标值，

电脑资料

《Silverlight & Blend动画设计系列十三》(https://www.unjs.com)。

//根据三角函数计算雪片下落过程（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;
}

在主程序中需要定义一个动画，用于控制雪花下落和角度旋转：


　　　　


通过主程序动态的随机构造雪花对象并添加到界面中，然后统一启动动画就实现了飘落的 雪花效果，其完整的主控程序如下代码块：

public　partial　class　MainPage　:　UserControL
{
　　　　 private　List　Flake;
　　　　 private　List　XYStart;
　　　　 private　List　OpacityValue;
　　　　 private　int　MaxFlakes　=　250;
　　　　 private　Random　Rand　=　new　Random();
　　　　 public　MainPage()
　　　　 {
　　　　　　　　 InitializeComponent();
　　　　　　　　 //雪花集合--初始化250个雪花对象并同事进行动画处理
　　　　　　　　 Flake　=　new　List(MaxFlakes);
　　　　　　　　 //雪花坐标集合
　　　　　　　　 XYStart　=　new　List(MaxFlakes);
　　　　　　　　 //不透明度集合
　　　　　　　　 pacityValue　=　new　List(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();
　　　　 }
}

源码： http://files.cnblogs.com/beniao/Siverlight/SnowflakesCompleted.rar