silverlight 4 动画学习（一）

     本文的目的是帮助初学者学习silverlight动画。如果您是silverlight高手，请飘过，因为这对您来说实在是上不得大雅之堂。

     学习silverlight动画之前，希望您对xaml（xml）有些了解，能够创建一个silverlight 应用程序，能够熟练的运用c#语言，会使用VS。

     以上这些话是不想浪费您的宝贵时间。

     现在我们开始学习吧。

 

软件环境 VS 2010 及 silverlight tools 开发工具（具体内容自己去找吧 ：））

1。首先我们先了解下动画的原理：

动画是快速播放一系列图像（其中每个图像与下一个图像略微不同）给人造成的一种幻觉。大脑感觉这组图像是一个变化的场景。在电影中，摄像机每秒钟拍摄许多照片（帧），便可使人形成这种幻觉。用投影仪播放这些帧时，观众便可以看电影了。

在 Silverlight 中，通过对对象的个别属性应用动画，可以对对象进行动画处理。-------MSDN

 

2。开始我们的 "Hello world"程序把。

       打开VS 2010

       new project

       然后单击“ok”。

 

（如果这时候有错误提示，那一定是您的环境 没有安装好，按照提示一步一步地做就可以了。）

 

3。双击MainPage.xaml. 在上面添加一个Rectangle，并把它的Fill设为Yellows

<Grid x:Name="LayoutRoot" Background="White">

 

 

 

 

 

 

<Rectangle Height="120" HorizontalAlignment="Left" Margin="76,78,0,0"

 

 

 

Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="197" Fill="Yellow"/>

 

 

 

</Grid>

 

接下来我们为这个Rectangle添加动画。

在xaml中添加如下代码：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<Grid x:Name="LayoutRoot" Background

="White">

 

 

 

 

<Grid.Resources>

 

 

 

 

 

<Storyboard x:Name

="myStoryBoard">

 

 

 

 

<DoubleAnimation To="0" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty

="Opacity" />

 

 

 

 

</Storyboard>

 

 

 

 

 

</Grid.Resources>

 

 

 

 

 

<Rectangle Height="120" HorizontalAlignment="Left" Margin="76,78,0,0"

 

 

 

 

Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="197" Fill

="Yellow"/>

 

 

 

 

<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="139,232,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />

 

 

 

 

 

</Grid>

 

在后他的c#文件中，添加一个click时间的响应方法：

 

 

 

 

private void button1_Click(object sender, RoutedEventArgs e)

 

  

{

 

    

    myStoryboard.begin(); 

 

 

}

 

然后按F5 ，

这样你就看到了界面。

 

 

单击button， 黄色矩形块会慢慢消失。

 

现在我们来解释下这段代码把。

〈Storyboard〉〈/Storyboard〉

在这里是声明 一个storyboard，他是运行的主体 x:name="myStoryboard"是定义其名称，为code behind 引用。

〈DoubleAnimation〉是一个动作，

<

 

 

DoubleAnimation To="0" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="Opacity" />

 Storyboard.TargetName="rectangle1" 表示该动作定义到 "rectangle1" 元素上。

Storyboard.TargetProperty="Opacity" 表示该动作定义到opacity属性上

To 表示目标属性的最终值。

这里还可以通过by设置相对值

这样这个动画就清楚了。

 

当然，这里还有很多属性值我们可以设置。

如duration 设置 动画执行持续多长时间，默认值为1秒钟

From目标属性的起始值，默认值为当前值

FillBehavior

 

 

="Stop"表示在动画结束后目标属性值是否保留。

若要使动画无限期地重复，请将其 RepeatBehavior 属性设置为 Forever。

 

BeginTime 设置该动画在动画开始后，一个延迟启动的时间。

 

 

Completed  在这里可以注册一个事件，动画完成事件，这样你可以在动画完成之后作一些处理。

 

以上所说的是， from/to/by动画，

下一次讲 keyFrame动画

 

 

一些项目小经验：

当多次启动某一动画，在上次启动后，需要显示的将其stop（）。

silverlight的国际化资源文件的属性，默认都是intenal,在调用的使用会出错。

将其设为public即可。

 

 

 

 如有错误，欢迎大家指正。

欢迎批评。