Silverlight & Blend Animation Design Series 13

Silverlight & Blend Animation Design Series 13:3 angular function (trigonometry) animation falling Snowflakes (falling Snow)

At ordinary times we see the snow (falling Snow) fluttering effect is actually an animation, is a lot of animation objects together to complete an interface effect. For different sizes of snowflakes can be determined by the scaling transformation (scaletransform) function characteristics, snowflakes falling is in a space, through different transparency values can make snowflakes look a certain space vision, snowflakes falling process is by the principle of triangular function to achieve the left and right sliding effect, And can be based on randomly generated numbers as the speed of snow falling.

Snowflake 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=" "height=" 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>

The snowflake interface can be drawn by path (path), which only requires an interface that constructs different snowflake interface effects based on different parameters, and constructs the method:

//根据不同的参数构造雪花对象
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;
}