windows phone 7 31天学习笔记 29:动画
原文地址:http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-29-Animations.aspx炫目的开门动画
如果你打开过模拟器中的程序,程序加载时期你将会看到“开门”的动画。我将会在本文说明如何添加各种动画。
创建一个新的工程,添加一个矩形命名为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的内容,如下:
在代码中调用
创建完以后,我们可以保存所有的东西,然后关闭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();
}
}
}
页:
[1]