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

Usually we see snowflakes (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, snow falling is present in a space, through different transparency values can make snowflakes appear to have a certain space vision, snowflakes falling process is the principle of triangular function to achieve the left and right slide effect, And randomly generated numbers as the speed of snowflakes falling.

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

A snowflake interface can be drawn through a path, which only requires an interface that constructs different snowflake interface effects based on different parameters, both constructing a method:

Construction of Snowflake objects based on different parameters
Public Snowflake (double left, double Top, double Opacity)
{
InitializeComponent ();

Random speed
Speed = Rand.next (5);
if (Speed < 1)
{
Speed = 1;
}

Random position, radian, angle
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;
}

In addition to generating snowflake objects according to different parameters, it is also necessary to provide an interface to dynamically change the location of snowflakes, that is, the coordinate values of the x, Y, which dynamically change snowflakes.

Calculates the left-right (x-direction) floating effect in the Snowflake drop process (y-coordinate) based on trigonometric functions
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;
}

In the main program, you need to define an animation that controls snowflake drop and angular rotation:

<UserControl.Resources>
<storyboard x:name= "Snowfall" duration= "00:00:00"/>
</UserControl.Resources>

The main program dynamically randomly constructs the Snowflake object and adds it to the interface, then the unified start animation realizes the falling snowflake effect, its complete main control program is as follows code block:

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 ();

Snowflake Collection--Initialize 250 snowflake objects and animate with colleagues
Flake = new list<snowflake> (maxflakes);
Snowflake Coordinate Collection
Xystart = new list<point> (maxflakes);
Opacity Collection
Opacityvalue = new list<double> (maxflakes);

for (int i = 0; i < maxflakes; i++)
{
Different starting and ending coordinates
Point newpoint = new Point (Rand.next ((int) layoutroot.width), Rand.next ((int) layoutroot.height));
Xystart.add (Newpoint);
Different transparency values
Opacityvalue.add (Rand.nextdouble ());
}

Initflakes ();
snowfall.completed + = new EventHandler (snowfall_completed);
Snowfall.begin ();
}

private void Initflakes ()
{
Loop-generated snowflake Ice added to the interface
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);
}
}

Resume animation execution after animation is complete
private void Snowfall_completed (object sender, EventArgs e)
{
foreach (snowflake flake in Flake)
{
Flake. Moveflake ();
}

Snowfall.begin ();
}
}

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