silverlight
发布时间:2022-05-03 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
概述
平时我们所看到的雪花(
falling
snow)飘飘的效果实际上也是一个动画,是由许多的动画对象共同完成的一个界面效果。对于不同大小的雪片可以通过缩放变换(ScaleTransform)功能特性确定,雪片飘落是存在于
一个空间之中,通过不同的透明度值可使雪花看上去具有一定的空间视觉,雪花的飘落过程是由三角函数的原理实现的左右滑落效果,并可根据随机生成数字作为雪花飘落的速度。 雪花UserCo
平时我们所看到的雪花(falling SNow)飘飘的效果实际上也是一个动画,是由许多的动画对象共同完成的一个界面效果。对于不同大小的雪片可以通过缩放变换(ScaleTransform)功能特性确定,雪片飘落是存在于一个空间之中,通过不同的透明度值可使雪花看上去具有一定的空间视觉,雪花的飘落过程是由三角函数的原理实现的左右滑落效果,并可根据随机生成数字作为雪花飘落的速度。
![Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow) Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)](http://img.voidcn.com/vcimg/static/loading.png)
![Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow) Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)](http://img.voidcn.com/vcimg/static/loading.png)
雪花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;
}
出了根据不同参数生成雪花对象外,还需提供一个动态改变雪花位置的接口,也就是动态改变雪花的X,Y的坐标值。
//
根据三角函数计算雪片下落过程(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
<
SNowflake
>
Flake;
private
List
<
Point
>
XYStart;
private
List
<
double
>
OpacityValue;
private
int
MaxFlakes
=
250
;
private
random rand
=
new
random();
public
MainPage()
{
InitializeComponent();
//
雪花集合--初始化250个雪花对象并同事进行动画处理
Flake
=
new
List
<
SNowflake
>
(MaxFlakes);
//
雪花坐标集合
XYStart
=
new
List
<
Point
>
(MaxFlakes);
//
不透明度集合
OpacityValue
=
new
List
<
double
>
(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();
}
}
![Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow) Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)](http://img.voidcn.com/vcimg/static/loading.png)
推荐资源:
Silverlight & Blend动画设计系列文章
《Function Silverlight 3 Animation》----本篇中使用的示例素材选自此书
![Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow) Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)](http://img.voidcn.com/vcimg/static/loading.png)
大佬总结
以上是大佬教程为你收集整理的Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)全部内容,希望文章能够帮你解决Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。