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

Source: Internet
Author: User
Tags silverlight

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.