Silverlight雪花
冬天了,不知道为什么就是不下雪呢。
曾经做过一个雪花...可是因为SL没有引导路径所以做成个直线下降(郁闷)。
自从看了这个例子(http://www.shinedraw.com/animation-effect/flash-and-silverlight-mystery-magic-background/)发现SL雪花是可以飘落的更好看一点的。
这个方法实现的效果是不错的(建议大家收藏这个网站Flash&SL都有)。
先上图
下面开始分析。OOP不关大家熟悉与否,大家可以在分析源码时使用这个方法。毕竟在理解一个对象的时候把它先看做一个整体比把它的属性都详细分析要好的多。
既然是下需那么 “雪”我们把它看成一个对象,但是要添加到SL下必须是 UIElement 在此将该对象继承自Canvas
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 public class WhiteSnow:Canvas
2 {
3 public WhiteSnow(double size)
4 {
5 Ellipse ellipse = new Ellipse();
6 ellipse.Width = ellipse.Height = size;
7
8 RadialGradientBrush brush = new RadialGradientBrush();
9 GradientStop gs = new GradientStop();
10 gs.Color = Colors.White;
11 gs.Offset = 0.2;
12 brush.GradientStops.Add(gs);
13
14 GradientStop gs2 = new GradientStop();
15 gs2.Color = Color.FromArgb(0, 255, 255, 255);
16 gs2.Offset = 1;
17 brush.GradientStops.Add(gs2);
18
19 ellipse.Fill = brush;
20
21 //类似于坐标点居中
22 ellipse.SetValue(Canvas.LeftProperty, -ellipse.Width / 2);
23 ellipse.SetValue(Canvas.TopProperty, -ellipse.Height / 2);
24
25
26
27 this.Children.Add(ellipse);
28 }
29 }
2 {
3 public WhiteSnow(double size)
4 {
5 Ellipse ellipse = new Ellipse();
6 ellipse.Width = ellipse.Height = size;
7
8 RadialGradientBrush brush = new RadialGradientBrush();
9 GradientStop gs = new GradientStop();
10 gs.Color = Colors.White;
11 gs.Offset = 0.2;
12 brush.GradientStops.Add(gs);
13
14 GradientStop gs2 = new GradientStop();
15 gs2.Color = Color.FromArgb(0, 255, 255, 255);
16 gs2.Offset = 1;
17 brush.GradientStops.Add(gs2);
18
19 ellipse.Fill = brush;
20
21 //类似于坐标点居中
22 ellipse.SetValue(Canvas.LeftProperty, -ellipse.Width / 2);
23 ellipse.SetValue(Canvas.TopProperty, -ellipse.Height / 2);
24
25
26
27 this.Children.Add(ellipse);
28 }
29 }
用一个渐变填充的圆形来充当雪花。
接下来实现运动效果
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 public void Run()
2 {
3 //移动方法
4 double angle = (Counter/180) * Math.PI;
5 double v = Math.Cos(angle);
6 Y += YVelocity;
7 X = CenterX + Math.Cos(angle) * SwingRadius;
8 Counter += SwingSpeed;
9 }
10 public double X
11 {
12 get { return (double)(GetValue(Canvas.LeftProperty)); }
13 set { SetValue(Canvas.LeftProperty, value); }
14 }
15 public double Y
16 {
17 get { return (double)(GetValue(Canvas.TopProperty)); }
18 set { SetValue(Canvas.TopProperty, value); }
19 }
2 {
3 //移动方法
4 double angle = (Counter/180) * Math.PI;
5 double v = Math.Cos(angle);
6 Y += YVelocity;
7 X = CenterX + Math.Cos(angle) * SwingRadius;
8 Counter += SwingSpeed;
9 }
10 public double X
11 {
12 get { return (double)(GetValue(Canvas.LeftProperty)); }
13 set { SetValue(Canvas.LeftProperty, value); }
14 }
15 public double Y
16 {
17 get { return (double)(GetValue(Canvas.TopProperty)); }
18 set { SetValue(Canvas.TopProperty, value); }
19 }
相信大家一看便知,思路很简单就是不断改变对象的坐标(x,y)。在SL中坐标值是通过left top属性体现的。
竟然对象有了。接下来就是实现动态添加,使用定时器是再好不过的了。有兴趣的看一下源码吧!当然完全没有必要下载我这个源码上面给出的链接在那个基础上完全可以做出更多的效果来。
关于SL遮罩的问题,这里没有涉及 只不过是两张图片而已。中间夹着一个Canvas!