首页 / 软件开发 / Silverlight / Silverlight & Blend动画设计系列十三

Silverlight & Blend动画设计系列十三2011-04-20 博客园 BeniaoSilverlight & Blend动画设计系列十三：三角函数（Trigonometry）动画之飘落的雪花（Falling Snow）

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

雪花UserControl

<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;
}