Silverlight & Blend動畫設計系列十三：三角函數（Trigonometry）動畫之飄落的雪花（Falling Snow）

　　平時我們所看到的雪花（Falling Snow）飄飄的效果實際上也是一個動畫，是由許多的動畫對象共同完成的一個界面效果。對於不同大小的雪片可以通過縮放變換（ScaleTransform）功能特性確定，雪片飄落是存在於一個空間之中，通過不同的透明度值可使雪花看上去具有一定的空間視覺，雪花的飄落過程是由三角函數的原理實現的左右滑落效果，並可根據隨機生成數字作爲雪花飄落的速度。

雪花UserControl

　　通過路徑（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();
    }
}