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

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

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

 

Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)雪花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(25100/ 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动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow) 

  推荐资源:

  Silverlight & Blend动画设计系列文章

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

 

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

版权说明

  本文属学习笔记,欢迎转载且注明文章出处,其版权归作者和博客园共有。  

  作      者:Beniao

 文章出处:http://beniao.cnblogs.com/  或  http://www.cnblogs.com/

 

上一篇:阿里云「MaxCompute最佳实践」征文大赛获奖文章公布


下一篇:阿里新生的面试经,与老人分享的职业进阶攻略及规划