windows phone 7 31天学习笔记 29：动画

炫目的开门动画

如果你打开过模拟器中的程序，程序加载时期你将会看到“开门”的动画。我将会在本文说明如何添加各种动画。

创建一个新的工程，添加一个矩形命名为ContentPanel。如下：

为了创建动画，我们需要将余下的工作在blend 4中完成。打开工程，如下：

打开以后，找到Object and Timeline标签。有一个小“+”,他是用来创建故事板的。

点击一下，然后出现一个对话框：

输入以后回到了界面，现在有了一个时间线。为了更好的看到时间线，可以按F6.他将会重新布局标签，将OaT移动到底部。

对于我们的“DoorOpen”动画，我们将会使用操纵页面上的所有内容。由于是继承于Silverlight，我们只需要定位根元素就行。点击LayoutRoot，然后需找一个蛋形的图标：

这个图标意味着一个新的关键帧。关键帧是动画的关键时刻。Silverlight足够聪明来辨别剩余的动画，所以，在示例中，我们将会定义开始和结束时刻，然后其他的就交给Silverlight吧。点击关键帧。

在零时刻创建关键帧的原因是我们想要一个基线。我们基本上说所有元素都是在开始位置，并且我们想要你来记录数据。开始位置中还有一个事情需要改变的就是转动中心。默认情况下是元素的正中心，但是我们希望将它设置到左边缘。

确认已经选择了LayoutRoot元素然后再0 时刻有一个小蛋形的图标，点击属性标签，在“Transform”类别中，有另一个标签被标记为Center of Rotation。你应当看到X 以及Y都被设置为0.5，我们可以将X设置为0：

接下来，返回到OaT.移动到指示时间的黄线到一半，当你移动的时候，你将会看到关键帧底部的时间变动。

这一次，我们将设置Projection.Rotation属性。打开属性这一部分，然后将它设置为Y为90。他将会让我们的元素旋转90度：

如果你点击了"play"按钮，你将会看到动画启动了。但是我们需要在做一步。我们需要在代码中调用，如果你想看xaml的内容，如下：

<?xml:namespace prefix = phone />
        
                
                <?XML:NAMESPACE PREFIX = [default] http://schemas.microsoft.com/winfx/2006/xaml/presentation NS = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" />
                        
                        
                                
                                
                        
                        
                                
                                
                        
                
                
        

    
    
        
                
        
        
            
            
        

        
        
            
            
        

        
        
        
        
    

在代码中调用

创建完以后，我们可以保存所有的东西，然后关闭Blend。返回到Vs2010,打开文件的cs文件，我们将会在用户点击矩形以后运行动画。

第一步是创建一个点击事件，然后是运行Begin()函数。如下：

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Day29_Animations
{
        public partial class MainPage : PhoneApplicationPage
        {
                // Constructor
                public MainPage()
                {
                        InitializeComponent();
                        rectangle1.MouseLeftButtonDown +=new MouseButtonEventHandler(rectangle1_MouseLeftButtonDown);
                }

                private void rectangle1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
                {
                        DoorOpen.Begin();
                }
        }
}