Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)

Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow),第1张

概述  平时我们所看到的雪花(Falling Snow)飘飘的效果实际上也是一个动画,是由许多的动画对象共同完成的一个界面效果。对于不同大小的雪片可以通过缩放变换(ScaleTransform)功能特性确定,雪片飘落是存在于一个空间之中,通过不同的透明度值可使雪花看上去具有一定的空间视觉,雪花的飘落过程是由三角函数的原理实现的左右滑落效果,并可根据随机生成数字作为雪花飘落的速度。   雪花UserCo

  平时我们所看到的雪花(Falling SNow)飘飘的效果实际上也是一个动画,是由许多的动画对象共同完成的一个界面效果。对于不同大小的雪片可以通过缩放变换(Scaletransform)功能特性确定,雪片飘落是存在于一个空间之中,通过不同的透明度值可使雪花看上去具有一定的空间视觉,雪花的飘落过程是由三角函数的原理实现的左右滑落效果,并可根据随机生成数字作为雪花飘落的速度。

 

雪花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;
}

 

  在主程序中需要定义一个动画,用于控制雪花下落和角度旋转:

< UserControl.Resources >
    
< Storyboard  x:name ="SNowfall"  Duration ="00:00:00" />
</ UserControl.Resources >

 

   通过主程序动态的随机构造雪花对象并添加到界面中,然后统一启动动画就实现了飘落的雪花效果,其完整的主控程序如下代码块:

 

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动画设计系列文章

  《Function Silverlight 3 Animation》----本篇中使用的示例素材选自此书

 

  

总结

以上是内存溢出为你收集整理的Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)全部内容,希望文章能够帮你解决Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://www.outofmemory.cn/web/1030265.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存